CSS Flexbox Layout Instant Preview
This page provides an interactive form and preview of the flexbox layout CSS rules.
display: flex; rule will set a contained element into flexbox layout mode.
Because this example makes use of explicit width and height on the items
flow-shrink can not be seen well.
Suggestion 1: Use wrap.
Suggestion 2: Set item width (all) to 40, set justify-content to space-between.
Two Column Space-Between
#container: display: flex; flex-flow: flex-direction flex-wrap flex-direction: row | row-reverse | column | column-reverse flex-wrap: nowrap | wrap | wrap-reverse align-items: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] where <baseline-position> = [ first | last ]? baseline <overflow-position> = unsafe | safe <self-position> = center | start | end | self-start | self-end | flex-start | flex-end justify-content: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] where <content-distribution> = space-between | space-around | space-evenly | stretch <overflow-position> = unsafe | safe <content-position> = center | start | end | flex-start | flex-end .item: flex: flex-grow flex-shrink flex-basis default flex: 0 1 auto; flex-grow: how much of the remaining space in the flex container should be assigned to the item flex-shrink: If the size of all flex items is larger than the flex container, items shrink to fit according to this factor flex-basis: initial main size of a flex item (according to box-sizing) order: integer; careful! visual order - not logical or tab order, accessibility concerns Items in a container are sorted by ascending order value and then by their source code order