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

In order to use proper flexible box layout in a page, you need proper knowledge of parent and children concept. 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 grid layout. In fact, the flexible box display the items either in column or in row. That is why, it is also known as one-dimensional layout model.

Flexible Box Layout Properties

Flexbox properties can be categorized into 2 types on basis of 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 row of left to right. Likewise, value ‘column’ is used to stack in column of top to bottom. In opposite of row and column, values ‘row-reverse and colum-reverse’ are used for showing child elements in row of right to left and column of 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 alignment of child items vertically. For instance: align-items: center – sets items display in 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 center of a container.
Flexbox child properties
  • order : – It sets the order of each child property.
  • flex-grow :- It defines how much a flex items will grow relative to rest of child items.
  • flex-shrink :- Instead of flex-grow, it defines how much a flex items will shrink relative to rest of child items.
  • flex :- It is a shortut property to set both flex-grow ad flex-shrink properties.
  • flex-basis :- It defines width of a flex item. Such as flex-basis: 180px
  • align-self :- It overrides default alignment of container align-items and define seperate alignment.

Flexible layout is better than any css frameworks to build a grid layout in the page. Lets try a small piece of code using flex and see an simple design of grid. Here I have given a code that help you to grab 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.