CSS Flexbox: Properties of the Parent Container

In the previous article on CSS Flexbox: Basics, we introduced the Flexbox layout, and we got to understand its importance to modern web development and its bring a lot of flexibility and CSS semantic richness.

Let’s draw our focus to the parent container, which usually looks like this:

The parent has a bunch of properties, we will carefully consider each one.

display

This creates a flex container, its the very property you need to set to switch on the flex layout system. Usually we set this to either inline or block, but now setting it to flex also activates flex behaviour to all children DOM elements.

.container {
  display: flex;
}

flex-direction

To set the main or cross axis, which also determines the direction in which flex items will be placed, we need to define the flex-direction property. Flex layout follows a single-direction layout system.

.container {
   flex-direction: row | row-reverse | column | column-reverse
}

flex-wrap

Its important to note that flex items will be placed as much as possible to fit onto one line, to change this behaviour, so that the items wrap, you can set the the flex-wrap property.

.container {
   flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow

As is the norm in CSS to find shorthand notations, the flex-flow is a shorthand for the flex-direction and flex-wrap properties, which fundamentally configure the container’s main and cross axes. Its default value is row nowrap.

.container {
   flex-flow: column wrap;
}

justify-content

This property is responsible for the distribution and alignment along the main axis, it controls how leftover space is distributed around items and also mitigates when items overflow.

.container {
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

The two extra keywords: safe and unsafe add extra control. Using safe makes sure that that however you do this type of positioning, you don’t push an element such that it renders off-screen preventing the content to be scrolled to.

align-items

This property is responsible for determining how flex items are laid out on the cross axis.

.container {
   align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

align-content

This property distributes the space around flex items on the cross axis, it is only visible when you have a multi-line flex container, where flex-wrap is set to either wrap or wrap-reverse.

.container {
   align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

gap, row-gap, column-gap

The gap property is responsible for the space separating flex items, specifically only the spacing between items and not on the edges.

.container {
  display: flex;
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Also gap is not only used by flexbox, it is also used in other layouts like the grid and multicolumn layout.