Making Layouts Easy With CSS Flexbox: Flex-Container Properties

#css #flexbox #layout #webdev

CSS Flexbox is a responsive design layout that helps in aligning HTML elements efficiently.

Flexbox distributes elements within their parent container, even if the size of items is unknown or dynamic (hence the term "flex").

There are various properties associated with this model, that are either applied to the parent flex container or the children flex items.
In this post, I will try to explain all the properties that are applied to the flex-container.

You can check out the entire demo here: https://demo-flexbox.netlify.app/

You can check out the entire code here: https://github.com/bharati-21/Flexbox-CSS

This could be a long blog post as there are lots of basics to cover!

BASICS

While working with flex, items are aligned either horizontally or vertically.

The parent container that holds items is referred to as the flex-container, and the items/ children as the flex-items.
When elements are displayed as flex, they are laid out along two axes:
- main-axis: The direction along which items are laid. This depends on the flex-direction property.
- cross-axis: The direction perpendicular to the main axis. This also depends on the flex-direction property.

A flex container's or item's height or width, whichever is the main-axis direction, is the item's main-size.
A flex item's height or width, whichever is the cross-axis direction, is the item's cross-size.
The flex items are laid along the main-axis starting from the main-start towards main-end.
The container has flex lines along the cross axis, and items are laid along these lines from cross-start towards cross-end.

The image above explains flex layout and basic terminologies.

FLEXBOX PROPERTIES

Let's use the following code to understand various properties of flex layout:

<div class="flex-container">
     <div class="flex-item" id="item-1">1</div>
     <div class="flex-item" id="item-2">2</div>
     <div class="flex-item" id="item-3">3</div>
     <div class="flex-item" id="item-4">4</div>
     <div class="flex-item" id="item-5">5</div>
</div>

The above image is the default alignment of the container in the browser. display: block;

PROPERTIES APPLIED TO FLEX-CONTAINER (PARENT)

These are the properties applied to parent flex container:

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

.flex-container {
    display: flex | inline-flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    align-items: stretch | flex-start | flex-end | baseline | stretch;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;

    flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
}

display
- This property applies flexbox to the container and all the children become flex items.
- It overrides the default display: block; property on the container.
- The items are automatically aligned horizontally, making the row default main-axis.
- The items stretch to fit the height of the container (since the default main-axis is a row), but items do not stretch across the main-axis.
- This property can take the following values:
  - flex: the parent is displayed as a block-level flexbox container but the children are laid out as flex items.
  - inline-flex: container's children are laid out as flex-items and the container as an inline item.
```
  .flex-container {
      display: flex | inline-flex;
  }
```
  - When parent div with the class "container" is displayed as a flex container, all the children of this container (the 5 divs with class "item") become flex items. By default, the container's main-axis becomes row, flex-wrap is set to no-wrap and flex-basis to auto.
flex-direction
- This property controls how items are displayed in the container, i.e it defines the main-axis.
- This property can take the following values:
  - row: (default value) items are laid from left to right along the row of the container.
  - row-reverse: The items are laid horizontally, but the main-start and main-end lines are reversed.
  - column: The items are laid in a column, from top to bottom.
  - column-reverse: The items are laid vertically, but the main-start and main-end lines are reversed.
```
 .flex-container {
     display: flex;
     flex-direction: row | row-reverse | column | column-reverse
 }
```
  - The flex-direction is specified for the container which becomes the main-axis, and flex items are laid out accordingly. The cross-axis becomes perpendicular to the direction specified.
flex-wrap
- By default, all flex items are displayed in a single line. This behavior can be changed using the flex-wrap property and items can be wrapped into multiple lines.
- The property takes the following values:
  - nowrap: (default) The items either shrink to fit the container or overflow if unable to shrink.
  - wrap: The items are wrapped onto multiple lines, from top to bottom, if the container is not large enough to fit all the items.
  - wrap-reverse: The items are wrapped onto multiple lines, but from bottom to top. The cross-start and cross-end lines are reversed.
```
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap | wrap | wrap-reverse;
}
```
  - When the container is not large enough to fit all the items, nowrap value may cause the flex items to overflow out of the container if the items are unable to shrink or are very small to shrink.
  - Making the container wrap or wrap-reverse avoids overflow, as flex items are wrapped onto multiple lines if they become larger than the flex container.
flex-flow
- This is a shorthand for flex-direction and flex-wrap properties and defines how items need to be displayed in both the main and cross axes.
  - The default value for flex-flow is row nowrap; .
```
 .flex-container {
     display: flex;
     flex-flow: row | row-reverse | column | column-reverse || nowrap | wrap | wrap-reverse;
 }
```
- It takes all the values accepted for flex-direction and flex-wrap. It can take value for either one of the properties or both of them.
justify-content
- This property distributes flex items along the main-axis. It allows to take up any extra space available along the main-axis and changes the way content is displayed.
- The property takes the following values:
  - flex-start: (default) Items are aligned and packed to the start of the container along the main-axis (main-start line).
  - flex-end: Items are packed to the end of the container along the main-axis (main-end line).
  - center: Items are packed to the center of the container.
  - space-between: Items are placed evenly with space between each other. The first item is placed on the main-start line, and the last item on the main-end line.
  - space-around: Similar to space-between but has space on either end of main-start and main-end lines as well.
  - space-evenly: Items are evenly distributed with equal spacing between each other and between the item and edges.
```
.flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```
  - justify-content property aligns items along the main-axis. In this case, since our main-axis is the row, the property aligns items horizontally.
align-items
- This property is used to align flex items along the cross-axis.
- The property takes the following values:
  - stretch: (default) Items are stretched to fill the container across the cross-axis.
  - flex-start: Items are aligned at the start of the container's cross-axis (cross-start line).
  - flex-end: Items are packed at the end of the container's cross-axis (cross-end line).
  - center: Items are placed at the center of the cross-axis.
  - baseline: Items are placed such that their content's baselines align. This is particularly useful when all the flex items within a container have content of varying sizes. The baseline for the example is shown in the image below.
```
.flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: stretch | flex-start | flex-end | center | baseline;
}
```
  - align-items aligns flex items across the cross-axis. In this case, the property aligns flex items vertically since the main-axis is row.
align-content
- This property aligns the extra space between the flex items, called the flex-lines, along the cross-axis.
- The property takes the following values:
  - stretch: (default) Items are stretched to take up the extra space in the container across the cross-axis.
  - flex-start: Items are packed at the start of the container's cross-axis (cross-start line).
  - flex-end: Items are packed at the end of the container's cross-axis (cross-end line).
  - center: Items are packed and placed at the center of the cross-axis.
  - space-between: Items are evenly placed across the cross-axis such that there is space between them. The first item is placed at the cross-start line and the last item at the cross-end line.
  - space-around: Items are distributed along the cross-axis such there is space around and between the items.
```
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: stretch | flex-start | flex-end | center | space-between | space-around;
}
```
  - Similar to how justify-content aligns items along the main-axis, align-content aligns flex items across the cross-axis. In this case, this property aligns flex items vertically.
  - The align-content property only takes effect when the flex items are wrapped onto multiple lines.

You can check out the entire demo here: https://demo-flexbox.netlify.app/

You can check out the entire code here: https://github.com/bharati-21/Flexbox-CSS

In the next blog, I will focus on all the properties applied to the flex container's children (flex-items).

Thank you for reading the first blog on the CSS Flexbox Series!

If this blog helped you understand the flexbox concept better, do leave a thumbs up and follow if you enjoyed reading.