Flexible Box Model, or Flexbox, is a CSS3 technique for styling web pages. This layout mode provides a simple and easy way to create your theme without messing with floats or attempting to style your boxes to be the same height. The Flexible Box Model will help you unify your layout, and even provide you with solutions that do not require addition, subtraction or determining the percentage of width for a certain object. This technique could be extremely beneficial if you're attempting to design a responsive website.
We'll start with one simple <section> that will be the container for our flexible boxes:
<section id=”parentbox”> </section>
We're going to style this div to be prepared to display flexible boxes within it. We're also going to add a nice, thick border so we know where it is on the page.
#parentbox {
display: flex;
width: 600px;
border: 5px solid #000;
margin: 100px auto 0px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
You may notice in the above CSS that I'm including box-sizing property. This is a nifty CSS3 trick that allows you to set the intended width of a box including its width, padding, and border. In parentbox's CSS above, we tell the browser that we want this section's width to be 600 pixels, including its border size and padding.
Next, we'll want to display four boxes within parentbox that will display flexibly for us:
<section id="parentbox">
<div id="box-1" class="box">Box 1</div>
<div id="box-2" class="box">Box 2</div>
<div id="box-3" class="box">Box 3</div>
<div id="box-4" class="box">Box 4</div>
</section>
Box 1, 2, 3, and 4 will be our case studies for the Flexbox layout method. We are going to make these four boxes display inline within our parentbox without the use of floats or assigning widths. We will let the browser handle all of the grunt work, much like we've done with the border-box property.
Here is the CSS code we will use to facilitate our goal:
.box{
flex: 1;
text-align: center;
margin: 10px;
padding: 50px 10px;
}
#box-1{
background: #FF0000;
}
#box-2{
background: #003399;
}
#box-3{
background: #FF00FF;
}
#box-4{
background: #996633;
}
Notice that all of our boxes are being assigned a property of flex with the value 1. This is how much space is allocated for it within its parent. Here is an example of how this looks:
What the flex attribute does is allocate space for your flexible box to reside in. This forces the browser to calculate the available space for your flexible box, and then fit it and its siblings into the parent based on how large you want it. By changing the flex value to a higher number, you give that flexible box more space within its parent. Below, Box2 has been given a flex value of 4:
You can see that Box2 takes up more space and the rest is distributed among the siblings, all of whose flex values are assigned 1. You can play around with any number in the available space to see how to make it work. Let's see what the following code will produce:
#box-1{
flex: 1;
}
#box-2{
flex: 2;
}
#box-3{
flex: 3;
}
#box-4{
flex: 4;
}
As you can see, the boxes are getting wider the farther thy are to the right, just like the flex value is getting higher the further along we are in the order of boxes. Here is an image of what adding this code to the bottom of your CSS produces:
As I'm sure you've guessed by now, the practice of Flexible Box Model could make something like a responsive site very easy to produce, especially when applied in correlation with media queries. Another benefit of the Flexible Box Model is that the heights of the siblings are always the same! If we add a CSS value for height to any of the boxes in our row, you will see the rest of the boxes stretching to match that height.
I encourage you to play around with all of the codes here and seek out more information on each. The best way to learn a new toy is to play with it, after all!
