Flexbox gives us a new kind of control over our layouts, making coding challenges that were hard or impossible to solve with CSS alone straightforward and intuitive. It provides us with the means to build grids that are flexible and aware of dynamic content, and thus, give us the freedom to focus on the creation process instead of hacking our way towards a layout.
To give you a head start... Read More
CSS floats and clears define web layout today. Based on principles derived from centuries of print design, they’ve worked well enough — even if, strictly speaking, floats weren’t meant for that purpose. Neither were tables, but that didn’t stop us in the 1990s.
Nevertheless, the future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly... Read More
Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row.
So if there are only two elements, the price element would be second. But if there are more than three items, the... Read More
Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights. Flex items are truly accommodating and a pleasure to work with.
Flexbox truly shines... Read More
In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights. — Ed.
We've all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering...... Read More
When the mockups for the new Financial Times application hit our desks in mid-2012, we knew we had a real challenge on our hands. Many of us on the team (including me) swore that parts of interface would not be possible in HTML5.
Given the product team’s passion for the new UI, we rolled up our sleeves and gave it our best shot. We were tasked with implementing a far more challenging... Read More
Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all.
Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the... Read More
One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post “Content Choreography,” which showed how visual hierarchy gets lost when columns are dropped below one another.
While techniques exist to help with part of the problem, the... Read More
The flexible box layout module — or “flexbox,” to use its popular nickname — is an interesting part of the W3C Working Draft. The flexbox specification is still a draft and subject to change, so keep your eyes on the W3C, but it is part of a new arsenal of properties that will revolutionize how we lay out pages. At least it will be when cross-browser support catches up.
In the meantime,... Read More
