Making Layouts Easy With CSS Flexbox: Flex-Container Properties
Tags: css, flexbox, layout, webdev
Published: 2021-05-16 14:33:06

_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!*

<hr/>

# 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.

<br/>
* 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***.

![Image Explaining Flex Layout and Basic Terms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bhbwznir1tf67wxo7tf.png) The image above explains flex layout and basic terminologies.

<hr />

# FLEXBOX PROPERTIES
> Let's use the following code to understand various properties of flex layout:
```html
<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>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g75jio75t2jl02ix4mbf.png)
* The above image is the default alignment of the container in the browser. `display: block;`


<hr />

### PROPERTIES APPLIED TO FLEX-CONTAINER (PARENT)
***These are the properties applied to parent flex container***:
  1. display
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items
  7. align-content
``` css
.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’>;
}
```

1. ***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.
        ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tt0h3ghyvjbz0pqnfl8.png)
          <pre>
          ```css
          .flex-container {
              display: flex | inline-flex;
          }
          ```
          </pre>
     * 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**.
    
  
  
2. ***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. 
        ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onl6a53ajdd21c4s0lys.png)
         <pre>
         ```css
         .flex-container {
             display: flex;
             flex-direction: row | row-reverse | column | column-reverse
         }
         ```
         </pre>
     * 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.


3. ***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.
        ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra36j7zpv2vfdom5s2s0.png)
        <pre>
        ```css
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap | wrap | wrap-reverse;
        }
        ```
        </pre>
     * 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.



4. ***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;```.
         ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsuv505oygbg1gdo0mb6.png)
         <pre>
         ```css
         .flex-container {
             display: flex;
             flex-flow: row | row-reverse | column | column-reverse || nowrap | wrap | wrap-reverse;
         }
         ```
         </pre>
   * 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.




5. ***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.  
        ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8y8ipptuutsvlfbnjy2.png)
        <pre>
        ```css
        .flex-container {
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
             justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
        }
        ```
        </pre>  
     * ***justify-content*** property aligns items along the main-axis. In this case, since our main-axis is the **row**, the property aligns items horizontally.      

6. ***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.
        ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s556sltaor1aqg2kpwq.png)
        <pre>
        ```css
        .flex-container {
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
             align-items: stretch | flex-start | flex-end | center | baseline;
        }
        ```
        </pre>  
     * ***align-items*** aligns flex items across the cross-axis. In this case, the property aligns flex items vertically since the main-axis is _row_. 

7. ***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.
        ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1glb9j43vuuy7jnfaza.png)
        <pre>
        ```css
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap; 
            align-items: stretch | flex-start | flex-end | center | space-between | space-around;
        }
        ```
        </pre>  
     * 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. 

<hr />

> 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!
<br /> 
If this blog helped you understand the flexbox concept better, do leave a thumbs up and follow if you enjoyed reading.