How to position items within a container using Flex Box ?

1. Create a Container with items

Html

<div class="container">

    <div class="item">A</div>

    <div class="item">B</div>

    <div class="item">C</div>

</div>

CSS

.container{

    width: 720px;

    height: 480px;

    background-color: blue;

}

.item{

    font-size: 18px;

    text-align: center;

    padding: 5px 10px;

    border: 1px solid green;

    background-color: orange;

}

1. Apply Flex Box to the container

.container{

    display: flex; /* flex box applied here */

    width: 720px;

    height: 480px;

    background-color: blue;

}

1. Add Flex-Direction

We can now add a ‘flex-direction’ property to the container and assign one of the following values:

flex-direction: row; - Aligns items horizontally, left to right.

flex-direction: column; - Aligns items vertically, top to bottom.

flex-direction: row-reverse;- Aligns items horizontally, right to left.;`

flex-direction: column-reverse;- Aligns items vertically, bottom to top.

4. Add Justify-Content

We can place the items at different positions along the container’s main axis by using the ‘justify-content’ property coupled with one of the following values:

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

5. Add Align-Items

We can place the items at different along the container’s cross axis by using the ‘align-items’ property coupled with one of the following values:

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: strech;

Our Tech works @ Doge Algo