Introduction

CSS Flexbox is a powerful layout module that provides a flexible and efficient way to arrange and align elements within a container. It offers an alternative to traditional layout methods such as floats and positioning, making it easier to create responsive and dynamic designs.

CSS Flexbox

To utilize Flexbox, you need to apply the `display: flex;` property to a container element. This turns the container into a Flexbox container, and its direct children become Flexbox items.

.container {
  display: flex;
}

Block

Block elements in Flexbox behave similarly to traditional block elements, taking up the full width available. They stack vertically, one after the other.

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

Inline

Inline elements in Flexbox behave like traditional inline elements, aligning horizontally next to each other. They don't take up the full width.

.item {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Direction (flex-direction)

The `flex-direction` property controls the main axis of the Flexbox container, determining whether items flow horizontally or vertically.

.container {
  display: flex;
  flex-direction: row;
  /* Default value, items flow from left to right */
}

.container {
  display: flex;
  flex-direction: column;
  /* Items flow from top to bottom */
}

Wrap (flex-wrap)

The `flex-wrap` property determines how Flexbox items should behave when they exceed the container's width. By default, items will overflow the container. You can use `flex-wrap: wrap;` to allow items to wrap onto multiple lines.

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

Flow (flex-flow)

The `flex-flow` property is a shorthand for `flex-direction` and `flex-wrap`. It allows you to set both properties in one line.

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

Summary

• Flexbox is a powerful layout module for creating responsive and flexible designs.
• It offers easy control over alignment, distribution, and sizing of elements.
• Use `display: flex;` to turn a container into a Flexbox container.
• Key properties include `flex-direction`, `flex-wrap`, and `flex-flow`.