Creating a Flexbox Layout Using CSS

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.

1<div class="container">
2  <div class="item">1</div>
3  <div class="item">2</div>
4  <div class="item">3</div>
5  <div class="item">4</div>
6  <div class="item">5</div>
7  <div class="item">6</div>
8</div>

1.container {
2  display: flex;
3  gap: 10px;
4}

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

1.container {
2  flex-direction: column;
3}

• column-reverse

1.container {
2  flex-direction: column-reverse;
3}

• row

1.container {
2  flex-direction: row;
3}

• row-reverse

1.container {
2  flex-direction: row-reverse;
3}

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

1.container {
2  flex-wrap: wrap;
3}

• nowrap

1.container {
2  flex-wrap: nowrap;
3}

• wrap-reverse

1.container {
2  flex-wrap: wrap-reverse;
3}

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

1.container {
2  flex-flow: column wrap;
3}