CSS flexible box layout is an easy way to make a grid system user interface on the webpage. By using the flex layout model in a container item, other child items can be arranged in any direction either in vertical or horizontal properly. This layout is known as a flex layout because each and every item has flexible sizes.

In order to use a proper flexible box layout on a page, you need proper knowledge of parent and children concepts. Most often parent class must have been set to display: flex

Normally, if you set parent class to display: flex without adding any other flexible properties, it will show child items inline. Without using other flexible properties, you can’t get the grid layout. In fact, the flexible box displays the items either in a column or in a row. That is why it is also known as a one-dimensional layout model.

Flexible Box Layout Properties

Flexbox properties can be categorized into 2 types on the basis of the parent element and child element.

Flexbox parent properties:-
  • flex-direction :- It sets the direction for flex child items to be contained. Values for flex-direction are row, column, row-reverse, column-reverse. Value ‘row’ is used to show child elements in a row of left to right. Likewise, the value ‘column’ is used to stack in a column of top to bottom. In the opposite of row and column, values ‘row-reverse and Colum-reverse’ are used for showing child elements in a row of right to left and column of the bottom to top respectively.
  • flex-wrap :- It defines how to enfold child items in a container. Such as, ‘wrap’ value is written to wrap child properties in multiple rows. In contrast, ‘nowrap’ value is used to display children in one row.
  • flex-flow :- It is a shortcut property to set both flex-direction and flex-wrap properties.
  • align-items :- It is used to define the alignment of child items vertically. For instance: align-items: center – sets items display in the center of a container. (Values – center, flex-start, flex-end)
  • justify-content :- It is also like align-items, but it aligns the items horizontally. Such as justify-content: center – sets items display center horizontally.
  • align-content :- Unlike align-items, it packs items in the center of a container.
Flexbox child properties
  • order : – It sets the order of each child’s property.
  • flex-grow :- It defines how much a flex item will grow relative to the rest of child items.
  • flex-shrink :-¬†Instead of flex-grow, it defines how much a flex item will shrink relative to the rest of child items.
  • flex :- It is a shortcut property to set both flex-grow ad flex-shrink properties.
  • flex-basis :- It defines the width of a flex item. Such as flex-basis: 180px
  • align-self :- It overrides default alignment of container align-items and defines separate alignment.

A flexible layout is better than any CSS framework to build a grid layout on the page. Let’s try a small piece of code using flex and see a simple design of the grid. Here I have given a code that helps you to grab a small sense of flexbox.


<style type="text/css">
body{
font-size: 20px;
}
h1{
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.parent{
display: flex;
flex-flow:row wrap; /* set items in multiple rows*/
text-align: center;
}
.parent > * {
padding: 20px;
flex: 1 100%; /** set to display each item in same ratio*/
}
.child{
background: green;
}
.child-1{
background: red;
}
.child-2{
background: blue;
}
.child-3{
background: green;
}
.child-4{
background: yellow;
}
.child-5{
background: pink;
}
.child-6{
background: skyblue;
}
@media only screen and (min-width:480px){
.child{
flex: 1 auto;
}
}
@media only screen and (min-width: 750px){
.child-2{
flex:2 0px;
}
.child-4{
flex: 3 0px;
}
.child-2{
order: 2;
}
.child-3{
order: 1;
}
.child-4{
order: 3;
}
.child-5{
order: 4;
}
.child-6{
order: 5;
}
}
</style>
<h1>Parent</h1>
<div class="parent">
<header class="child-1">Child 1</header>
<div class="child child-2"><strong>Child 2</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
<div class="child child-3">Child 3</div>
<div class="child child-4"><strong>Child 4</strong><br> Lorem ipsum
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="child child-5">Child 5</div>
<div class="child-6">Child 6</div>
</div>

Flexible layout example
Flexible layout example

Thank you, everybody, if you have any confusion and better solution for CSS grid style, please comment below and let people know about your ideas.

Sharing is an easy caring