Flex Container#

To use Flexbox, you need a flex container. You can create a flex container by setting the display property to flex.

.container {
  display: flex;
}

Flex Items#

The direct children of a flex container are called flex items. These items will be arranged according to the flex container’s properties.

flex-direction#

The flex-direction property defines the direction in which the flex items are placed.

.container {
  flex-direction: row; /* Default */
  /* Other values: row-reverse, column, column-reverse */
}

justify-content#

The justify-content property aligns the flex items along the main axis.

.container {
  justify-content: flex-start; /* Default */
  /* Other values: flex-end, center, space-between, space-around, space-evenly */
}

align-items#

The align-items property aligns the flex items along the cross axis.

.container {
  align-items: stretch; /* Default */
  /* Other values: flex-start, flex-end, center, baseline */
}

flex-wrap#

The flex-wrap property controls whether the flex items should wrap or not.

.container {
  flex-wrap: nowrap; /* Default */
  /* Other values: wrap, wrap-reverse */
}

flex-grow#

The flex-grow property defines the ability of a flex item to grow if necessary.

.item {
  flex-grow: 1; /* Default is 0 */
}

flex-shrink#

The flex-shrink property defines the ability of a flex item to shrink if necessary.

.item {
  flex-shrink: 1; /* Default is 1 */
}

flex-basis#

The flex-basis property defines the initial size of a flex item.

.item {
  flex-basis: auto; /* Default */
  /* Other values: 0, 50%, 100px, etc. */
}

align-self#

The align-self property allows the default alignment to be overridden for individual flex items.

.item {
  align-self: auto; /* Default */
  /* Other values: flex-start, flex-end, center, baseline, stretch */
}