Flexbox examples

View github repository

Container properties:

  • display: flex; flex | inline-flex
  • flex-wrap: wrap; nowrap | wrap | wrap-reverse
  • justify-content: center; flex-start | flex-end | center | space-between | space-around
  • align-items: flex-start; auto | flex-start | flex-end | center | baseline | stretch
    Defines how flex items are laid out along the cross-axis. You can think of it as the justify-content version for the cross-axis.
  • align-content: stretch; flex-start | flex-end | center | space-between | space-around | stretch
    Aligning a flex container's lines within it when there is extra space in the cross-axis.

Item properties:

  • flex:1 0 auto; flex-grow | flex-shrink | flex-basis
    Flex grow: dictates what amount of the available space inside the flex container the item should take up.
    Flex-shrink: determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
    Flex-basis: specifies the initial size of the flex item, before any available space is distributed according to the flex factors.
  • order: 0; 0 | 1 | 2 ...
  • align-self: auto; auto | flex-start | flex-end | center | baseline | stretch
    makes possible to override the align-items value for specific flex items.

Example 1

display: flex;

flex: 1 0 auto;
flex: 1 0 auto;
flex: 1 0 auto;
flex: 1 0 auto;

Example 2

display: flex;

flex: 0 0 50%;
flex: 1 0 auto;
flex: 1 0 auto;
flex: 1 0 auto;

Example 3

display: flex;
flex-wrap: wrap;

flex: 1 1 20%;
flex: 1 1 20%;
flex: 1 1 20%;
flex: 1 1 20%;
flex: 1 1 20%;
flex: 1 1 20%;
flex: 1 1 20%;
flex: 1 1 20%;

Example 4

display: flex;
justify-content: center;

flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;

Example 5

display: flex;
justify-content: space-between;

flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;
flex: 0 0 auto;

Example 6

display: flex;
align-items: flex-start;

flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Example 7

display: flex;
align-items: stretch;

flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Example 8

display: flex;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;

flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
flex: 1 0 auto;
<br>
<br>
flex: 1 0 auto;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Example 9

display: flex;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;

flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
flex: 1 1 20%;
<br>
<br>
flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
flex: 1 1 20%;
<br>
<br>
flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
flex: 1 1 20%;
<br>
<br>
flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
flex: 1 1 20%;
<br>
<br>
flex: 1 1 20%;
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Fork me on GitHub