Learning Code

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...)
  

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-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 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

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 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

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:
  

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.

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.)

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

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

Values:

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