Photo by Growtika on Unsplash

What Exactly is a ‘display: flex’?

The “display: flex” is a CSS (Cascading Style Sheets) property that is used to control the layout and alignment of elements within a container. It’s part of a layout model called Flexbox, which is designed to make it easier to create complex and responsive layouts in web design.

Get Raina Saxena’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Imagine you have a box (which is called a container) that you want to fill with some smaller boxes (which are called items). The “display: flex” property is like a magical spell you can cast on the container to control how those smaller boxes arrange themselves inside the big box.

Horizontal or Vertical Layout

By default, “display: flex” arranges items in a row horizontally. However, you can change it to arrange items in a column vertically if you want.

.container {
  display: flex; /* This activates the flex layout */
  justify-content: center; /* Horizontally centers the items */
  align-items: center; /* Vertically centers the items */
  flex-direction: row; /* Default arrangement. Can also be "column" for vertical arrangement*/
}

Alignment

You can control how items align within the container, both horizontally and vertically. For example, you can center them, align them to the start or end, or distribute them evenly.

.container {
  display: flex; /* This activates the flex layout */
  align-items: center; /* Vertically centers the items */
}

Spacing

You can control the space between items, making them have equal or different amounts of space between them.

.container {
  display: flex; /* This activates the flex layout */
  gap:20px; /* Adds a gap of 20px between the elements*/
}