CSS3 Flex Box module
If you didn’t notice already CSS3 is a bit different than its predecessor in that its not, and won’t ever really be fully released. We are now seeing modules being released on a pretty regular basis which makes a lot of sense. You will notice that browsers are now pushing updates more frequently as well. This is done under the same principle, the web is changing at such a fast pace and because of this browsers must react.
The web is now less like an awkward prepubescent teen and is now likened to an undecided twenty something who seems to look differently every time you take a glance.
So now you are caught up, lets talk flex-box.
Some key features
- content is more flexible
- less hacks required to do things like columns
- cleaner, less presentational mark up
- good times
Lets take a look under the hood
Here is some basic code I am going to use to build something out. If you are too antsy to wait you check out the demo here.
<section>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<section>
So here we have a container with some basic divs inside. The first and most important thing to know is that you must apply the flex box to the containing div. So you are probably saying, “what, I need to include extra divs for presentation? divitis!” Not true. Most everything on a site sits within a container, thems the facts baby. No presentational mark up required. Here is what that would look like.
section{
display:-moz-box;
display:-webkit-box;
display: box;
width:1000px;
}
Pretty basic stuff, we use a <section> tag to wrap the divs and we give it the required display: box. Notice the vendor prefixes, very nasty business this bleeding edge web development, always include these.
Let’s look at some cool stuff now.
Here is what we are going to produce.
div{
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
width: 200px;
margin-right:10px ;
}
so for each div we declare a box-orient of Horizontal. There are two orients, horizontal or vertical both self explanatory. We then give it a width and a bit of a margin and we are off.
#one{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background: #666;;
}
#two{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background:#333;
}
#three{
-moz-box-flex: 4;
-webkit-box-flex: 4;
box-flex: 4;
background:#ccc;
}
Here’s where the magic happens. Box flex allows us to determine how the space is used. If we dust off our calculator we know that 200px plus 10 px for the margin gives each div a width of 210px. Times that by three and we have 630px, what to do with the leftover space. By declaring a box flex of 1 for two of the divs and 4 for the third div we are saying that for every one px we get four for the third until it reaches its max width, so the space gets filled.
I am sure you are as excited as I am to be able to code up your designs in a new, more dynamic way. Imagine this being used in navigation, or article posts, coupled with responsive design it will be lethal. Another nice thing about flex-box is how easy it would be to create columns, natively each flex-box has the same height based on which every has the most content.
Browser support isn’t there there yet so we will have to wait, but until then take it out for a test ride. I am sure you will learn how great a feature it truly is. Check out the demo here.
Are you one of those people who learn better from experience, or you are illiterate? Here’s a great tool for flexbox.
Tweet