> For the complete documentation index, see [llms.txt](https://guvidocs.gitbook.io/guvi-mern/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guvidocs.gitbook.io/guvi-mern/docs/module-2-html-css-bootstrap/css/flexbox.md).
# 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.
```css
.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`.
```css
.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.
```css
.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.
```css
.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.
```css
.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.
```css
.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:
```html
Flexbox Example
1
2
3
```
```css
.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.