To generate a flex container, we set the display property of an element to either flex or inline-flex.

  • flex – creates a block-level flex container.
  • inline-flex – creates an inline-level flex container.

The direct descendants of the flex container are called flex items. The following image will further help you familiarize with the terms we will need to easily discuss the most common uses of the flexbox layout.

[Sketched using Excalidraw]

  • Main axis – runs in the direction that the flex items are laid out. The start and end of the main axis are called the main start and main end respectively.
  • Cross axis – runs in the perpendicular direction of the main axis. The start and end of the cross axis are called cross start and cross end respectively.

Use flex-direction to set the direction of the main axis.

  • row – main axis runs along the inline direction. If you work with a language written from left to right, main start is on the left.
  • row-reverse – same as row, but main start and main end are swapped.
  • column – main axis runs along the block direction.
  • column-reverse – same as column, but main start and main end are swapped.

Use flex-wrap to specify wrapping behavior of flex items inside the container.

  • nowrap – the items will stack along a single line. Will overflow if they are not set to shrink or they can’t shrink anymore due to the content inside.
  • wrap – items will wrap inside the container onto multiple lines.

You can use flex-flow as a short hand to set both flex-direction and flex-wrap at once.

  • justify-content – used to align items on the main axis, that is, the direction that you set using flex-direction.
  • flex-start – items will line up against the main start edge of the container.
  • flex-end – items will line up against the main end.
  • center – items will line up at the center of the container.
  • space-between – first and last items will be pushed to both edges and all the items will have an equal amount of space between each other.
  • space-around – same as space-between, but items will have the same amount of space on either side of them, except for the first and last items, which will have half that size of space between them and the nearest edge of the container.
  • space-evenly – same as space-around, but the first and last items will have the same space between them and the nearest edge that they have between them and the nearest item.

With align-items, you can align the items along the cross axis, that is, the direction perpendicular to the main axis.

  • stretch – items stretch across the cross axis.
  • flex-start, flex-end and center – works the same way they do when it comes main axis.
  • align-content – when items wrap onto multiple lines, align-content sets the alignment of those lines inside the container. align-content can be set with the same values that justify-content accepts.

Flex items also have their own properties that can be used to control their behavior inside a flex container.

  • align-self — controls alignment of an individual flex items across the cross axis. So, align-items takes the same set of values that align-items accepts.
  • order – helps changing the order of individual flex items without affecting the source order. By default, all items have an order value of 0, so flex items with higher value will move towards the main/cross end of the container. Similarly, negative values will move items towards to the main/cross start of the container, that is, they will appear before the items with the default order value of 0.

We can also take control of individual items by how they take up positive space or shrink to fit when their is negative space along the main axis.

  • flex-basis – basically the size of a flex item. If this is not set to auto, the main size of the flex item is used as flex basis. This is the value an item uses as the base value to grow and shrink from.
  • flex-grow – according to the given value, an item with the flex-grow property specified, grows to fill any available space.
  • flex-shrink – according to the given value, an item with flex-shrink specified will basically become smaller than the size specified by flex-basis, until all the items fit properly along the main axis.

Usually the three properties above are used combined into the shorthand property flex in the order flex-grow, flex-shrink and flex-basis.

While we are at it, it is also useful to be aware of the following predefined shorthand values which cover most of the use cases for flex.

  • flex: initial – same as flex: 0 1 auto. Item wouldn’t grow and would only shrink. Initial size is the main size or content size.
  • flex: auto – same as flex: 1 1 auto. Item is allowed to both grow or shrink.
  • flex: none – same as flex: 0 0 auto. Item cannot grow nor shrink.
  • flex: <positive-number> – equivalent to setting the same number for both flex-grow and flex-shrink with 0 for flex-basis.
    .container{
      display: flex;
      flex-direction: ;
      flex-wrap: ;
      justify-content: ;
      align-items: ;
      align-content: ;
    }
    .second-child{
      order: ;
      align-self: ;
      flex:    %;
    }

1

2
(This item contains extra content.)

3