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;
}
2. Apply Flex Box to the container
.container{
    display: flex; /* flex box applied here */
    width: 720px;
    height: 480px;
    background-color: blue;
}
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.
flex-direction: column; - Aligns items vertically, top to bottom.
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 @ Matrix Automata

29

This website collects cookies to deliver better user experience

How to position items within a container using Flex Box ?