CSS3 provides several new ways to do horizontal (and vertical) layout. The easiest is multiple columns within a box. The more flex box can arrange multiple child boxes horizontally or vertically within a parent box.
Some CSS3 properties require vendor prefixes, as explained in Browser Design Strategies.
Multiple Columns
It’s easy to create multi-column layouts using the new CSS3 multiple columns property. The document flow can create more columns inside a box than is visually pleasing, so change it to one, two, three or four columns, depending on the size of the screen. A good use of this would be in media queries, where small screens get one column, tablets get two and computer monitors get three or more columns.
Multi-Columns Interactive
CSS Code View
Live Demo
What is “Fun?”
“I’ll know it when I see it.”
As designers, we get a lot of similarly elusive adjectives from clients, as they tell us what they want their sites to be: “The site needs to be ‘cool,’” “It should be ‘exciting,’” “I want it to ‘pop.’” When we ask them to clarify, the answer we get back sounds a lot like “I can’t tell you what it is, but I’ll know it when I see it.”
“Fun” is a particularly difficult concept to define. And we’re starting to hear it a lot more from clients as we design for different contexts of use.
So what’s a designer to do?
Flex Layout
Flex Layout provides a more efficient way to lay out,distribute and align both the elements and the space in a parent container, even if the parent or children’s size is unknown or dynamic. The child items’ width, height and order can be set to best fill the space that they take up.
Flex Layout is a module, meaning that there are a number of properties that make flex work. It has its own terminology, and the following diagram will help explain it.
The first thing to do is to initiate the flex container.
The container can be a block display: flex;or inline display: inline-flex .
The flex container has a main axis, the primary direction along with flex items are laid out. Use flex-direction: horizontal; or flex-direction: horizontal-reverse; to specify the main direction as horizontal, from left to right or right to left. Use flex-direction: vertical; or flex-direction: vertical-reverse; to specify the main direction as vertical, from left to right or right to left.
See the numbers reverse in the demo when the direction is reversed.
The content is justified by setting the justify-content: to flex-start, center, flex-end, space-between and space-around.
Space between collapses the padding between the flex container and the first and last item
Flex Box Container
CSS Code View
Live Demo
Flex-Wrap
Flex does not automatically wrap its children into multiple lines within the container. If there are too many flex-items, the they extend beyond the flex container’s boundary. Wrapping the flex items will wrap them into multiple lines below (or above with wrap-reverse). The demonstration below takes the setting from the previous demo.
CSS Code View
Live Demo
Flex Item Align and Order and Proportion
Then there is a cross axis, perpendicular to the main axis along which flex items can be aligned. Watch the boxes align according to the cross axis, or have them stretch so that they are all the same. Unlike the previous boxes, the height is not specified, but driven by the content.
Align
Align flex item can be applied to any element, and here the third flex-item is flex-end , where the others are flex-start . Put them all on stretch, and you have the perfect equally long shaded columns that is the aim of the Holy Grail Layout below.
Order
The order of the boxes is changed by specifying how many items forward or backward the box should move.
Proportion
Width of the boxes is determined proportionally, and specified for each flex-item by the flexproperty.
CSS Code View
Live Demo
Flex Grow Shrink and Basis
Rather than specify a fixed ratio, it can be given parameters by the Flex Layout Algorithm and dynamically determine the fit of the flex-items to the remaining space, or lack of space, using grow, shrink and basis controls.
Grow
The Flex layout Algorithm defines the ability for a flex item to grow, starting from the basis number, if the content requires it. It calculates the proportion for each flex item inside the flex container. Flex growth is the amount a flex item can grow in proportion to the other flex items. If all items have flex-grow set to 1, every child will have an equal potential to expand if their content requires it. If one of the children has a value of 2, that child would take up twice the growth as the others.
Shrink
Flex-shrink does the opposite, with a higher number defining how much greater the shrinkage of an item. See what happens when you cut the width of the parent flex box by 50%. The box with the highest Flex-shrink number shrinks the most.
Basis
Flex-basis is the starting or default size of an element before the remaining space is distributed. It’s default is auto.
Align
Align flex item can be applied to just one flex-item, and the last one is stretch, where the others are flex-start.
Order
Flex-item number 2 has been moved one place to the front with a flex-order: -1.
CSS Code View
Live Demo
Page Layout Demonstration
Once upon a time, a very long time ago, there was a Holy Grail Layout with a three column body, a header and footer. This was accomplished without tables. Can you imagine that? This was long before mobile changed everything, so it was not very friendly to a change in viewport. Times have changed, and so has the technology. A perfectly good Holly Grail that is responsive, so if you shrink the screen down, you will see the three columns become a stack of boxes.
CSS Code View
Live Demo
Holly Grail Layout
Many articles have been written about the Holy Grail layout, and several good templates exist. However, all the existing solutions involve sacrifices: proper source order, full-width footers, and lean markup are often compromised in the pursuit of this elusive layout.
A recent project has brought my personal grail quest to an end. The technique I’ll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility
Usage
High profile usage is just starting to happen (2015) and here are a few examples that use Flex to power their grids.
Know that there still are issues, but they will be smoothed over with time. Here are a few workarounds.