Flex or Flexbox — A Flexible CSS Layout
“Less but Better” — Dieter Rams
CSS layouts are not new to css. As we all are used to some of the css properties like table, block, inline, inline-block, floats, etc to layout our project. Day by day web designs are getting more complex and none of these css properties are designed for such complex designs. Complex grid system and devices adaptivity are quite difficult with these existing css properties to layout webapp. To overcome these things, a flexible boxing concept come into picture and its known as Flexbox.
Flexbox is a new css layout module. Also know as flexible box layout. It is an improved version of traditional block model. Flexbox is a purely css layout, which means the entire layout is manage and control at css level, no need to play with the markups.
Flex model is capable to adjust its items height/width to best fill in the available space of container. It can expand or shrink to avoid overflow.
Flex layout is direction-agnostic i.e its free from any directional constraints, whereas the existing block is vertically biased and inline layout is horizontally biased.
Let’s dive little deeper in flexbox layout and and go through the various flexbox related terminology , as referring to below attached image, lets explore different key elements of flexbox layout.
As other layout system it is also based on the container and items concept. Container element of flexbox is called flex-container, in other words it is the parent or the outer most element, which contain all the child elements and its child element which contained the content element is called flex-item, or we can say that it contain the text or content. If the text or content is directly put under flex-container then it is anonymously wrapped by an flex-item. As already told, flexbox layout is direction-agnostic, so the content elements or flex-item can be vertically or horizontally arranged based upon the requirement. The axis along with the flex-items are placed is called main-axis and the axis perpendicular to main-axis is called cross-axis. As in the above image the flex-items are placed in a row, so the horizontal axis along with flex-items are place is called main axis.
You can also play around flexbox on poonia.github.io/flexbox.
Now, lets dive into its implementation —
To create a flexbox layout we need to create a flex container. To define any container as flex container we need to set the display property to flex.
lets have an example —
HTML
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 2</div>
</div>CSS
.flex-container {
display: -webkit-flex;
display: flex;
background: #EFF6FD;
}
.flex-item {
background-color: #fff;
border:1px solid #006CE5;
width: 100px;
height: 100px;
margin: 10px;
}To place flex item horizontally, we need to set flex-direction property to row and for vertically its going to be column in place of row
/* row based orientation */
.flex-container {
-webkit-flex-direction: row;
flex-direction: row;
}
/* column based orientation */
.flex-container {
-webkit-flex-direction: column;
flex-direction: column;
}justify-content and align-items are the two main properties used to align the content of the flex container, depending upon the axis along which flex is oriented. For eg. setting the justify-content property center will horizontally center the flex item corresponding to flex-container, when flex-direction is row.
There are many applications of flexbox layout. Few of them includes —
— Absolute centring an element
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}— Ording the flex-item
HTML
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item first-element">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>CSS
.flex-container {
display: -webkit-flex;
display: flex;
background: #EFF6FD;
}
.flex-item {
background-color: #fff;
border:1px solid #006CE5;
width: 100px;
height: 100px;
margin: 10px;
}
.first-element {
-webkit-order: -1;
order: -1;
}
— Control the growth and shrink of individual flex items.
Using flex property we can individually control the grow and shrink the flex-item relative to other flex-items.
flex: [flex-grow] [flex-shrink] [flex-basis]flex-grow — a number which tells the flex growth factor.
flex-shrink — a number which tells the shrink factor of flex item.
flex-basis — number which tells the size of content box of flex item.
example —
.item-2x {
/* This will be twice as big as the normal other item. */
-webkit-flex: 2 0 0;
flex: 2 0 0;
}This is just a glimpse of Flexbox layout. It is one of the most powerful layout mode and day by day modern webapps are moving towards it. Bootstrap and Foundation are the two most widely used CSS frameworks which recently shift on flex layout. I have covered the basics of flex layout with its few applications, hopefully you enjoyed reading. It seems to me a great future of flex layout in complex and adaptive webapps.
