The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.
Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.
The defining aspect of the flex layout is the ability to alter its items’ width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.
The flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is vertically-biased, or the inline layout, which is horizontally-biased. While the block layout works well for pages, it lacks sufficient definition to support application components that have to change orientation, resize, stretch, or shrink as the user agent changes, flips from vertical to horizontal, and so forth. Flexbox layout is most appropriate for the components of an application, and small-scale layouts, while the (emerging) Grid layout is intended for larger scale layouts. Both are part of a wider effort of the CSS Working Group to provide for greater interoperability of web applications with different user agents, different writing modes, and other demands on flexibility.
DESIGNATING A FLEXIBLE BOX
To designate the CSS for elements using this style, set the display property as follows:
display : flex
or
display : inline-flex
Doing so defines the element as a flex container and its children as flex items. The
flex value makes the flex container a block-level element. The inline-flex value makes the flex container an atomic inline-level element.UNNATURAL PLACEMENT
But your client isn’t satisfied yet. Instead of messing with the
<div.content> she now wants the <footer> to come first, even before the <header>. Clients are crazy folks, you know. Well, Flexbox is also your friend in this case. Since we need to fiddle about not just at the inner elements but at the outer one the display: flex rule has to be stated for <div>. Since <header>, <div.main> and <footer> are stacked above we need to set a vertical context first, which is done with flex-direction: column. So if you ever want to change a row of elements into a column (or vice versa), you can use this property. Additionally the <footer> gets the order value of -1 as above so that it comes first. It’s as easy as that..ex {
display: flex;
flex-direction: column;
}
footer {
order: -1;
}
PROPER ALIGNMENT
Flexbox also makes it very easy to align its children horizontally as well as vertically. All the elements within a container can be aligned with
align-items, individual ones with align-self. But the alignment of the elements is dependent on the set flex-direction. If it is row (that means the elements run in a horizontal line), the alignment concerns the vertical axis; if it is column (that means the elements run in a vertical line), it concerns the horizontal axis. To center the image within <div.content/>, for example, you need to set display: flex for this container first and then the flex-direction to column so that they get stacked atop. Finally the image gets centered with align-self: center. .content {
display: flex;
flex-direction: column;
}
.content .img {
align-self: center;
}
If all of the elements within
<div.content/> need to be aligned the property align-items can be used. Set it to flex-end and they get pushed to the right (except for the image, which is individually centered above). The default left alignment is achieved with the value flex-start..content {
align-items: flex-end;
}
JUSTIFY YOURSELF
Another property for alignment is
justify-content, which is pretty handy to evenly divide the available space to various elements . Here we have an image bar and the four images are evenly distributed across the whole width, thanks to the value space-between..bar {
display: flex;
justify-content: space-between;
}
Another value would be
space-around, which also provides for even division, but adds half of the gap width before the element and the other half after.PURE FLEXIBILITY
Another strength of Flexbox is its ability to automatically distribute the available space to the elements of the container, which is set to
display: flex. If you need three columns with equal width you’d normally have to calculate a little bit and come up with a width of 33.33% for each column. For such purposes Flexbox provides the flex property. To get three equal columns just set flex: 1nav, .content, aside {
flex: 1;
}
If you need the content area to be twice the width of
<nav> (and <aside>) set flex: 2 for it and leave the other two at 1.FLEXBOX LAYOUT METHOD
In part one,we touched on how to harness the power of display:
In part 2 we’ll be taking a look on how to take this even further, and turn your flexbox layout into a fully-fledged responsive design!
A BRIGHT FUTURE
As you can see, Flexbox has great potential to make our lives so much easier if we need to set up a layout for a website. It’s rock solid (at least in the current version) and makes any hacks, collapsing containers or other weird stuff we have to deal with every day, obsolete. Hopefully the current syntax is the final one and every browser will interpret the properties in the same way prospectively.
