Flexbox

Flexbox is a powerful layout model in CSS that allows you to design complex web layouts with ease. In this documentation blog, we'll explore various aspects of Flexbox including display, flex-direction, flex-wrap, flex-flow, justify-content, and align-content, accompanied by detailed explanations and examples.

1. display

The display property in CSS specifies the type of container used for an element. When set to flex, the container becomes a flex container and its children become flex items.

.container {
  display: flex;
}

2. flex-direction

The flex-direction property determines the direction of the main axis in the flex container. It can be set to row, row-reverse, column, or column-reverse.

.container {
  display: flex;
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

3. flex-wrap

By default, flex items will try to fit into a single line. The flex-wrap property controls whether the flex container should wrap its contents onto multiple lines if needed.

.container {
  display: flex;
  flex-wrap: nowrap; /* or wrap, wrap-reverse */
}

4. flex-flow

The flex-flow property is a shorthand for setting both flex-direction and flex-wrap in a single declaration.

.container {
  display: flex;
  flex-flow: row wrap; /* flex-direction flex-wrap */
}

5. justify-content

The justify-content property aligns flex items along the main axis of the flex container. It helps in distributing space between and around flex items.

.container {
  display: flex;
  justify-content: flex-start; /* or flex-end, center, space-between, space-around */
}

6. align-content

Similar to justify-content, the align-content property aligns flex lines within the flex container when there is extra space in the cross-axis.

.container {
  display: flex;
  align-content: flex-start; /* or flex-end, center, space-between, space-around, stretch */
}

Example

Let's put everything together in a practical example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 10px;
}

In this example, the .container class creates a flex container with a row direction, wrapping its items onto multiple lines. The justify-content property spaces the items evenly along the main axis, and align-content distributes the lines evenly along the cross-axis.

Conclusion

Flexbox provides a flexible and efficient way to layout, align, and distribute space among items in a container. By understanding and utilizing properties like display, flex-direction, flex-wrap, flex-flow, justify-content, and align-content, you can create sophisticated layouts for your web projects with ease. Experiment with different values and combinations to achieve the desired layout for your designs.

PreviousBox Model: Margin, Padding, and BorderNextPosition Property