Flex-box layout for responsive designs(Part-1)

In designing, Webpage or screen layout design is the most important part. If we could design the layout well than we can fit items inside the layout/container as per requirement. To design the layout we usually used display, position, and float. Before this layout module, we had used a table layout. Now we have a new feature in CSS to the layout which is display: flex, in other words, flexible layout. We can align and distribute space between the items in the container even if the size of items is unknown or dynamic.

Flex-box Layout module can be helpful for developers to develop responsive layouts easily without using the float and position.

Let's dig into more details of the flex-box layout or flexible layout.

To start with display flex, we need to define container with a display: flex.

.container{
    display:flex;
}

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

To align items horizontally,justify-content is used. It accepts the following values.

• flex-start: items align to the left side of the container
• flex-end: items align to the right side of the container
• center: items align at the center of the container
• space-between: items display with equal spacing between them
• space-around: items display with equal space around them

See the code below

.container{
    display:flex;
    justify-content:flex-start;/*Item align at beginning of the container horizontally*/
}
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div> 

To align items vertically,align-item is used. It accepts the following values.

• flex-start: items align to the top side of the container
• flex-end: items align to the bottom side of the container
• center: items align at the center of the container
• baseline: items display at the baseline of the container
• stretch: items are stretched to fit the container

See the code below

.container{
    display:flex;
    align-item:flex-end;/*Item align at the bottom vertically*/
}

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

One thing you should consider that the direction of the elements is positioned. For display flex, there is direction property which is flex-direction: row or column. In the case of "row", elements are placed the same as the text direction and in case of "column", elements are placed from top to bottom. There are 2 more values for the flex-direction which are "row-reverse" and "column-reverse".When "row-reverse" is applied to flex-direction then items are placed as opposite of text direction and in the case of "column-reverse" items are placed bottom to top.

.container{
    display:flex;
    flex-direction:row;
    justify-content:space-around;/*Space around the item in horizontal direction*/
}
.container{
    display:flex;
    flex-direction:column;
    align-item:flex-end;/*Item align at the bottom vertically */
}

When the direction is reversed then flex-start and flex-end values of the justify-content and align-items are also reversed means flex-start will start behaving like flex-end and vice-versa.

.container{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-start/*items align to the right side of the container*/
}

.container{
    display:flex;
    flex-direction:column-reverse;
    align-item:flex-end;items align to the top side of the container
}

To make the new line or not when items size is more than the container size can be decided by flex-wrap property.flex-wrap property will accept the following values.

• wrap: items wrap around to new line
• wrap-reverse: items wrap around the new line in reverse order
• nowrap: Every item is fit to a single line

See the code below

.container{
    display:flex;
    flex-wrap:wrap/*wraps to new line if items are not fitting in one line*/
}
.container{
    display:flex;
    flex-wrap:wrap-reverse/*wraps to new line if items are not fitting in one line in reverse direction*/
}
.container{
    display:flex;
    flex-wrap:nowrap/*Don't wraps to new line even if,items are not fitting in one line*/
}

Flex-box layout design will be helpful for developers to design the layout quickly and efficiently. The remaining concepts of flex-box will be covered in part-2 of this blog post.