\n \n
\n \n
\n \n Overview\n
\n \n\n \n
\n Use responsive-friendly custom flex classes to build nested layouts\n with fixed and fluid columns. The classes are named using the format\n flex-{property}
for xs
and\n flex-{breakpoint}-{property}
for sm
,\n md
, lg
, xl
, and\n xxl
.\n
\n \n\n \n
\n Where
property
is one of:\n
\n - \n
root
- to define the root node of the flex\n layout(usually it's used when the layout is placed as a direct\n child of the body element in order to fully occupy the window\n height)\n \n - \n
column-auto
- to set a column with auto height\n \n - \n
column-fluid
- to set a column with fluid height\n \n - \n
row-auto
- to set a column with auto width\n \n - \n
row-fluid
- to set a column with fluid width\n \n - \n
center
- to set a column's content vertically and\n horizontally centered\n \n
\n
\n \n\n \n
\n
\n
\n
\n
\n Fixed Height\n
\n\n
\n Fluid Height\n
\n
\n\n
\n
\n Fixed Height\n
\n\n
\n
\n Fluid Width\n
\n\n
\n Fixed Width\n
\n
\n
\n
\n
\n
\n \n\n \n
\n
{{`\n \n
\n
\n Fixed Height\n
\n\n
\n Fluid Height\n
\n
\n\n
\n
\n Fixed Height\n
\n\n
\n
\n Fluid Width\n
\n\n
\n Fixed Width\n
\n
\n
\n
\n `}}\n
\n \n
\n \n