Learning Code

Flexbox

Flexbox is a CSS "container" that allows you to more easily make a page responsive by giving you more control over how the box's content reacts to the size of the screen/page.

Flex Parent Properties

The flex parent is the containing element that often holds other (child) elements.

Display

For any of the other flex properties to work, having the display property set to flex is required. This is written as: display: -webkit-flex; display:flex;

Other Parent Properties:

flex-direction

Flex-direction determines whether your child elements are arranged horizontally or vertically. This is like rows vs columns in a table. You have to choose 1 direction over the other. Flex direction can also control the order of the child elements.

Syntax: main {-webkit-flex-direction: row-reverse; flex-direction: row-reverse;}

The values:
  • row: this places your child elements in a horizontal row
  • row-reverse: this places your child elements in a horizontal row but reverses the order of any child elements (the last child element in the html will be on the left and so on...)
  • column: this places your child elements in a vertical column
  • column-reverse: this places your child elements in a vertical column and reverses the order of the children elements (the last child element in the html will be on the top and so on...)

flex-wrap

Using flex-wrap stops child elements from all staying in the same row if there is not enough room horizontally. If there is not enough room, a child element will move down to the next row. If you do not use the flex-wrap property, the default behaviour is to keep all the child elements in the same row.

Syntax: main {-webkit-flex-wrap: nowrap; flex-wrap: nowrap;}

The values:
  • wrap: child elements "wrap" downwards to form new rows when there is not enough room horizontally
  • nowrap: the child elements stay in a single row/line (if necessary, the width of each child element will shrink to fit inside of the parent)
  • wrap-reverse: child elements "wrap" upwards to form new rows when there is not enough room horizontally

flex-flow

Flex-direction and flex-wrap can be combined into this single property.

Syntax: main {-webkit-flex-flow: row-reverse nowrap; flex-flow: row-reverse nowrap;}

The values:

The values are the same as flex-direction and flex-flow. Just place the value for flex-direction first, leave a space inbetween, then have the value for flex-wrap last.

align-content

Align-content controls the vertical alignment/spacing of any rows that are wrapping.

Syntax: main {-webkit-align-content: flex-start; align-content: flex-start;}

Values:
  • center: this centers your rows vertically
    123456
  • flex-start: this aligns your rows to the top
    123456
  • flex-end: this aligns your rows to the bottom
    123456
  • stretch: this will stretch each row to fill any vertical space
    123456
  • space-between: this sets an equal amount of vertical space between each row
    123456
  • space-around: this creates an equal amount of vertical space on both the top and bottom of each row
    123456

justify-content

In a row, justify-content allows you to control the horizontal spacing between the children elements if there is extra room. In a column, justify-content allows you to control the vertical spacing between the children elements if there is extra room

Syntax: main {-webkit-justify-content: center; justify-content: center;}

The values:
  • center: this centers your child elements horizontally(row) or vertically(column)
    123
    123
  • flex-start: this aligns your child elements to the left(row) or top(column)
    123
    123
  • flex-end: this aligns your child elements to the right(row) or bottom(column)
    123
    123
  • space-between: this places an equal amount of space either horizontally(row) or vertically(column) between each child element, to fill any extra space
    123
    123
  • space-around: this places an equal amount of space on each side horizontally(row) or vertically(column) of every child element to fill any extra space (visually this creates smaller margins on the outside)
    123
    123

align-items

Align-items deals with the placement of child elements along the vertical axis(row) or horizontal axis(column).

Syntax: main {-webkit-align-items: stretch; align-items: stretch;}

Values:
  • center: this centers your child elements vertically(row) or horizontally(column)
    123
    123
  • flex-start: this aligns your child elements to the top(row) or left(column)
    123
    123
  • flex-end: this aligns your child elements to the bottom(row) or right(column)
    123
    123
  • stretch: this will stretch a child element to fill any vertical(row) or horizontal(column) space (setting a width or height to the child element may override stretch)
    123
    123
  • baseline: this sets the alignment to the baseline of the element (sometimes this will look like flex-start)
    123
    123

Flex Child Properties

flex-grow

Flex-grow determines how any extra space in the parent element will be filled by any child elements. Rows can grow vertically and columns can grow horizontally.

If every child element has a flex-grow value of 1, each child element will stretch to fill the remaining space. If only one child element is set with a flex-grow value, that child element is the only element that will stretch to fill the remaining space.

Values

Values can be numeric (ie. 0,1,2...), initial, or inherit. The default is 0.

Syntax: main {-webkit-flex-grow: 2; flex-grow: 2;}

  • Only the 3rd child has a flex-grow value:
  • The 2nd child has a flex-grow value of 2 and the 3rd child still has a flex-grow value of 1:
  • Each child element has a flex-grow value of 1:

flex-shrink

If there is not enough space, flex-shrink determines how much each child element will shrink.

Syntax: aside {-webkit-flex-shrink: 1; flex-shrink: 1;}

Values

Values can be numeric (ie. 0,1,2...), initial, or inherit. The default is 0.

flex-basis

Flex-basis sets an initial width for flex children in a column or an initial height for flex children in a row.

Sometimes this is used to control how many child elements fit in a row.

In Action:
#left {-webkit-flex-basis: 70%; flex-basis: 70%;}
#right {-webkit-flex-basis: 30%; flex-basis: 30%;}

Values:
  • Auto (the default)
  • Inherit
  • Initial
  • Numeric (px, % or etc.)

flex

Flex is a shorthand property that compbines flex-grow, flex-shrink and flex-basis (in that specific order).

Syntax: main {-webkit-flex: 1 0 auto; flex: 1 0 auto;}

align-self

This allows a child element to adjust it's alignment individually and can override alignment set on the parent element. This sets the vertical alignment for children in a row and horizontal alignment for children in a column.

In Action: p {-webkit-align-self: center; align-self: center;}

Values:
  • Auto (the default)
  • Inherit
  • Initial
  • Stretch
  • Flex-start
  • Flex-end
  • Baseline
  • Center

Can you use the Try-it Editor to try out these concepts?