Flexbox

Flexbox is a one dimensional layout process, where we can align group of items in the respective layout provided. We use flexbox to make alignment of items easier in the given space of container. The container(of items) becomes flexible by the properties given to it ,like display property, which is used to align items by using flex.

Let us discuss about flexbox in detail...

What is a flex container?

We use container to store the items and while doing so we arrange them in a particular sequence so as to fit into the container. In the similar manner ,we use the property display: flex to make the container flexible to control by giving the properties for the items in it.

We can define the parent child relation for the container and the items in it, where container acts as parent and items act as child.

Flex Properties

Flex has some properties which makes the arrangement of items in a more systematic manner. Those properties are:

Flex Direction
Justify-content
Flex wrap
Flex Flow
Align-items
Align-content

Flex Direction:

If we consider the items in the container to be a matrix elements ,then by using flex direction property we can arrange them in row or a column and row-reverse or column reverse as well.

Screenshot 2022-08-04 204314.png

HTML Code:

<body>
    <div class="content"><h1>Learning Flex-direction </h1> </div>
    <div class="logos">       
            <div class="logo"><img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo"><img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo"><img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo"><img src="./lco logo.png" width="50px" alt="logo"></div>
    </div>
    <div class="Property"><p1>This is flex-direction:<span>  Row</span></p1></div>
</body>

CSS:

.logos {
    position: relative;
    top:300px;
    display: flex;
    flex-direction: row;
}

(Code related to flex-direction : row)

OUTPUT:

Justify-content :

Justify content is a property used to align the items in the container, in such a way that they use the space according to the property assigned.

Example: Flex start is used to align items from the start point of flex.

Space between is used to give equal spacing between the elements. Similarly, we use all other sub-properties of justify content to align content as required.

Flex wrap:

Flex wrap is used to wrap all the items in a given space of the container. If the items couldn't fix in the given width of container , then they start aligning on the immediate line.

Flex Flow:

The flex-flow property specifies the direction of a flex container, as well as its wrapping behavior.

.logos {
    position: relative;
    top:300px;
    background-color: rgba(90, 159, 194, 0.941); 
    display: flex;
    width: 200px;
    height: 300px;
    flex-direction: row;
    flex-flow: row wrap;
}

Align-items

Align-items is used to align the position of items in a flex container.

.logos {
    position: relative;
    top:300px;
    background-color: rgba(90, 159, 194, 0.941); 
    display: flex;
    width: 400px;
    height: 400px;
    flex-direction: row;
    align-items: center;
}

.logos {
    position: relative;
    top:300px;
    background-color: rgba(90, 159, 194, 0.941); 
    display: flex;
    width: 400px;
    height: 400px;
    flex-direction: row;
    align-items: flex-end;
}

Align-content

Align-content is used to display flex-lines. If we give align-content as center, then all the flex lines move to the center. If we give it as stretch, then it stretches the flex lines so as to fill the rest of space.

.logos {
    position: relative;
    top:300px;
    background-color: rgba(90, 159, 194, 0.941); 
    display: flex;
    width: 400px;
    height: 400px;
    flex-direction: row;
    flex-wrap:wrap;
    align-content: stretch;

}

We do have flex items properties as well...

Flex-Items Properties

Order
Flex-grow
Flex-Shrink
align-self
flex

Order

We use this Property to arrange the items in the given order of preference.

<body>
    <div class="content"><h1>Learning Flexbox </h1> </div>
    <div class="logos">       
            <div class="logo" style="order: 4 ;">1<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo" style="order: 3;">2<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo">3<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo">4<img src="./lco logo.png" width="50px" alt="logo"></div>
    </div>
    <div class="Property"><p1>The property used here is <br> <span>order</span></p1></div>
</body>

Here, the first item is located at the last position as its order is given as 4.

Flex grow

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

<body>
    <div class="content"><h1>Learning Flexbox </h1> </div>
    <div class="logos">       
            <div class="logo" >1<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo" style="flex-grow: 0;">2<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo" style="flex-grow: 2;" >3<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo">4<img src="./lco logo.png" width="50px" alt="logo"></div>
    </div>
    <div class="Property"><p1>The property used here is <br> <span>Flex grow Property.</span></p1></div>

Flex Shrink

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

Align-self

Item 2 aligns itself at flex end.

Flex

This property is a combination of flex grow, flex shrink and flex basis.

<body>
    <div class="content"><h1>Learning Flexbox </h1> </div>
    <div class="logos">       
            <div class="logo" >1<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo" style="flex: 1 0 300px;" >2<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo"  >3<img src="./lco logo.png" width="50px" alt="logo"></div>
            <div class="logo">4<img src="./lco logo.png" width="50px" alt="logo"></div>
    </div>
    <div class="Property"><p1>The property used here is <br> <span>flex Property.</span> <br> It defines that the flex grow of item is 1,<br> flex shrink is 0 and <br> the length is 300pixels.</p1></div>
</body>

CONCLUSION

Learning the concepts of Flexbox might take over one's head but the real fun and learning starts when we try to use flexbox while writing the code. We get to have a clear idea on all the concepts and also it simplifies our work.

Thank you for reading this article. I hope it helped you in some way.

Understanding Flexbox.

Table of contents