The cool thing is that if you're viewing this example inside one Bootstrap Builder, you can easily play with the flex property values and see how the elements behave. Go ahead, click on the picture above to select the flex parent container. Then, on the design pane, scroll down to the position section. The flex controls are located right below the display drop down.

You’ll see that changing the flex-direction is pretty intuitive. Depending on the value, the elements are stacked as a column or displayed inline as a row. Changing the justify-content drop down influence the position of the elements in that column or row. Now don’t go too wild immediately! Using flexbox is way more fun with a slightly better understanding of the mechanics.

Don’t take me wrong, flexbox is one of the most versatile and intuitive layout systems. However, it performs best when set to a specific purpose like, for example, aligning a series of items within a container. It’s also great for changing the layout direction or even the visual order of elements over different screen widths.

Flexbox is one of the most versatile and intuitive layout systems.

Time to set up the initial flex layout, following which we can get to work on some fun demos and use cases!

A flex layout is created by setting the display property of a container element to flex. This can be any element that contains other elements, from a simple column or container, to a subgrid or list element. The container can be any type of HTML container, a simple <div> or a more semantically labelled element such as a <section> or <nav>. When the flex display value is used, the parent container becomes a flex-container, and all immediate children become flex-items.

Responsive design is a requirement and height changes are very common.

The main characteristic of the flex container is the ability to modify the order, position, alignment, width or height of its children. This allows the designer to use the available space in the best possible way.

As we saw in the example above, even symmetrical perfection can be achieved. True, before flexbox we were able to use margin or padding to vertically center elements within a section. Or at least approach it for a static layout. But keeping multiple elements aligned is a big endeavour, especially if they are not the exact same size.

In addition, we’re living in a multi-device world where responsive design is a requirement and height changes are very common — due to, for example, wrapping text. As soon as that happens we would be entering the trouble zone, chasing height using breakpoints without a real solution to the problem.

In short, cleverly positioning elements within a container is both more powerful and less complicated with flexbox. There are five properties for the flex-container that can be used to influence the way the flex-items are laid out.

The flex-direction property is used to define the direction the flex-items follow in the flex container. The initial function is to tell the flex-items to position as (horizontal) rows or (vertical) columns.

In addition they can be instructed to change their natural order and reverse their position from right-to-left or bottom-to-top.

flex-direction

The design example below illustrates the directional behavior. I dropped three containers in the (single column) of a full-width row. The normal behavior of these block elements would be to stack vertically, but choosing display  flex  for the column and setting the flex-direction to  row  places them nicely next to each other.

Using a width of  100%   these containers would try to take up all the space they can get. However, flexbox tells them to split the available space in 3 (or in whatever number of elements would be placed there) so they fit next to each other.

Want to display the items in a different order? That’s no problem when using flexbox. Simply set the flex-direction to  reversed-row   and you’ll get the result you see below.

The white containers are not only flex-items, they are flex-containers too because they also use the flex display property for arranging the elements inside. For these three flex-containers we are using a different flex-direction:  column . The justify-content property is used to center the items within the container.

The elements inside the container get some extra styles. If you using the slider, you'll notice the paragraphs are hidden when viewed below the 545px breakpoint. This is done in the design pane by setting the display to none. At larger screen sizes, to make them come back into view, the display is set to block.

I also added a max-width. In theory this would not be needed since the margin takes care of it all… Unfortunately, there’s a bug in IE where paragraph text in a flex-container does not wrap. The max-width is used to battle the issue.

A real flexbox design case

The project design went really smooth up until now. And that’s exactly how it is for demos that explain how flexbox works in isolated settings using stable, single-size, placeholders. But we’re dealing with a real design case here. The design has to look good, we’re using real elements, combinations of elements, and the paragraphs have different text lengths. And that’s how we find how flexbox really works!

Let’s look a bit deeper into the width settings for the container elements. Giving them a width of 100% and using the flexbox settings as explained above, gives each of them an equal amount of the available space. But if we change the width to  auto , the width of each container varies. Without content inside they are all small, only as wide as defined by a default minimum width setting. With the exact same content, they all get the exact same width.

Things get interesting when different content like, for example, different paragraph lengths, is used in the same type of container. Using  auto   values for the width and flex-basis (we’ll get back to this property later), the flex-item is automatically sized based on the its content. In our example, the only difference is the text length of the three paragraphs. This causes the containers with more text to be wider than the containers with less text. Please note that in order to demonstrate this the max-width had to be removed from the paragraph. That also means that if you’re reading this in IE, the bug I referenced above will pop up causing the text to overlap.

Now, is this behaviour desirable? Looking at the example below, this can definitely be neat. However, with the different container sizes the images will resize differently at smaller widths. And although the containers maintain the same height when that happens, the horizontal alignment of the content is not maintained, a likely undesirable consequence for most design cases.

The above already illustrates the powerful layout design possibilities flexbox offers. Independent of size container or element size, flex-items can be placed on a single line. This default behavior, always fitting all items onto one line can be influenced as well. That’s where the flex-wrap property comes into play.

flex-wrap

The flex-wrap property can be used to position a series of items on a single, or on multiple lines. If there is not enough space available for the natural size of the elements, setting this property to  wrap   will place items that do not fit on the next line.

The flex-container (column) below contains two blockquote elements. Yep, they are vertically aligned, but that is something we will talk about related to other flex properties. The point here is that when using  wrap   (with  no-wrap   being the default) as value for the flex-wrap property, these quotes will stack instead of shrink when there’s not enough room in the container to display them next to each other.

If you’re following along within a responsive web app this is easy to test: select one of quotes and on the design pane, increase the max-width to   400px . With the row never being wider than 1200px this will make them stack.

Using the width slider and increasing the viewport width to about 850px will have the same effect. If you’re reading this in a browser you can squish the windows to make them stack, or expand the browser to see the blocks inline.

Natural sizes come in many forms

Both the width of an element and the available space are influenced by many parameters. Widths, heights, max-widths, paddings, and margins, they all play a role. As does the content itself.

If the width is defined in pixels, all is clear. However, in a responsive design widths are mostly relative, often with a width defined beyond which the element should not grow anymore. One would expect the browser to use the max-width value as the ‘maximum natural size’ and most of them do. This time it is Safari, or more precisely the WebKit rendering engine, that presents us with some unexpected behavior.

Whenever a width has been defined for a flex-item, WebKit uses it for calculating the remaining available space, ignoring any maximum width that may have been applied. An element with a 100% width and max-width of 400px will never be wider than the specified 400px pixel size. Still WebKit will take the 100%, inadvertently concluding that no space is available and stack the elements.

The work around? Not specifying a width! Using width: auto  will do wonders. And if automatic resizing based on the content is not desirable, the max-width property can be used to restrain the content. Something that is needed on paragraphs to make IE behave anyway. Using the flex-basis property could be another option for preventing the resizing, we’ll look into that later. Now let’s see what options we have to distribute the flex-items over the horizontal or vertical space.

justify-content

This property can be used to distribute the flex-items over the space defined in the flex-direction. If the flex-direction is set to  row , the justify-content control determines how the elements are spaced out horizontally.

Similarly, when the flex-direction is used to create columns, this property determines how the elements are spaced out horizontally.

Let’s add some fresh images and see how the different values influence the positioning of the three containers. To better illustrate this (and save some room) I constrained their width to 180px . The elements, picture and header, were made smaller. The paragraph has been removed.

The default value for the justify-content property is   flex-start . The first example shows this, the items are stacked towards the side where the flex-direction starts. As is seen on the second example, when the flex-direction changes, so will the position where the items start.

Use the slider to adjust the display size to see how the elements position based on the justification property.

The opposite of the default value is  flex-end  You can easily imagine how that will work, or change the value for the design example above.

There are three other values for this property. The  center  value centers the flex-items along the axis of the flex-direction. Elements can also be evenly distributed across the available space using  space-between . The first item is placed where it would be originally when using flex-start. The last item is placed at the end of the axis and all other items are positioned evenly in-between.

The  space-around  value creates equal space around the elements. Since there's equal space on both sides of the flex-items, the first and last item will be closer to the container edges than the items are to each other.

The three examples below illustrate this using the  row   value as flex-direction.

To accomplish this for example below I used a maximum-height on the pictures in the first and last containers. Without flexbox this would make these white containers shrink as the height is usually determined by its contents. In this case, with the default value  stretch  for the align-items property, the containers will keep filling the vertical space created by the larger middle container. A really handy feature indeed, thanks flexbox!

The second and third example show what happens when the value is changed to  flex-start  and  flex-end  respectively.

The containers stop stretching. They take the height of their contents, and position themselves in the remaining vertical space created by the larger middle container.

The flex-items can also be vertically centered using the  center  value. The very first example of this guide uses the center values for both axes (justify-content and align-items) to create the sweet symmetrical effect on top of the background image.

The last property that can be used here is   baseline . This could be useful when the different flex-items would use different fonts or font-sizes. Using baseline as value, the items would be aligned according to the baseline of the font.

Overall the align-items property works in a similar way to the justify-content property, only on the other axis than specified by the flex-direction. This means that if you change the flex-direction, the justify-content and align-items controls switch the axis they were working on. Something to take into account!

align-content

When there is more than a single line — more than a single column or row — of items, this property can be used to distribute the space between the lines. Additional lines are created when there’s not enough space for the flex-items and they are told not to shrink using the  no-wrap  property.

Let’s create a little playground by reusing the quote section that we looked at earlier. I extended it a bit by adding two more elements and using real customer quotes for (Responsive Bootstrap Builder) that by nature have varying text lengths.

I also removed the width constraint from the row to give the quotes more room on large monitors. The column (flex-container) now has a minimum height, giving us more vertical room to play with.

The very first thing that comes to mind when looking at that section is how awesome Responsive Bootstrap Builder easy flexbox makes it to align elements with varying height. No matter the what display width is, the items will line up (and neatly wrap) when space is limited. There’s a little catch here though...

In the example above I am using  flex-end  for the align-items control and  center  for center for align-content. This vertically centers the boxes and aligns the bottom borders in Firefox, Safari and Internet Explorer. Chrome does this differently by positionin the elements at the bottom (flex-end) of the flex-container.

Up to now we have been looking at the layout variations using property controls and values for the flex-container. An additional number of display possibilities can be created by defining flexbox rules for the (direct) children in the flex-container.

Reordering child-elements

Initially the elements inside a flex-container are displayed in the order they were added. We already saw that this order can be reversed using the flex-direction property on the flex-container.

The order property available for the flex-items gives additional control over the order in which the elements are presented. Reusing the example with the horizontally centered items, we can switch the position of the third and second flex-item.

All we need for that is to assign order values. Using a value of   1  for the last flex-item and  2   for the middle item, will make them swap positions. All integer values are allowed here. Giving the third item a value of   -1  would make it the first placed element.

Since these items share the same clase, values for flexbox items should be assigned to a different selector. A good rule of thumb is to use an additional class if the value is shared between a subset of the flex-items, and to add an ID if the value is specific to only one flex element. Order numbers are generally unique so I assigned them to separate IDs.

On the Responsive Site Designer page, for example, we talk about increasing website performance using the <picture> element. Following that we discuss adjusting layouts for optimal viewing experience on any screen. It would be weird if the two text sections would follow each other on mobile devices; the separation of the two features would not be visually clear to the reader.

To battle that we are "pushing and pulling" the columns. This can very well be done both manually and (using the drop downs) in RFF, but requires some conceptual layout thinking. Flexbox makes this way smoother and easier.

The design below uses a similar layout as just discussed.

This would not only have been unappealing from an aesthetic perspective, it could also be potentially confusing for the reader. To change the order at the breakpoint I added a class to the second image and assigned an order value of  -1 .

Screen readers and element order

Please note that screen readers will continue to follow the natural order of the elements. If we want the screen readers to follow the image+text → image+text order, we should add the elements in that order. Then, on wide screens, we reverse the order of the image and text container to create the same visual effect as in the current design.

Influencing element size with flexbox

The ability to calculate and distribute space is one the greatest strengths of flexbox. The flex grow, shrink and basis properties can be used to influence how the available space in the parent (flex) container is allocated between the flex-items.

The flex-basis CSS property specifies the initial size of a flex item. The default value is  auto   which instructs the browser to use the currently calculated width or height. In our examples where each of the flex-items (the white containers) used the same width (100%), the space gets distributed equally.

A specific initial size can be defined as well. The value can be set in pixels, ems or a percentage, etc. Bootstrap Builder includes a unit switcher so you can choose the best measurement option for any design challenege you are working on.

In the example below I gave each of the white containers an ID and assigned individual values for the flex-basis. The middle container is instructed to use  40%  of the space, whereas the other two containers each get  15% . This means that 30% of the space is left empty….but only as long as flex-grow is set to  0 !

Please note that I changed the percentages for larger screens to 15%, 40%, 15%.

The flex-grow property determines what will happen with any remaining empty space. When changing the flex-grow value to  1   for flex-item-1 it will take up all the space that was left. This makes the element 45% (15% + 30%) of the column width. (Minus any allocated margin or padding.)

If the flex-grow for item-3 is set to  1   as well, the leftover space is equally distributed between both items. This is illustrated in the example below.

The flex-grow is not relative to other items. An element with flex-grow of 4 will not always be twice the size of an item with a flex-grow of 2. Increasing the flex-grow for an item just means that the amount of remaining space it receives will be increased.

Increasing, for example, the value to   2  for the first item, would give it twice as much of the leftover space as the last item. And so on.

The flex-shrink property works in a similar way. It determines which of the items needs to lose most of its size to compensate for any missing space (when the items are wider than the parent container).

It will be clear that the flex-grow (and shrink for that matter) will be less useful in the context of a fluid percentage based layout. I can see specific design cases where it could come in handy to have a certain item grow (and shrink) automatically from an initial situation where they are all sized equally. Right now this can be done by changing the values at a breakpoint, but it’s a little less automatic.

Maintaining horizontal alignment

We already learned that Flexbox can be used to create cards of the exact same height, even if the contents within the cards differ. Keeping action buttons or links horizontally aligned underneath a text section, has always been one of the other challenges when using flexible layouts.

Even with similar text lengths sentences of one section would wrap before the other sections. This then would push the items underneath down, before they would get pushed down in the other sections.

The example below shows three sections, or ‘cards’ as they are often called. The images are the same size, the headings are the same, as well as the paragraph styles. The only difference is the text length of each paragraph.

It is a rather significant difference. Yet, the action buttons are perfectly aligned with each other. This happens because of two reasons. First, the cards (containers) with less content stretch as much is needed to have the same height as the container with the most content. Secondly, the paragraphs are instructed to take up any remaining available space that is created because of the stretching.

Instructing an element to take up remaining space is done through the flex-grow property. With a value of  1 — and an implied value of zero for the other elements — the paragraph is greedy and consumes all left-over space. With a background applied to the paragraph this would have been visible.

If you are reading this guide in Responsive Bootstrap Builder,  I invite you to apply that background to the paragraph and look at the effect. Another useful exercise would be to remove the   flex-grow   class from the first (or last) paragraph. The flex-growth is tied to this selector and without it, the button will immediately move back up right under the text.

The flex-grow (and its counterpart flex-shrink) property might take a little to get used, but they can be very powerful allies in a document where element and layout dimensions changed based upon available display width. As we touched upon earlier, a flex-grow value of 2 for an element means it can take up twice as much of the remaining space as elements with a value of 1. Can you imagine the possibilities?

align-self

The alignment specified by align-items on a parent level can be overridden for individual flex items. In the example below the first item is displayed according to the align-items: flex-start  rule defined by the parent.

The second items get an align-self: center   rule specified on the ID selector. The third item is told to position at the bottom of the container using flex-end.

The vertical space that is needed for this design example is created by giving the parent container a minimum height.