FLEXBOX

The main idea behind the flex layout is to give the container the ability to alter its items’ with/height and order the best fill the space. One important thing is that flexbox is direction agnostic. This capability is really useful in responsive layout.

Flexbox allows to:

  • vertical centering a block of content inside its parent
  • Making all the children of a container take up equal size
  • Making all columns (in a multiple-column layout) adopt the same height (same as the previous item)

Basic concepts

There are two axes. The main and the cross. The main axis is defined with flex-direction property and the cross runs perpendicular

Properties

Default values

  • Items display in a row (the flex-direction property’s default is row).
  • The items start from the start edge of the main axis.
  • The items do not stretch on the main dimension, but can shrink.
  • The items will stretch to fill the size of the cross axis.
  • The flex-basisi property is set to auto.
  • The flex-wrap property is set to nowrap.

flex-direction

Define the direction in which the elements will be positioned. Can be:

  • row: The main axis is horizontal. All items will be position at the right of the previous element
  • row-reverse: Same as row bud in sort reversed
  • column: The main axis is vertical. The children elements will tend to take up all the horizontal space
  • column-reverse: Same as column bud in sort reversed

flex-wrap

Flexbox is one dimensional model. Its mean, if the content not fit into the parent, they will overflow the container. To prevent it, we can use flex-wrap. With this property set to wrap, if the items are too large to all display in one line, they will wrap onto another line

flex-flow

This property combine the flex-direction and flex-wrap properties. The first value is flex-direction and the second one is flex-wrap

align-items

This property align items in the cross axis. The default value is stretch. The values allowed are:

  • stretch: stretch all space available
  • flex-start: line up at the start
  • flex-end: to align items to the end
  • center: center elements in the cross axis
  • baseline: aligns the flex items such as their baselines

justify-content

Same as the align-item property bud in the main axis. The initial value is flex-start. The values allowed are:

  • flex-start: aligns the flex items at the beginning of the container
  • flex-end: aligns the flex items at the end of the container
  • center: aligns the flex items at the center of the container.
  • space-around: displays the flex items with space before, between, and after the items
  • space-between: displays the flex items with space between the items