CSS – 04 Flexbox
With just a few lines of code. The display blocks can load as Flex Blocks with a Flex-Direction.
When setting the parent element for Flexbox to display: flex.
The children elements will automatically align left-to-right.
With one line of code (flex-direction: column;) the child content now loads in columns (and not a row).
Flex-Direction = Row-Reverse
Using Flex-Direction to Row-Reverse the order the row content loads.
Flex-Direction = Column Reverse
Using Flex-Direction to Column-Reverse the order the Column content loads.
Flex-Direction = Justify Content
Maybe one of the most popular uses for Flex Direction. Justify Content to evenly load, or center, or set to the right or left. The Justify Content is a power layout tool.
Flex-Direction = Fix Align Items
Using the Cross Axis (top to bottom). The Fix Align Items is a powerful way to justify content and align items together.
- flex-start
- flex-end
- center
- baseline
- stretch (height must be set to auto).
Flex-Direction = Align Self
Align-self allows the alignment of a single item to be targeted and changed.
Flex Wrap
Flex Wrap works to fit all elements in one row. Unless the Flex Wrap property is adjusted by the following.
flex-wrap: nowrap
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
flex-wrap: wrap
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
flex-wrap: wrap-reverse
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Flex Flow
Flex flow combines to use of flex-direction and flex-wrap into the Flex Flow property.
- flex-flow: column wrap
Align Content with Flexbox
Align Content only impacts content on the cross axis that is more than one line long using the following options.
- align-content: flex-start
- align-content: flex-end
- align-content: center
- align-content: space-between
- align-content: space-around
- align-content: stretch
Vertically Centering with Flexbox
.parent {display:flex; align-items: center;}
