Skip to main content

Understanding Flexbox in CSS Positioning (Live Playground)

Flexbox is a modern CSS layout module that provides an efficient way to create flexible and responsive layouts. In this tutorial, you will learn about the Flexbox layout module, its properties, and how to use them to create flexible layouts, along with sample code and simple explanations.

Flex container​

To create a flex container, you need to set the display property of an element to flex or inline-flex. This allows you to control the layout of its child elements using Flexbox properties.

Example:

CSS
.flex-container {
  display: flex;
}
HTML
<div class="flex-container">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

In this example, a flex container is created, and its child elements are arranged in a row by default.

Live Playground, Try it Yourself

Flex direction​

The flex-direction property controls the direction of the main axis in the flex container. It can have the values row, row-reverse, column, or column-reverse.

Example:

CSS
.column {
  display: flex;
  flex-direction: column;
}
HTML
<div class="column">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

In this example, the flex-direction property is set to column, and the child elements are arranged in a column.

Live Playground, Try it Yourself

Justify content​

The justify-content property is used to align flex items along the main axis. It can have the values flex-start, flex-end, center, space-between, space-around, or space-evenly.

Example:

CSS
.space-between {
  display: flex;
  justify-content: space-between;
}
HTML
<div class="space-between">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

In this example, the justify-content property is set to space-between, and the child elements are evenly spaced along the main axis with equal space between them.

Live Playground, Try it Yourself

Align items​

The align-items property is used to align flex items along the cross axis. It can have the values stretch, flex-start, flex-end, center, or baseline.

Example:

CSS
.align-center {
  display: flex;
  align-items: center;
}
HTML
<div class="align-center">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

In this example, the align-items property is set to center, and the child elements are centered along the cross axis.

Live Playground, Try it Yourself

Flex-wrap​

The flex-wrap property is used to specify whether flex items should wrap onto multiple lines or not. It can have the values nowrap, wrap, or wrap-reverse.

Example:

CSS
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
HTML
<div class="flex-wrap">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

In this example, the flex-wrap property is set to wrap, allowing the flex items to wrap onto multiple lines when there isn't enough space on the main axis.

Live Playground, Try it Yourself

Flex shorthand​

The flex property is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties of a flex item. It helps you define the flexibility of flex items in a more concise manner.

Example:

CSS
.flex-item {
  flex: 1 1 auto;
}

In this example, the flex property is set to 1 1 auto, which means the flex item can grow and shrink proportionally to the available space, and its initial size is determined by the auto value.

Live Playground, Try it Yourself

Conclusion​

By mastering Flexbox and its properties, you can create dynamic and responsive layouts for your web pages with ease. Flexbox offers a more efficient and modern approach to positioning elements, especially when compared to traditional CSS positioning techniques like floats and clearfix.