DEV Community

Danyson
Danyson

Posted on • Updated on

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>

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

2. Apply Flex Box to the container

.container{
    display: flex; /* flex box applied here */
    width: 720px;
    height: 480px;
    background-color: blue;
}
Enter fullscreen mode Exit fullscreen mode

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

image

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

image

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

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

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;
image

justify-content: flex-end;
image

justify-content: center;
image

justify-content: space-between;
image

justify-content: space-around;
image

justify-content: space-evenly;
image

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;
image

align-items: flex-end;
image

align-items: center;
image

align-items: strech;
image

Our Tech works @ Doge Algo

Discussion (0)