Flexbox

 

Container
display: flex;
flex-direction: row; | column | column-reverse | row-reverse
flex-wrap: nowrap; | wrap | wrap-reverse
flex-flow: row nowrap; shorthand to set flex-direction & flex-wrap properties together
justify-content: flex-start; | flex-end | center | space-between | space-around | space-evenly
align-items: flex-start; | flex-end | center | baseline | stretch
align-content: flex-start; | flex-end | center | space-between | space-around | stretch

 

Children
order: <integer>; default: 0
flex-grow: <number>; default: 0     proportional spacing value
flex-shrink: <number>; default: 1
flex-basis: <length>; | auto     default: auto
flex: 0 1 auto;

| none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 2nd & 3rd optional

 

shorthand for flex-grow, flex-shrink and flex-basis combined.

align-self: auto; | flex-start | flex-end | center | baseline | stretch;

 

 

*float, clear and vertical-align have no effect on a flex item.

display: flex;

1. Container display must be set to flex

 

display:-webkit-flex;

display: -ms-flexbox;

display: flex;

 

 

 

Parent Container

Child flex item 1
Child flex item 2
Child flex item 3
Child flex item 4
Child flex item 5
Child flex item 6

flex-direction: row;

Defines the direction of flex items within the flex container:

 

flex-direction: row;

 

Parameters: row (default) | row-reverse | column | column-reverse

 

 

 

 

flex-direction: row-reverse;

 

 

flex-direction: column;

flex-direction: column-reverse;

flex-wrap: nowrap;

Default is nowrap and all items will try to fit onto one line.

 

flex-wrap: nowrap | wrap | wrap-reverse;

 

  • wrap - items will wrap onto multiple lines from top to bottom.
  • wrap-reverse - items will wrap onto multiple lines from bottom to top.

justify-content: flex-start;

Defines alignment along the main axis

 

.container {

    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

}

 

 

  • flex-start (default): items are packed toward the start line
  • flex-end: items are packed toward to end line
  • center: items are centered along the line
  • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
  • space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
  • space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

align-items: stretch;

Defines how flex items are laid out along the cross axis on the current line

 

.container {

  align-items: flex-start | flex-end | center | baseline | stretch;

}

 

 

  • flex-start: cross-start margin edge of the items is placed on the cross-start line
  • flex-end: cross-end margin edge of the items is placed on the cross-end line
  • center: items are centered in the cross-axis
  • baseline: items are aligned such as their baselines align
  • stretch (default): stretch to fill the container (still respect min-width/max-width)

align-content: stretch;

Aligns a flex containers lines within when there is extra space in the cross-axis

 

.container {

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

 

 

  • flex-start: lines packed to the start of the container
  • flex-end: lines packed to the end of the container
  • center: lines packed to the center of the container
  • space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
  • space-around: lines evenly distributed with equal space around each line
  • stretch (default): lines stretch to take up the remaining space

order: 0;

Controls the order flex items (descendants of the parent container) are laid out in the flex container.

 

.item {
order: 0;
}

 

default: 0

 

flex-grow

Defines the ability for a flex item to grow, if necessary.

 

.item {

  flex-grow: <number>; /* default 0 */

}

 

 

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

flex-shrink: 1;

Defines the ability for a flex item to shrink, if necessary

 

.item {

  flex-shrink: <number>; /* default 1 */

}

flex-basis:

Defines the default size of an element before the remaining space is distributed.

 

The value can be a length (e.g. 20%, 5rem, etc.) or 'auto' (which means "look at my width or height property").

 

If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value.

 

 

.item {

  flex-basis: <length> | auto; /* default auto */

}

 

 

flex: 0 1 auto;

Shorthand for flex-grow, flex-shrink and flex-basis combined.

The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

 

.item {

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

}

 

*default: 0 1 auto.

 

Recommended that this shorthand property is used rather than setting the individual properties.

align-self:

Allows the default alignment to be overridden for individuals flex items

 

.item {

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

 

 

 

*Note that float, clear and vertical-align have no effect on a flex item.

Holy Grail layout

Responsive Holy Grail layout with main elements in a flex container and it's contained elements growing as required. Footer resultingly either stays at bottom of viewport or scrolls to bottom of viewport if content is greater than viewport height:

 

 

style.css

 

Rendered view:

Simple layout

My version of the Holy Grail layout with just one centred column for the content and full width header and footer, but with all content containers width set and centralised:

 

*note: this example has been exaggerated to emphasise the layout, in particular line 6 'flex: 0 0 10em' has the 3rd (flex-basis) parameter set to 10em (instead of 'auto') to show the containing elements for the header & footer. Remember: flex is shorthand for flex-grow, flex-shrink and flex-basis combined.