Flex

Back

Terminology

  • Container: Parent containing the items
  • Item: Element inside the flex container
  • Main Axis: Axis along which items are laid
  • Cross Axis: Axis perpendicular to the main axis

Properties

Container

Row

Note: The default flex direction is row

<div class="container" style="display: flex">
  …
</div>
Item1
Item2
Item3

Column

<div class="container" style="display: flex; flex-direction: column;">
  …
</div>
Item1
Item2
Item3

Wrap

<div class="container" style="display: flex; flex-wrap: wrap;">
  …
</div>
Item1
Item2
Item3

Main Axis Alignment

Justify Content

space-between

<div class="container" style="display: flex; justify-content: space-between;">
  …
</div>
Item1
Item2
Item3

space-around

<div class="container" style="display: flex; justify-content: space-around;">
  …
</div>

Align Items

Align items is to align items along the cross-axis in the parent container

Note: It is mostly better to ensure that the items are of same height

Baseline

<div class="container" style="display: flex; align-items: baseline;">
  …
</div>
Item1
Item2
Item3

Stretch

<div class="container" style="display: flex; align-items: stretch;">
  …
</div>
Item1
Item2
Item3

Cross Axis Alignment

Align Content

space-around

<div class="container" style="display: flex; flex-wrap: wrap; align-content: space-around">
  …
</div>
Item1
Item2
Item3

Items

Align Self

This can be used to override the value set for align-items for an individual item

<div class="container" style="display: flex; flex-direction: column;">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item" style="align-self: flex-end">Item3</div>
</div>
Item1
Item2
Item3

References