Understanding the Power of CSS Flexbox Layout: A Comprehensive Guide

CSS Flexbox Layout is a popular CSS layout method that lets web designers make responsive and flexible designs for their sites. Flexbox makes it simple to customize your website’s layout and modify it to fit the screen size of any device.

Everything you need to know about CSS Flexbox Layout will be covered in this book, including Flex container, Flex item, Flex direction, Flex wrap, Flex flow, and Align items, as well as content, self, and Flex basis. Let’s get going!

Flex Container

A parent element that holds one or more Flex items is known as a “Flex container.” By setting the Flex direction attribute, you can change how a Flex container normally works, which is to show its child elements in a row.

The example that follows demonstrates how to use HTML and CSS to create a Flex container. To construct the Flex container, use the display: flex; attribute.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
}

Demo:

See the Pen Flexbox Layout: Flex Container by w3tweaks (@w3tweaks) on CodePen.

Flex Item

A Flex container’s child element is a Flex item. A Flex item will occupy as much space as necessary by default because its Flex foundation is auto. To regulate the width of the Flex item, you can, however, set the Flex base attribute to a certain value.

The example that follows demonstrates how to make Flex elements with HTML and CSS. Each Flex item takes up the same amount of space thanks to the flex: 1; property.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
}

Demo:

See the Pen Flexbox Layout: Flex Container by w3tweaks (@w3tweaks) on CodePen.

Flex Direction

The Flex container’s direction is managed through the Flex direction attribute. The child elements are ordered in a row because the Flex orientation is by default set to a row. The child elements are arranged in a column when the Flex direction is set to column, though.

The HTML and CSS example that follows demonstrates how to set the Flex direction. To build a column layout, use the flex-direction: column; attribute.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-direction: column;
}

Demo:

See the Pen Flexbox Layout: Flex Item by w3tweaks (@w3tweaks) on CodePen.

Flex Wrap

Flex wrap determines whether or not the Flex items should be wrapped. The Flex wrap’s default setting is nowrap, which prevents the Flex elements from being wrapped. You can also configure the Flex wrap to wrap or wrap-reverse to wrap Flex items.

The HTML and CSS sample that follows demonstrates how to set the Flex wrap. The next row is wrapped around the Flex items using the flex-wrap: wrap; attribute.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
  <div class="flex-item">Flex item 4</div>
  <div class="flex-item">Flex item 5</div>
  <div class="flex-item">Flex item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}
.flex-item {
    background-color: rgba(0,0,255,.2);
    border: 3px solid #00f;
    margin: 10px;
    width: 60px;
}

Demo:

See the Pen Flexbox Layout: Flex Direction by w3tweaks (@w3tweaks) on CodePen.

Flex Flow

The Flex direction and Flex wrap attributes are combined into one shorthand property known as Flex flow. The Flex flow feature allows you to simultaneously set the direction and wrap properties.

The example that follows demonstrates how to use HTML and CSS to set the Flex flow. To build a column layout and wrap the Flex elements to the following row, use the flex-flow: column wrap; attribute.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
  <div class="flex-item">Flex item 4</div>
  <div class="flex-item">Flex item 5</div>
  <div class="flex-item">Flex item 6</div>
</div>

CSS:

.flex-container {
    display: flex;
    flex-flow: column wrap;
    border: 1px solid #c5c5c5;
    max-height: 300px;
}
.flex-item {
    background-color: rgba(0,0,255,.2);
    border: 3px solid #00f;
    width: 60px;
    margin: 10px;
}

Demo:

See the Pen Flexbox Layout: Flex Wrap by w3tweaks (@w3tweaks) on CodePen.

Align Items

The Align items property controls how the Flex items are lined up vertically inside the Flex container. The Flex items will stretch to fill the container because the Align items are by default set to stretch. The Align elements can also be adjusted to flex-start, flex-end, center, baseline, or align-content, though.

The example below demonstrates how to align Flex components with HTML and CSS. The things that align: The Flex components are vertically centered using the center; attribute.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
  align-items: center;
}

Demo:

See the Pen Flexbox Layout: Align Content by w3tweaks (@w3tweaks) on CodePen.

Align Content

The Align content property controls how the Flex items are lined up vertically in the Flex container when there is extra space. The default setting for Align content is Stretching, which makes the Flex elements grow to fill the container. But you can also choose from the following options for the Align content: center, space-between, space-around, or stretch.

The example that follows demonstrates how to align content with HTML and CSS. The Flex container’s Flex components are uniformly spaced using the align-content: space-around; attribute.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
  <div class="flex-item">Flex item 4</div>
  <div class="flex-item">Flex item 5</div>
  <div class="flex-item">Flex item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 400px;
  width: 600px;
}
.flex-item {
    padding: 20px;
    border: 2px solid rgb(96, 139, 168);
    border-radius: 5px;
    background-color: rgba(96, 139, 168, .2);
    flex: 1 1 100px;
}

Demo:

See the Pen Flexbox Layout: Flex Flow by w3tweaks (@w3tweaks) on CodePen.

Align Self

The Align self attribute controls how one Flex item is lined up vertically in a Flex container. Since the Align self property’s default setting is auto, the Flex item will take on the value of the Align item’s property. The Align self-setting, however, can also be changed to flex-start, flex-end, center, baseline, or stretch.

The HTML and CSS sample that follows demonstrates how to align a single Flex component. To align oneself: To position the second Flex item to the bottom of the Flex container, use the flex-end; attribute.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item align-self-end">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
  width: 300px;
  height: 200px;
  border: 2px solid #000
}

.flex-item {
  border: 2px solid #aaa
}

.align-self-end {
  align-self: flex-end;
}

Demo:

See the Pen Flexbox Layout: Align Content by w3tweaks (@w3tweaks) on CodePen.

Flex Basis

The initial size of a Flex item is determined by the Flex base attribute. The size of the Flex item is decided by its content because the Flex basis is by default set to auto. You can also set the Flex basis to a certain value to change the width of the Flex item. The value may be given in percentages, ems, or pixels.

The example that follows demonstrates how to use HTML and CSS to set the default size of a Flex item The initial width of the first Flex item is set to 100 pixels using the flex-basis: 100px; parameter.

HTML:

<div class="flex-container">
  <div class="flex-item basis-100">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
  <div class="flex-item">Flex item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
}

.basis-100 {
  flex-basis: 100px;
}

Demo:

See the Pen Flexbox Layout: Align Self by w3tweaks (@w3tweaks) on CodePen.

Flex Grow

The Flex grow feature decides how much a Flex item should grow to fill the available space. The Flex item won’t grow because the default setting for the Flex grow is zero, or 0. To enable the Flex item to expand, you can also set the Flex grow to a positive amount.

The example that follows demonstrates how to use HTML and CSS to make a Flex item grow. The second Flex item is made to fill the empty space by using the flex-grow: 1; parameter.

HTML:

<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item grow-1">Flex item 2</div>
</div>

CSS:

.flex-container {
  display: flex;
}

.grow-1 {
  flex-grow: 1;
}

Demo:

See the Pen Flexbox Layout: Flex Basis by w3tweaks (@w3tweaks) on CodePen.

How can Flexbox Layout help in responsive design?

Flexbox Layout is a powerful tool that can help you make responsive designs for your website. Flexbox layout can aid responsive design in the following ways:

FAQs

Conclusion

CSS Flexbox Layout is a powerful tool for making layouts for your website that are responsive and can be changed. You may fully utilize the flexibility of Flexbox Layout if you are aware of the characteristics of the Flex container, Flex item, Flex direction, Flex wrap, Flex flow, Align items, Align content, Align self, Flex basis, Flex grow, and flexbox card layout. The flexbox layout allows you to create beautiful, functional websites that look great on all devices.