Flexbox: Still Widely Misunderstood

Abstract:

Flexbox is commonly used in UI layouts on the web. Margins can be used to space items around. Nested flexboxes are achievable; as we will see later on, flex properties can be applied to descendents allowing for flex nesting.

Browser Support in 2012:

IE 11+, Firefox 22+, Chrome 21+, Safari 6+, iOS 7+ (4S), Android 4.4 (KitKat)

Browser Support in 2016:

IE 11, 13, 14, Firefox 47-51, Chrome 29-55, Safari 9.1 -TP, iOS 9.2-9.3, Android 4.4-51

As you can see in the impromptu table above, Flexbox support is growing strong. So let’s dive in and find out why it’s still such a widely misunderstood portion of CSS.

Q: First of all, how do I use Flexbox for progressive enhancement?

A: Well, for progressive enhancement, you might already be employing floats, clears or table-cell, or even Bootstrap framework to get the job done. The good news is that flexbox CSS can simply be placed above your existing code to enhance it progressively. Let me show you what I mean:

E.g.: Say you want a responsive container for a large image on your blog post, and you always want it floated left.

Code Sample: This code is before adding Flexbox code:


.img-container-float-left{
display:block;
float:left;
margin:0em auto;
margin-top:10%;
position:relative;
width:33%;
}

Since we want to enhance the above code progressively, we just need to insert our flex code above the existing LOCs as follows:


.img-container-float-left{
display:flex;
display:block;
float:left;
margin:0em auto;
margin-top:10%;
position:relative;
width:33%;
}

Now we have applied display:flex directly above display:block.

The implications is that browsers that don’t have flex support will ignore the display:flex and continue to use display block as usual. By inserting this one line of code we have progressively enhanced each and every instance of our responsive float left image, but there’s more.

With bootstrap, you may be familiar with specifying how many columns a given element will span given a particular breakpoint. E.g. .col-md-4 .col-xs-6 will span four columns on medium size viewports and it will span 6 columns on an extra small device.

What if we want to declare a proportion of our container for our floating image example code above?

Now we need to use the flex property on the actual image element to achieve that and another implication is that the image will be displayed block once we set the flex property on. Let’s take a look:


div.img-container-float-left > img{
flex: 0 0 30%; /* .col-md-4 implies 4 out of 12 columns. approximately 30% */
}

flex: 0 0 30%;

The first parameter is called grow. It determines by how much this item can expand.

The second parameter is called shrink. It determines by how much this item can shrink.

The third parameter is called basis. This indicates the default width, or height. The width or height is determined by the flex-direction of its parent. So, if an item’s parent’s flex-direction is set to row then the basis is referring to it width. Conversely, if an item’s parent’s flex-direction is set to column then its basis always refers to its height.

Nested Flexboxes:

Rule #1: Only children become flex items, not all descendants.

Rule #2: Forget Rule #1, because you can set display:flex on descendants too!

Following will be a code sample:

Taking advantage of variable space

Flexbox is great for this sort of micro-layout stuff. Managing the sizing and spacing of items within a component or module…”

“…Where you have a component that sometimes has room for its sub-items to sit side-by-sid and sometimes needs to put them in a stack without you having to figure out at what point that happens (resorting to media queries)…Flexbox is great for aligning stuff, especially shifting content in responsive web design.” – Zoe M. Gillenwater

References:

1. Zoe M. Gillenwater: Enhancing Responsiveness With Flexbox
2. DevTips: CSS FlexBox Essentials
3. CodePen FlexBox Sample

Author: Anonymous

General Manager of Qingdao Saint John IT Co., Ltd.

Leave a Reply