CSS

Flex

It is used to fit the item in the space available in the flex container.

#flex-container {
  display: flex;
  font-family: Consolas, Arial, sans-serif;
}

flex-basis: sets the initial main size of a flex item.

flex-grow: it assigns the space to the item.

flex-shrink: it shrinks the item.

Flex Shorthand

flex-grow | flex-shrink | flex-basis

flex: 2 2 100px
flex-grow | flex-basis

flex: 2 100px
flex-grow(unitless)

flex: 2
flex-basis

flex: 100px

Flexbox

It is a one-dimensional layout method for arranging items in rows or columns.

It is used to make webpages responsive.

Flexbox directions

It sets how flex items are placed in the flex container, along which axis and direction.

flexbox-direction: row; main axis, left to right
flexbox-direction: row-reverse; main axis, right to left
flexbox-direction: column; cross axis, top to bottom
flexbox-direction: column-reverse; cross axis, bottom to left

Flex Wrap

Sets whether flex items are forced onto one line or can wrap onto multiple lines.

flex-wrap: nowrap items are laid out in a single line.
flex-wrap: wrap items break into multiple lines.
flex-wrap: wrap-reverse same as wrap in reverse.

Alignment

Justify content

Tells how the browser distributes spaces between and around content items along the main axis.

justify-content: flex-start;

items are flushed to start of the container
justify-content: flex-end;

items are flushed to the end of the container
justify-content: centre;

items are flushed to the centre of the container
justify-content: space-between;

items are evenly distributed within the alignment container along the main axis
justify-content:: space around;

items are evenly distributed within the alignment container along the main axis.

justify-content: space evenly;

items are evenly distributed within the alignment container along the main axis.

#container {
  display: flex;
  justify-content: space-between; /* Can be changed in the live sample */
}

Align Content

It sets the distribution of space between and around content items along a flexbox's cross-axis. It is used for groups.

align-content: flex-start/flex-end/center.
align-content: space-between/space-around/evenly.

align-content: baseline.

  #container {
    height: 200px;
    width: 240px;
    align-content: center; /* Can be changed in the live sample */
    background-color: #8c8c8c;
  }

Align items

Distributes items along the cross-axis.

align-items: flex-start;

flex items are flushed with the cross-start edge of the line.
align-items: flex-end;

flex items are flushed with the cross-end edge of the line.
align-items: center;

flex items' margin boxes are centred within the line on the cross-axis.
align-items: baseline;

All flex items are aligned such that their flex container baselines align.

#container {
  height: 200px;
  width: 240px;
  align-items: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

Align Self

Align an item along the cross-axis.It is used for individuals.

align-self: flex-start;
align-self: flex-end;
align-self: center;

align-self: baseline;

  section {
    display: flex;
    align-items: center;
    height: 120px;
    background: beige;
  }

Align self > Align items

CSS : Flex, Flexbox and Alignment

Table of contents