DEV Community

Cover image for CSS Flexbox: Layouts Made Easy
TheDevSpace
TheDevSpace

Posted on • Originally published at thedevspace.io

CSS Flexbox: Layouts Made Easy

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

The flexbox is another layout model in CSS that provides an efficient way to design and structure complex layouts, but with a more flexible approach. It is particularly suited for creating one-dimensional layouts, either in a row or a column, as we will see later.

Just like a grid layout, a flexbox layout also consists of a flex container and several flex items. The container should have its display property set to flex, and all of its direct children automatically become flex items.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container {
  display: flex;
  gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Flex direction

With a flex layout, instead of rows and columns, you must define a flex-direction and a flex-wrap. The flex-direction specifies in which direction the container should stack its flex items. The accepted values are:

  • column 
.container {
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

flex direction column

  • column-reverse 
.container {
  flex-direction: column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex direction column reverse

  • row 
.container {
  flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

flex direction row

  • row-reverse 
.container {
  flex-direction: row-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex direction row reverse

Flex wrap

The flex-wrap property determines whether the flex items should wrap, which means automatically change to the following line when there is insufficient space.

  • wrap 
.container {
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

flex wrap

  • nowrap 
.container {
  flex-wrap: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

flex nowrap

  • wrap-reverse 
.container {
  flex-wrap: wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex wrap reverse

The flex-flow is a shorthand for both flex-direction and flex-wrap properties.

.container {
  flex-flow: column wrap;
}
Enter fullscreen mode Exit fullscreen mode

flex flow

Read More

Follow us for daily coding tips:

🔹 TheDevSpace | LinkedIn
🔹 TheDevSpace | X
🔹 TheDevSpace | Threads

Top comments (0)