CSS Flexbox Layout Instant Preview

This page provides an interactive form and preview of the flexbox layout CSS rules.

The CSS 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.

Form

Preview

Examples

Two Column Space-Between

CSS Rules

#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