Tag Archives: flexbox


When And How To Use CSS Multi-Column Layout

When And How To Use CSS Multi-Column Layout

Rachel Andrew

In all of the excitement about CSS Grid Layout and Flexbox, another layout method is often overlooked. In this article I’m going to take a look at Multi-column Layout — often referred to as multicol or sometimes “CSS Columns”. You’ll find out which tasks it is suited for, and some of the things to watch out for when making columns.

What Is Multicol?

The basic idea of multicol, is that you can take a chunk of content and flow it into multiple columns, as in a newspaper. You do this by using one of two properties. The column-count property specifies the number of columns that you would like the content to break into. The column-width property specifies the ideal width, leaving the browser to figure out how many columns will fit.

It doesn’t matter which elements are inside the content that you turn into a multicol container, everything remains in normal flow, but broken into columns. This makes multicol unlike other layout methods that we have in browsers today. Flexbox and Grid for example, take the child elements of the container and those items then participate in a flex or grid layout. With multicol, you still have normal flow, except inside a column.

In the below example I am using column-width, to display columns of at least 14em. Multicol assigns as many 14em columns as will fit and then shares out the remaining space between the columns. Columns will be at least 14em, unless we can only display one column in which case it may be smaller. Multicol was the first time that we saw this kind of behavior in CSS, columns being created which were essentialy responsive by default. You do not need to add Media Queries and change the number of columns for various breakpoints, instead we specify an optimal width and the browser will work it out.

See the Pen Smashing Multicol: column-width by Rachel Andrew (@rachelandrew) on CodePen.

Styling Columns

The column boxes created when you use one of the column properties can’t be targeted. You can’t address them with JavaScript, nor can you style an individual box to give it a background color or adjust the padding and margins. All of the column boxes will be the same size. The only thing you can do is add a rule between columns, using the column-rule property, which acts like border. You can also control the gap between columns using the column-gap property, which has a default value of 1em however you can change it to any valid length unit.

See the Pen Smashing Multicol: column styling by Rachel Andrew (@rachelandrew) on CodePen.

That is the basic functionality of multicol. You can take a chunk of content and split it into columns. Content will fill the columns in turn, creating columns in the inline direction. You can control the gaps between columns and add a rule, with the same possible values as border. So far so good, and all of the above is very well supported in browsers and has been for a long time, making this spec very safe to use in terms of backwards compatibility.

There are some further things you might want to consider with your columns, and some potential issues to be aware of when using columns on the web.

Spanning Columns

Sometimes you might like to break some content into columns, but then cause one element to span across the column boxes. Applying the column-span property to a descendent of the multicol container achieves this.

In the example below, I have caused a <blockquote> element to span across my columns. Note that when you do this, the content breaks into a set of boxes above the span, then starts a new set of column boxes below. The content doesn’t jump across the spanned element.

The column-span property is currently being implemented in Firefox and is behind a feature flag.

See the Pen Smashing Multicol: column-span by Rachel Andrew (@rachelandrew) on CodePen.

Be aware that in the current spec, the values for column-span are either all or none. You can’t span just some of the columns, but you can get the kind of layout you might see in a newspaper by combining multicol with other layout methods. In this next example, I have a grid container with two column tracks. The left-hand track is 2fr, the right-hand track 1fr. The article in the left-hand track I have turned into a multicol container with two tracks, it also has a spanning element.

On the right, we have an aside which goes into the second Grid column track. By playing around with the various layout methods available to us, we can figure out exactly which layout method suits the job at hand — don’t be afraid to mix and match!

See the Pen Smashing Multicol: mixing layout methods by Rachel Andrew (@rachelandrew) on CodePen.

Controlling Content Breaks

If you have content containing headings, then you probably want to avoid the situation where a heading ends up as the last thing in a column with the content going into the next column. If you have images with captions then the ideal situation would be for the image and caption to stay as one unit, not becoming split across columns. To deal with these problems CSS has properties to control where the content breaks.

When you split your content into columns, you perform what is known as fragmentation. The same is true if you split your content between pages, such as when you create a stylesheet for a print context. Therefore, multicol is closest to Paged Media than it is to other layout methods on the web. Because of this, for several years the way to control breaks in the content has been to use the page-break- properties which were part of CSS2.1.

  • page-break-before
  • page-break-after
  • page-break-inside

More recently the CSS Fragmentation specification has defined properties for fragmentation which are designed for any fragmented context, the spec includes details for Paged Media, multicol and the stalled Regions spec; Regions also fragments a continuous piece of content. By making these properties generic they can apply to any future fragmented context to, in the same way that the alignment properties from Flexbox were moved into the Box Alignment spec in order that they could be used in Grid and Block layout.

  • break-before
  • break-after
  • break-inside

As an example, I have used break-inside avoid on the <figure> element, to prevent the caption being detached from the image. A supporting browser should keep the figure together even if that causes the columns to look unbalanced.

See the Pen Smashing Multicol: break-inside by Rachel Andrew (@rachelandrew) on CodePen.

Unfortunately, support for these properties in multicol is pretty patchy. Even where supported they should be seen as a suggestion due to the fact that it would be possible to make so many requests while trying to control breaking, that essentially the browser can’t really break anywhere. The spec does define priorities in this case, however it is probably more useful for you to control only the most important cases.

The Problem Of Columns On the Web

One reason why we don’t see multicol used much on the web is the fact that it would be very easy to end up with a reading experience which made the reader scroll in the block dimension. That would mean scrolling up and down vertically for those of us using English or another vertical writing mode. This is not a good reading experience!

If you fix the height of the container, for example by using the viewport unit vh, and there is too much content, then overflow will happen in the inline direction and so you get a horizontal scrollbar instead.

See the Pen Smashing Multicol: overflow columns by Rachel Andrew (@rachelandrew) on CodePen.

Neither of these things are ideal, and making use of multicol on the web is something we need to think about very carefully in terms of the amount of content we might be aiming to flow into our columns.

Block Overflow Columns

For Level 2 of the specification, we are considering how to enable a method by which overflow columns, those which currently end up causing the horizontal scrollbar, could instead be created in the block direction. This would mean that you could have a multicol container with a height, and once the content had made columns which filled that container, a new set of columns would be created below. This would look a little like our spanning example above, however, instead of having a spanner causing the new column boxes to start, it would be the overflow caused by a container with a restriction in the block dimension.

This feature would make multicol far more useful for the web. While we are a little way off right now, you can keep an eye on the issue in the CSS Working Group repo. If you have additional use cases for this feature do post them, it can really help when designing the new feature.

What Is Multicol Useful For Today?

With the current specification, splitting all of your content into columns without consideration for the problems of scrolling isn’t advised. However, there are some cases where multicol is ideal on the web. There are enough uses cases to make it something you should consider when looking at design patterns.

Collapsing Small UI Or Text Elements

Multicol can be useful in any place where you have a small list of items that you want to take up less space. For example a simple listing of checkboxes, or a list of names. Often in these scenarios, the visitor is not reading down one column and then going back to the top of the next, but scanning the content for a checkbox to click or an item to select. Even if you do create a scrolled experience, it may not be an issue.

You can see an example of multicol used in this way by Sander de Jong on the DonarMuseum

Names are arranged into multiple columns on the DonarMuseum website

On DonarMuseum, we can see multicol used to display lists of names. (Image source) (Large preview)

Known Small Amounts Of Content

There are times when we design a site where we know that some piece of content is relatively small, and will fit on the majority of screens without causing unwanted scrolling. I’ve used multicol on Notist presentation pages, for the introduction to a talk.

Andy Clarke designed a lovely example for the Equfund website.

A two-column layout including various content

On the Equfund website, you can see how different HTML elements remain in normal flow while displayed inside columns. (Image source) (Large preview)

To avoid the possibility of very small screens causing scrolling, remember that you can use media queries to check for height as well as width (or in a logical world, block as well as inline). If you only enable columns at a breakpoint which has a min-height large enough for their content, this can save users of very small devices having a poor scrolling experience.

Masonry-Like Display Of Content

Another place where Multiple-column Layout works beautifully is if you want to create a Masonry type of display of content. Multicol is the only layout method that will currently create this kind of layout with unequal height items. Grid would either leave a gap, or stretch the items to make a strict two-dimensional grid.

Veerle Pieters has a beautiful example of using multicol in this way on her inspiration page.

An arrangement of multiple boxes in columns designed by Veerle Pieters

In this design by Veerle Pieters, multicol is used to layout multiple boxes or cards as columns. (Large preview)

Grid And Flexbox Fallbacks

The column- properties can also be used as a fallback for Grid and Flex layout. If you specify one of the properties on a container, then turn that container into a Flex or Grid layout by using display: flex or display: grid any column behavior will be removed. If you have, for example, a cards layout that uses Grid Layout, and the layout would be readable if it ran in columns rather than across the page, you could use multicol as a simple fallback. Browsers that do not support Grid will get the multicol display, those which support Grid will get the Grid Layout.

Don’t Forget Multicol!

Fairly frequently I answer Grid and Flexbox questions where the answer is to not use Grid or Flexbox, but instead to look at Multicol. You probably won’t use it on every site, but when you come across a use case it can be really helpful. Over at MDN there are useful resources for multicol and the related fragmentation properties.

If you have used multicol on a project, perhaps drop a note in the comments, to share other ways in which we can use the feature.

Smashing Editorial

Originally posted here – 

When And How To Use CSS Multi-Column Layout


What Happens When You Create A Flexbox Flex Container?

What Happens When You Create A Flexbox Flex Container?

Rachel Andrew

In a short series of articles, I’m going to spend some time in detailed unpacking of Flexbox — in the same way I have done in the past with grid. We’ll have a look at the things Flexbox was designed for, what it really does well, and why we might not choose it as a layout method. In this article, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.

A Flex Container, Please!

In order to use Flexbox, you need an element that will be the flex container. In your CSS, you use display: flex:

See the Pen Smashing Flexbox Series 1: display: flex; by Rachel Andrew (@rachelandrew) on CodePen.

Let us spend a little while thinking about what display: flex really means. In the Display Module Level 3, each value of display is described as actually being a combination of two things: an inner display model, and an outer display model. When we add display: flex, we are really defining display: block flex. The outer display type of our flex container is block; it acts like a block level element in normal flow. The inner display type is flex, so items directly inside our container will participate in flex layout.

This is something you might never have really thought about but probably understand anyway. The flex container acts like any other block on your page. If you have a paragraph following by a flex container, both of these things behave as we have become accustomed to block elements behaving.

We can also define our container with a value of inline-flex which is like using display: inline flex, i.e. a flex container that acts like an inline level element, with children that participate in flex layout. The children of our inline flex container behave in the same way that children of our block flex container behave; the difference is how the container itself behaves in the overall layout.

See the Pen Smashing Flexbox Series 1: display: inline-flex; by Rachel Andrew (@rachelandrew) on CodePen.

This concept of elements having an outer display type, which defines how they behave as a box on the page (plus an inner display type) dictating how their children behave is quite useful. You can apply this thinking to any box in CSS. How does this element act? How do the children of this element act? The answers relate to their outer and inner display models.

Rows Or Columns?

Once we have defined our flex container, some initial values come into play. Without our adding any extra properties, the flex items display as a row. This happens because the initial value of the flex-direction property is row. If you don’t set it, you get a row.

The flex-direction property is how we set the direction of the main axis. Other values for flex-direction are:

  • column
  • row-reverse
  • column-reverse

With our items in a row, the items are placed with the first item at the start edge of the inline dimension and display in the order that they appear in the source. In the specification, this edge is described as main-start:

main-start is at the beginning of the row

main-start is at the start of the inline dimension (Large preview)

If we use the value column, the items begin to lay out from the start edge of the block dimension and therefore form a column.

Items laid out as a column, main-start is at the top

main-start is the start of the block dimension (Large preview)

When we use row-reverse, the location of main-start and main-end are switched; therefore, the items lay themselves out one after the other ending up in reverse order.

Items start at the end of the row

main-start is at the end of the inline dimension (Large preview)

The value column-reverse does the same thing. It’s important to remember that these values don’t “switch the order of items” although this is what we see happening, they change the place where the flow of items starts: by switching where main-start is. So our items do display in reverse order, but that is because they start laying out at the other end of the container.

It is also important to remember that when this happens, the effect is purely visual. We are asking the items to display themselves starting at the end edge; they are still flowing in the same order and this is the order that your screen reader uses and also the order they can be tabbed through. You should never use row-reverse when what you really want to do is change the order of the items. Make that change in your document source.

The Two Axes Of Flexbox

We have already exposed an important feature of flexbox: the ability to switch the main axis from row to column. This axis switching is why I think that often it is easier to understand things like alignment in Grid Layout first. With Grid, working in two dimensions, you can align on both axes in pretty much the same way. Flexbox is a little trickier because different things happen depending on whether you are working with the main axis, or the cross axis.

We have already encountered the main axis, i.e. the axis that you define as the value of flex-direction. The cross axis is the other dimension. If you have set flex-direction: row, your main axis is along the row, and your cross axis is down the columns. With flex-direction: column, the main axis is down the column and your cross axis along the rows. It is here where we need to explore another important feature of Flexbox, and that is the fact that it is not tied to the physical dimensions of the screen. We don’t talk about a row running from left to right, or a column from top to bottom, because that is not always the case.

Writing Modes

When I described row and column above, I mentioned the block and inline dimensions. This article is written in English, which is a horizontal writing mode. This means that when you ask Flexbox to give you a row, you get a horizontal display of your flex items. In this case, main-start is on the left — the place in which sentences start in English.

If I were working in a right-to-left language such as Arabic, then the start edge would be on the right:

See the Pen Smashing Flexbox Series 1: row with rtl text by Rachel Andrew (@rachelandrew) on CodePen.

The initial values of flexbox mean that if all I do is create a flex container, my items would start on the right and be displayed moving towards the left. The start edge in the inline direction is the place where sentences start in the writing mode you are using.

If you happen to be in a vertical writing mode and ask for a row, your row will run vertically, because that is the way in which rows of text run in a vertical language. You can try this by adding the writing-mode property to your flex container and setting it to the value vertical-lr. Now, when you set flex-direction to row, you get a vertical column of items.

See the Pen Smashing Flexbox Series 1: row with a vertical writing mode by Rachel Andrew (@rachelandrew) on CodePen.

So a row can run horizontally, with a main-start of the left or the right, and also run vertically with main-start at the top. It’s still a flex-direction of row even if our horizontal text accustomed minds find it hard to think of a row running vertically!

To cause the items to lay themselves out in the block dimension, we set the value of flex-direction to column or column-reverse. In English (or in Arabic), we then see the items displaying one on top of the other down the page, starting at the top of the container.

In a Vertical Writing Mode, the Block dimension runs across the page, as this is the direction blocks are laid out in those writing modes. If you ask for a column in vertical-lr, your blocks will run left to right vertically:

See the Pen Smashing Flexbox Series 1: column in vertical-lr writing mode by Rachel Andrew (@rachelandrew) on CodePen.

However, no matter in which direction the blocks are displayed, if you are working with a column then you are working in the block dimension.

Understanding the fact that a row or a column can run in different physical directions is helpful in understanding some of the terminology being used for Grid and Flexbox. We don’t refer to ‘left and right’ or ‘top and bottom’ in Flexbox and Grid because we don’t make any assumption as to the writing mode of our document. All of CSS is becoming more writing mode aware; if you are interested in some other properties and values being implemented to make the rest of CSS behave in this same way, read my article on Logical Properties and Values.

As a summary, remember that:

  • flex-direction: row

    • main axis = inline dimension
    • main-start will be where sentences begin in that writing mode
    • cross axis = block dimension
  • flex-direction: column

    • main axis = block dimension
    • main-start will be where blocks start to lay out in that writing mode
    • cross axis = inline dimension

Initial Alignment

Some other things happen when we apply display: flex. Some initial alignment happens. In a future article in this series, we will take a good look at alignment; however, in our exploration of display: flex, we should look at the initial values that are applied.

Note: It is worth noting that while these alignment properties started life in the Flexbox specification, the Box Alignment specification will ultimately supersede those defined in the Flexbox specification, as explained in the Flexbox specification.

Main-Axis Alignment

The initial value of justify-content is set to flex-start. It is as if our CSS was:

    display: flex;
    justify-content: flex-start;

This is the reason that our flex items line up at the start edge of the flex container. It’s also the reason why when we set row-reverse they switch to the end edge because that edge then becomes the start of the main axis.

When you see an alignment property which begins with justify-, then it applies to the main axis in Flexbox. So justify-content performs main-axis alignment and aligns our items to the start.

The other possible values for justify-content are:

  • flex-end
  • center
  • space-around
  • space-between
  • space-evenly (added in Box Alignment)

These values deal with the distribution of available space in the flex container. This is why the items are moved around, or spaced out. If you add justify-content: space-between, then any available space is shared out between the items. However, this can only happen if there is free space to start with. If you had a tightly packed flex container (with no extra space after all the items had been laid out), then justify-content would do nothing at all.

You can see this if you switch your flex-direction to column. Without a height on the flex container there is no free space, so setting justify-content: space-between won’t achieve anything. If you add a height and make it so that the container is taller than is required to display the items, then the property has an effect:

See the Pen Smashing Flexbox Series 1: column with a height by Rachel Andrew (@rachelandrew) on CodePen.

Cross-Axis Alignment

Items are also aligned on the cross axis with a single line flex container; the alignment that we are performing is to align the boxes against each other in the line. In the next example, one of our boxes has more content in than all the others. Something is telling the other boxes to stretch to the same height. That something is the align-items property, which has an initial value of stretch:

See the Pen Smashing Guide to Layout: clearfix by Rachel Andrew (@rachelandrew) on CodePen.

When you see an alignment property which begins with align- and you are in flexbox, then you are dealing with cross-axis alignment, and align-items aligns the items within the flex line. The other possible values are:

  • flex-start
  • flex-end
  • center
  • baseline

If you do not want the boxes to all stretch to the height of the tallest, then setting align-self: flex-start will cause them all to align to the start edge of the cross axis.

See the Pen Smashing Flexbox Series 1: align-items: flex-start by Rachel Andrew (@rachelandrew) on CodePen.

Initial Values For The Flex Items

Finally, the flex items themselves also have initial values, they are set to:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

This means that our items will not grow by default to fill the available space on the main axis. If flex-grow were set to a positive value, this would cause the items to grow and take up any available space.

The items can shrink, however, as flex-shrink is set to the positive value of 1. This means that if we have a very narrow flex container, then the items will get as small as they can before any overflow happens. This is sensible behavior; in general, we want things to stay inside their boxes and not overflow if there is space to display them.

In order to get the best possible layout by default, flex-basis is set to auto. We will have a proper look at what that means in a future article in this series, however, most of the time you can think of auto as “big enough to fit the content”. What you will see happen, when you have flex items that fill the container, and one of those items has a larger amount of content than the others, the larger item will be given more space.

See the Pen Smashing Flexbox Series 1: initial values of flex items by Rachel Andrew (@rachelandrew) on CodePen.

This is Flexbox’s flexibility in action. With a flex-basis of auto and no sizing applied to the items, the flex items have a base size of the max-content size. This would be the size they would be if they stretched out and did no wrapping whatsoever. Then, space is taken away from each item in proportion, detailed in the following note in the flexbox specification.

“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”

The larger item has less space taken away and so we get the final layout. You can compare the two screenshots below, both taken using the example above. However, in the first screenshot, the third box has a smaller amount of content, and therefore our columns have a more equal distribution of space.

The example with a larger item shows the item taking up more space

The items flex to give the larger item more room (Large preview)

Flexbox here is helping us to end up with a reasonable end result given no other input from the person writing the CSS. Rather than reduce the space evenly and end up with a very tall item with a couple words on each line, it assigns that item more space to lay itself out. Within this kind of behavior is the key to the real use cases for Flexbox. Flexbox is at its best when used to lay sets of things out — along one axis — in a flexible and content aware way. I’m touching on a little of the detail here, but we will take a proper look at these algorithms later in this series.


In this article, I’ve taken the initial values of Flexbox, in order to explain what actually happens when you say display: flex. It’s a surprising amount once you begin to unpack it, and contained within these few properties are many of the key features of flex layouts.

Flex layouts are flexible: they try to make good choices by default about your content — squishing and stretching to get the best readability. Flex layouts are writing mode aware: the directions of row and column relate to the writing mode being used. Flex layouts allow alignment of the items as a group on the main axis, by choosing how space is distributed. They allow alignment of items within their flex line, moving the items on the cross axis in relationship to each other. Importantly, flex layouts understand how big your content is, and try to make good basic decisions in order to display it. In future articles, we will explore these areas in more depth, and consider further exactly when and why we might choose to use Flexbox.

Smashing Editorial


What Happens When You Create A Flexbox Flex Container?

Advanced CSS Layouts With Flexbox and CSS Grid

Full-day workshop • June 28th
This workshop is designed for designers and developers who already have a good working knowledge of HTML and CSS. We will cover a range of CSS methods for achieving layout, from those you are safe to use right now even if you need to support older version of Internet Explorer through to things that while still classed as experimental, are likely to ship in browsers in the coming months.

Link – 

Advanced CSS Layouts With Flexbox and CSS Grid

Web Development Reading List #118: Opera Mini, BPG Format, Accessible Tabs and Flexbox

What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at. — Ed.

Wi-Fi in public places

Today is the Christmas day for many of us around the world and I hope you’re already enjoying the day with your family or friends. This time is often a rare opportunity to relax a bit, avoid emails for a couple of days and not to be disturbed by daily routine, as other people aren’t working either. Before the new year comes up next, there’s a yet another web development reading list, so you won’t get bored over the next few days! ;)

The post Web Development Reading List #118: Opera Mini, BPG Format, Accessible Tabs and Flexbox appeared first on Smashing Magazine.

Read original article: 

Web Development Reading List #118: Opera Mini, BPG Format, Accessible Tabs and Flexbox

Website Layout Tools Compared: Flexbox Vs. Susy

Flexbox has become one of the most popular tools for creating website layouts. Susy is another layout tool that has gained popularity with the Sass community over the last few years.

Website Layout Tools Compared: Flexbox Vs. Susy

Many developers I’ve spoken with are unsure which tool is best for creating layouts for their websites. Some feel that flexbox is powerful enough to handle all of their layout problems. However, they are unsure whether to learn it because of its confusing syntax. Others feel that Susy is much simpler and prefer its simplicity to flexbox.

The post Website Layout Tools Compared: Flexbox Vs. Susy appeared first on Smashing Magazine.

Jump to original: 

Website Layout Tools Compared: Flexbox Vs. Susy

“This One Is Going To Be A Game Changer.” Meet SmashingConf San Francisco 2016

So, do you like challenges? Now, this one is going to smash you alright. Meet SmashingConf San Francisco 2016, packed with smart front-end and UX techniques — CSS/JavaScript architecture, SVG, Flexbox, pattern libraries, performance, UX, interface design, content strategy — to challenge everything about how you design and code — and how to touch someone’s heart with design.

SmashingConf San Francisco

So you know what’s going on in front-end. You’ve been working with pattern libraries and atomic design and Gulp and SMCSS and BEM and HTTP/2 and Flexbox and SVG. What you might not know though is what pitfalls and traps other web designers have encountered in practice — to prevent issues creeping out down the road.

The post “This One Is Going To Be A Game Changer.” Meet SmashingConf San Francisco 2016 appeared first on Smashing Magazine.

View the original here:  

“This One Is Going To Be A Game Changer.” Meet SmashingConf San Francisco 2016

Laying Out A Flexible Future For Web Design With Flexbox Best Practices

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 web-like way. Some elements can be fixed, while others scroll.

See original article: 

Laying Out A Flexible Future For Web Design With Flexbox Best Practices

Laying Out A Flexible Future For Web Design With Flexbox

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.

A Flexible Future For Web Design With Flexbox

Nevertheless, the future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll. The order in which they appear can be independent of the source order. And everything can fit a range of screen sizes, from widescreen TVs to smartphones — and even devices as yet unimagined. Browser support is fantastic (except you-know-who). Yep, it’s a great time to jump into flexbox if you haven’t done so yet.

The post Laying Out A Flexible Future For Web Design With Flexbox appeared first on Smashing Magazine.


Laying Out A Flexible Future For Web Design With Flexbox


Quantity Ordering With CSS

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 price would be the last element in the first row.

You might assume that JavaScript would be the best solution — just loop over the items, and if there are more than three, update the styling. But what if I told you could do it with CSS alone?

Pure CSS Counting

I’ve gone all in on flexbox lately, teaching it right alongside floats as a layout method at our little project called HackerYou, and I have found that students take to it well. The flexbox specification contains properties that enable us to modify markup in new ways. One of these is order, which allows us to modify the presentational order of content without touching the markup or structure.

Used with media queries, order is extremely useful, enabling us to change the content’s order with the viewport size. That got me thinking: Why can’t we change the order of elements according to the amount of content?

Quantity Queries

An idea explored by Lea Verou1, André Luis2 and Heydon Pickering3, quantity queries count the number of sibling elements and apply styles if a certain number are present.

What if we combined quantity queries and the order property to change how content is read according to how much of it there is?

Using Flexbox

Flexbox, or the “Flexible Box Layout Module4,” is a CSS specification that allows for content to be laid out in any direction and for children to be sized to their parent easily. Originally introduced in 2009, flexbox has gone through many changes over the years. However, it is supported5 in all current browsers, with the exception of Internet Explorer 9+.

One of the most significant changes within flexbox is the naming syntax of associated properties and values. Because the specification evolved over years, browser vendors would use the syntax that was being developed at the time. So, using vendor prefixes is recommended to ensure support across legacy browsers.

One recommended tool for managing cross-browser support in CSS is Autoprefixer6, which is typically included in preprocessors and Gulp and Grunt files.

Understanding Order

Before we dig into quantity queries and how they work, we should understand how to use the order property. First, we need to wrap the content with a parent element and apply display: flex to it.

Here’s the HTML:

<div class="container">
  <p class="itemOne">Hello</p>
  <p class="itemTwo">World!</p>

And here’s the CSS:

  display: flex;

See the Pen LVVXxz7 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

By default, elements will appear in their order in the markup. All child elements of a flexbox parent share an order value of 1.

This value is unitless and simply refers to the order of the element relative to the other elements around it. However, we can change the value of an individual element using the order property.

  order: 2;

See the Pen Really Good Work Article 10 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

In the example above, we’ve changed the order of p.itemOne to a value of 2, making it fall after p.itemTwo and thereby changing the presentational order for the user. Note that the markup remains the same, however.

Counting With CSS

Media queries, eh? Such an awesome tool for applying CSS when certain conditions are met. Those conditions could be device type, size, color and more — pretty powerful stuff. But the query applies only to the device that the viewer is using; there is no defined CSS method for querying the amount of content in an element.

If we get creative with existing CSS pseudo-selectors, however, we can build tools that count the number of children in an element and then apply styles accordingly. For this example, let’s use a simple ordered list:

<ul class="ellist">
  <li class="target">6</li>

The magic of counting sibling elements is in the selector below. This example applies styles to elements when four or more are available.

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child 
  // styles go here

See the Pen WvvYyN13 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

Wait, No. That’s Insane!

Yep, that’s the selector. In English, it could be translated as this: “When there are four or more child elements, get the other list items and the first child.”

Let’s break this down. First, the counting:

ul.ellist li:nth-last-child(n+4) 
  // Styles!

This translates as, “Go to the last child and count back four children.” Apply the styles to the fourth element and all elements before it.

Go ahead and experiment by editing the Codepen and changing the selector to a different number.

See the Pen Pqqvqp16 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

So, there it is, counting. If fewer than four siblings are counted, nothing is selected and no styles are applied. We can now modify this selector to select all li elements using the general sibling combinator19.

ul.ellist li:nth-last-child(n+4) ~ li 
  // Styles!

The problem is that this doesn’t select the first child element. We can append another selector to do that:

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child 
  // Styles!

Of course, we can make the selector more agnostic simply by supplying the parent element and letting it choose all of the children. We do this with the * selector.

element > *:nth-last-child(n+4) ~ *,
element *:nth-last-child(n+4):first-child 
  // Styles!

Ordering Based On Quantity

Now that we have explored how to count with CSS selectors and how to use flexbox to order content, let’s mix them together to build a tool that orders elements based on the number of siblings.

Again, we’re trying to make our last element be the third element (i.e. appear as the last element in the first row) when there are more than three siblings.

Let’s apply some CSS for some presentational styling. We’ll apply display: flex to the parent container, which allows us to apply the order property on the child elements. As well, we’ll apply some default styling to the .target element to differentiate it.

  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;

ul.ellist > * 
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;

  color: white;
  background: #2980b9;
  border: 10px solid #3498db;

ul.ellist, ul.ellist > * 
  box-sizing: border-box;

  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;

ul.ellist > * 
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;

ul.ellist .target 
  color: white;
  background: #2980b9;
  border: 10px solid #3498db;

Now that we have a base style to work with, we can create some logic to order our items accordingly. Again, by default, all elements have an order value of 1 and are displayed according to the order in which they appear in the markup.

Using a quantity query, we can count whether there are more than three items.

ul.ellist > *:nth-last-child(n+3) 
  // Styles!

We can then modify our query to select the .target element only if the number of items is met. For now, we’ll apply an order of -1, so that it appears at the beginning of our list.

ul.ellist > *:nth-last-child(n+3) ~ .target 
  order: -1;

Voilà! We’ve just styled an element based on the numbers of siblings it has. Using this code, we can put one element in front of another.

But what if it needs to go between items?

Some Logical Thinking

Here is the problem, in three arguments:

  • By default, all items have an order set to 1. We need the items at the beginning of the list to keep that order value.
  • Our target will be presented at the end of the first row. So, we need the target’s order value to be higher than the ones in the beginning — i.e. 2.
  • We need all items from three onward to have a higher order than our target and lead elements. So, they will have an order value of 3.

How about this?

Because all items have a default value of 1, we don’t need to declare that. Let’s allow our target element to have an order value of 2 via our quantity query, effectively placing it higher than the others.

ul.ellist > *:nth-last-child(n+3) ~ .target 
  order: 2;

Then, using another quantity query that utilizes nth-child(), we will count from the beginning of the list, rather than from the end. Because our .target quantity query is more specific, the last element will be ignored, but all others three and higher will have their order changed.

ul.ellist > *:nth-last-child(n+3) ~ .target 
  order: 2;

ul.ellist > *:nth-child(n+3) 
  order: 3;

Whoa! Let’s Go Over That Again

We counted from the end of a parent element if there were a number of child elements. If there were, we applied some styles to an element of our choice. We then counted from the beginning and applied styles to all elements past that point.

The beautiful part is that if we were to remove elements, the target element would still appear in the correct position.

<ul class="ellist">
  <li class="target">4</li>

The Resulting Task

My first thought when given this task was to use a programming language. Because the website was built on WordPress, I could modify “the loop” to count and inject the element where needed.

However, because I’m building the website for a front-end development school, I wanted to do it with pure CSS and explore the possibilities that flexbox’s order allows.

Below is an example of the resulting page, done entirely with CSS.

See the Pen Quantity Ordering20 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

Using It In The Real World


Quantity queries are a fairly new concept, and writing the selectors can be a bit of a challenge. Nevertheless, the community is embracing the concept and is building tools and writing Sass mixins that can help us write queries effectively. Libraries such as the one by Daniel Guillan23, called a Quantity Queries Mixin24, enable us to write media queries as simple includes.

@include at-least($count)  … 
@include between($first, $last)  … 

A plethora of articles also explain the concept and power behind this. James Steinbach25 wrote a great article on “Using Sass for Quantity Queries26.”


PostCSS is a new tool that allows CSS to be transformed with JavaScript. The current PostCSS ecosystem includes many community-developed plugins, including a Quantity Query27 plugin.

The plugin allows for custom pseudo-selectors to target values within a certain range, at least, or at most.

p:at-least(4)  … 

p:between(4,6)  … 

Browser Support

Currently, support for both CSS pseudo-selectors and flexbox28 is great in modern browsers. If your project targets users on IE 10 and above, you can use quantity queries and flexbox ordering together.

Where to Use It

When building websites, we often use programming languages that allow us to count and modify our content as needed. However, as CSS has improved, we’ve moved away from programming languages into advanced CSS properties.

One example is CSS animations. What was previously possible only through Flash or JavaScript is now achievable with pure CSS, a language for defining the presentation of our content.

Quantity ordering enables us to remove modified loops that count and insert content accordingly, allowing our content to be read semantically.

A great example of the usefulness of quantity ordering would be a news website with advertising. In the markup, all articles are organized together, and the ads are placed at the end. In terms of accessibility, this allows for an uninterrupted flow of content. The ads can then be placed throughout the content, using quantity ordering only on a presentational layer.

See the Pen vOLGPg29 by Drew Minns (@drewminns30211714118) on CodePen31221815129.

While ordering can be used to change the presentational display of elements, for accessibility, it can damage the experience. Be aware of how content flows and how it will be read on accessibility devices.


Quantity queries and quantity ordering are advanced concepts and might be scary for beginners. However, as we move presentational styling away from programming languages and into CSS, we should use these tools more and more.

Even as many members of our industry explore content queries32, we can now use quantity queries to modify the order of content simply by counting.

Excerpt image: Markus Spiske33

(ds, ml, al)


  1. 1 http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
  2. 2 http://andr3.net/blog/post/142
  3. 3 http://alistapart.com/article/quantity-queries-for-css
  4. 4 http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
  5. 5 http://caniuse.com/#search=flex
  6. 6 https://github.com/postcss/autoprefixer
  7. 7 ‘http://codepen.io/drewminns/pen/LVVXxz/’
  8. 8 ‘http://codepen.io/drewminns’
  9. 9 ‘http://codepen.io’
  10. 10 ‘http://codepen.io/drewminns/pen/oXXQBo/’
  11. 11 ‘http://codepen.io/drewminns’
  12. 12 ‘http://codepen.io’
  13. 13 ‘http://codepen.io/drewminns/pen/WvvYyN/’
  14. 14 ‘http://codepen.io/drewminns’
  15. 15 ‘http://codepen.io’
  16. 16 ‘http://codepen.io/drewminns/pen/Pqqvqp/’
  17. 17 ‘http://codepen.io/drewminns’
  18. 18 ‘http://codepen.io’
  19. 19 http://www.w3.org/TR/selectors/#general-sibling-combinators
  20. 20 ‘http://codepen.io/drewminns/pen/waarLQ/’
  21. 21 ‘http://codepen.io/drewminns’
  22. 22 ‘http://codepen.io’
  23. 23 http://www.danielguillan.com/
  24. 24 https://github.com/danielguillan/quantity-queries
  25. 25 http://jamessteinbach.com/
  26. 26 http://www.sitepoint.com/using-sass-quantity-queries/
  27. 27 https://github.com/pascalduez/postcss-quantity-queries
  28. 28 caniuse.com/#search=flexbox
  29. 29 ‘http://codepen.io/drewminns/pen/vOLGPg/’
  30. 30 ‘http://codepen.io/drewminns’
  31. 31 ‘http://codepen.io’
  32. 32 https://github.com/marcj/css-element-queries
  33. 33 https://www.flickr.com/photos/markusspiske/18544440564/in/album-72157644611527928/

The post Quantity Ordering With CSS appeared first on Smashing Magazine.

Taken from:  

Quantity Ordering With CSS

Harnessing Flexbox For Today’s Web Apps

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.
Chris Coyier sums up flexbox nicely: The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

See more here:  

Harnessing Flexbox For Today’s Web Apps