Flexbox Layouts

Tricks & Tips

Flexbox for many, is a new and exciting way of creating CSS layouts, but it is not without its problems, especially if one must 'simulate' flex-wrap. We have illustrated a few methods of using flexbox, but remember one can use flexbox in combination with traditional CSS layout methods, and flexbox may not always be the best layout method to use.

GENERAL INFO -

Download Flexbox Properties List

IE9 & below:

These have no flexbox support, and the polyfill usage creates its own problems. Windows 7 mobile usage is so low that it no longer even shows in usage statistics, so only the desktop versions require consideration when creating fallback layout styles. I would also recommend the use of IECC's to link to any fallback CSS, otherwise the CSS will become difficult to read and apply correctly.

Flex-wrap:

Imitate by splitting items into groups, then use nth-of-type(), Or containing each 'group' within the element used to apply the flexbox container. Alternatively, use multiple 'class' names and control 'wrapping' by use of 'class' names. Remember also that at some point rows would become columns, so consider creating as columns if your layout will permit.

Other info:

Important - if a width property is used and a flex elements width is set using the flex shorthand or flex-basis unexpected element widths are created across the various browsers. This also applies when changing flex properties using JavaScript.

iOS devices:

At the time of writing it is rumored that iOS 7 will support the latest syntax. If the -webkit- prefix is required is as yet unknown.

Notes on flex box:

Check any menu creation widgets or extensions thoroughly for unexpected behavior as many that apply styles via JavaScript or jQuery, do NOT work correctly, (this may also apply to other 'scripted' solutions).

CSS transforms & transitions:

Check any usage of these as they may not behave as expected. Child elements may expand to accommodate any resizing or changes to the position of transformed elements, causing the layout to 'ref low'.

Styling flexbox child elements:

Even though floats, clear & multi-column layouts cannot be used with flexbox elements themselves, they CAN be used within child elements. One can float an image or apply any other CSS style within a child element. Also styles such as box-shadow and border-radius can be applied to style the child elements 'look', (and the flexbox container).

Multi-column layouts:

If you insert an image inside a multi-column layout the browser may 'split' the image display between the columns if it falls on a column flow change. Use the CSS pseudo-elements 'break-before/after' to control this, these may also be used to control text flow, (e.g. by applying them to a header) in future.

Newer browsers also support the 'column-span: all'.

Using modernizer:

If you intend to use modernizer for detection of flexbox support, there are a number of things you must be aware of -

TRICKS & TIPS:

The media-query and @support rules.

Note: Release versions of both Chrome and Firefox, will both have support for the @support rule by the end of July 2013. Opera is adopting the new Chrome 'Bling' engine, so will also have support by this time. As for IE this browser should have support in IE11. For flexbox purposes though we currently only require support in Firefox and Chrome.

If you look at the CSS in the templates you will see - @media (-webkit-min-device-pixel-ratio: 0) { CSS here... } So why the media-query, and why '0'?

This is being used as a means of simulating the @support rule in order to help in targeting the older webkit browsers.

That's the simple explanation, now the complete reason.

The media-query is required because Safari, Android and iOS devices do not support the flex-wrap property, and to 'simplify' the reading of the CSS all rules for these browsers and devices should be placed within this media-query.

Another reason for using the media-query, '-webkit-min-device-pixel-ratio: 0' is that this property is recognized by Safari, Android and iOS, thus targeting one browser and all devices that do not have support for the flex-wrap property, and it also targeted a few of the budget Android devices I found that also did not recognize '-webkit-min-device-pixel-ratio: 1'.

The @support rule:

The use of an @support rule in the css code targeting no support for the flex-wrap property, ensures that it will only be applied to Firefox. This is because, of the browsers that recognize @support only Firefox currently has no flex-wrap support, (and once Firefox does have support the rule will be ignored).

Info: Flex-wrap support was originally planed for Firefox v22, but was not included. @supports not (flex-wrap: wrap) { Firefox specific css code here... }

Notes on @support:

@supports (flex-wrap: wrap) { Flex-wrap supporting specific css code here... }

One can use the above @support rules anywhere in ones CSS code, and the use is not limited to 'single' once per style-sheet use. The @support can also be used within a media-query. Use them anywhere in your CSS that you wish, and as many times as you wish, and not just for 'flexbox' properties.

@support can be used as an alternative to feature detection scripts. Also do not forget that, 'not', 'and', 'or' can be used to provide conditional @support rules, ('or' is a simple ',' comma).

Resetting values for Chrome:

Inside the media-query targeting the old 2009 syntax browsers and devices, it will often be necessary to change margin, height and other values. A simple method of resetting the values for Chrome is to use the keyword 'initial', followed by using the property values required. e.g.

margin: initial;
margin: 1em 2em;

Strange behavior with unordered and ordered lists:

If you insert an ordered or unordered list inside a flexbox layout that has the flex-direction set to 'column', (2009 = 'vertical') you will see some or all of the list items displayed as an unbroken row, and not as a column as one would normally expect.

To correct for this apply a 'flexbox' layout to the ordered/unordered list, (ul/ol) then a 'flex' property to the list items, (li).

ul, ol {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}

ul li, ol li {
height: auto;
-webkit-box-flex: 3;
-webkit-flex: 3 3 auto;
-ms-flex: 3 3 auto;
flex: 3 3 auto;
}

CSS Pseudo-classes:

selector:pseudo-class { property: value; } Typical values for use with flexbox elements -

Many of the above will help in targeting specific elements, or a range of elements, and are especially useful when 'simulating' flex-wrap for none supporting browsers and devices.

For examples of the use of pseudo-classes examine the @media rules in the templates on this site.

For more info, see - https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Non supporting flex-flow browser & devices:

Until all browsers and devices offer support for the flex-flow property it will be necessary to 'simulate' this property, (when possible) or provide an altenative flexbox layout -

To help illustrate how you can compensated for this lack of flex-flow, we have used two possible methods that you may like to try.

The 'lightbox' template uses the :nth-of-type() psuedo-class as its method, and the 'shopping' template uses a device/browser targeted method.

If you wish to read about these two alternatives you can view or download the pdf file via this link - Fixing flex-flow.pdf

Learn how to create Layouts in Flexbox using the resources in this site & submit your own design for others to use and spread the word for flexbox usage.

Submit your Designs to flexboxlayouts@gmail.com

  1. The Zipped file should contain an explaination of how you used flexbox for the design.
  2. Please provide the name(e.g Lightbox by Paula) you want on the design and the link it will open up.
  3. You can also Submit Video Tutorials on Flex box.