How to use CSS Flexbox

CSS Flexbox (Flexible Box Layout) is a module of CSS that provides a more efficient way to lay out, align, and distribute elements within a container. It allows you to create flexible and responsive layouts without having to rely on floats or positioning. With Flexbox, you can easily control the alignment, direction, order, and size of elements within a container.

Flexbox works by defining a flex container and placing flex items inside it. The flex container is defined using the display property set to flex or inline-flex. The flex items are the children of the flex container and are laid out along the main axis and cross axis of the flex container.

Flexbox provides a number of properties that allow you to control the layout of the flex container and the flex items. Here are some of the main properties:

• flex-direction: Specifies the direction of the main axis. It can be set to row (default), row-reverse, column, or column-reverse.
• flex-wrap: Specifies whether the flex items should wrap or not when they exceed the width of the flex container. It can be set to nowrap (default), wrap, or wrap-reverse.
• justify-content: Specifies how the flex items should be aligned along the main axis. It can be set to flex-start (default), flex-end, center, space-between, space-around, or space-evenly.
• align-items: Specifies how the flex items should be aligned along the cross axis. It can be set to stretch (default), flex-start, flex-end, center, or baseline.
• align-content: Specifies how the flex lines should be aligned along the cross axis if there are multiple lines of flex items. It can be set to stretch (default), flex-start, flex-end, center, space-between, space-around, or space-evenly.
• flex: Specifies the amount of space the flex item should take up relative to the other flex items. It is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

Using Flexbox, you can create a wide range of layouts, from simple one-dimensional layouts to more complex two-dimensional layouts. It is widely supported in modern browsers and is a powerful tool for building responsive and flexible web designs.

Few examples of CSS Flexbox

Example 1: Basic Flexbox Layout

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

This is a basic example of a Flexbox layout. The .container element is the flex container, and its child elements (.item) are the flex items. By setting the display property of the container to flex, we activate Flexbox layout mode. By default, the items will be laid out in a row (the main axis), with their height determined by the container’s height (the cross axis).

Example 2: Aligning Items on the Main Axis

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  justify-content: center;
}

In this example, we use the justify-content property to align the flex items on the main axis (the horizontal axis in this case). The default value is flex-start, which aligns the items to the left edge of the container. We set it to center to center the items in the container.

Example 3: Aligning Items on the Cross Axis

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

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

In this example, we use the align-items property to align the flex items on the cross axis (the vertical axis in this case). The default value is stretch, which stretches the items to fill the container. We set it to center to center the items vertically.

Example 4: Changing the Order of Items

<div class="container">
  <div class="item" style="order: 2;">Item 1</div>
  <div class="item" style="order: 3;">Item 2</div>
  <div class="item" style="order: 1;">Item 3</div>
</div>

.container {
  display: flex;
}

In this example, we use the order property to change the order of the flex items. By default, items are laid out in the order they appear in the HTML. However, we can use the order property to rearrange them. The items are ordered based on their order values, with lower values appearing first.

Example 5: Responsive Flexbox Layout

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item center">Item 3</div>
  <div class="item">Item 4</div>
</div>

.container {
  display: flex;
}

.center {
  margin: auto;
}

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

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

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

.item {
  width: 100%;
  height: 100px;
  background-color: lightblue;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
  background-color: lightblue;
  margin: 10px;
}