Flexbox

Components specify the layout of their children using the flexbox algorithm. Using flexbox lets you specify a layout that expands or shrinks to fill screens of various dimensions. You can seamlessly mix and match these automatic layouts with fixed sizes like width: 100.

To choose the right layout for a component's children, you must make 3 choices:

PropertyDefaultOptionsDescription
flexDirectioncolumnrow, columnDo you want a vertical (column) or horizontal (row) layout? This choice determines the orientation of the primary axis of your layout.
justifyContentflex-startflex-start, center, flex-end, space-around, space-betweenHow should the content be distributed along the primary axis of your layout? Should it be at the start, the center, the end, or spaced evenly?
alignItemsstretchflex-start, center, flex-end, stretchHow should the content be aligned along the secondary axis of your layout? (If the primary axis is row, then the secondary axis is column, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill?

The following example lets you try all the possible combinations of flexbox properties and layouts.

Flexbox

Components specify the layout of their children using the flexbox algorithm. Using flexbox lets you specify a layout that expands or shrinks to fill screens of various dimensions. You can seamlessly mix and match these automatic layouts with fixed sizes like width: 100.

To choose the right layout for a component's children, you must make 3 choices:

PropertyDefaultOptionsDescription
flexDirectioncolumnrow, columnDo you want a vertical (column) or horizontal (row) layout? This choice determines the orientation of the primary axis of your layout.
justifyContentflex-startflex-start, center, flex-end, space-around, space-betweenHow should the content be distributed along the primary axis of your layout? Should it be at the start, the center, the end, or spaced evenly?
alignItemsstretchflex-start, center, flex-end, stretchHow should the content be aligned along the secondary axis of your layout? (If the primary axis is row, then the secondary axis is column, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill?

The following example lets you try all the possible combinations of flexbox properties and layouts.