How to use flex elegantly on mobile devices in 2017

Those who have worked on mobile terminals know that mobile terminal layout is too difficult. There are too many terminals, and traditional layout methods are no longer able to cope with them. Various new layout methods have been invented.

Before flex, traditional layouts included flow layout (which is the default method), absolute positioning layout, elastic layout (em), and floating layout. Floating layout was not designed for layout and was a bit cumbersome to use.

2009 was an extraordinary year for the front-end. HTML5 was finalized, ES5.1 was released, and Flex came into being. It was born responsive, designed for layout, and very simple to use.

However, ideals are full, and reality is very skinny. Flex has changed its specifications three times, and browsers implement it differently. There are all kinds of pitfalls. This article will summarize the best practices and experiences of using Flex on mobile devices in 2017.

compatibility

In September 2017, if you look at the compatibility of flex now, you can find that most of them are green

The red arrows in the above picture represent the browsers we should be compatible with. In China, the share of UC and QQ browsers cannot be ignored. The 1 2 3 in the above picture actually represents the three versions of flex syntax. Flex has 2009 version syntax, 2011 version syntax and standard syntax. The yellow square in the upper right corner means that the -webkit- prefix needs to be added.

To summarize the above figure, the compatibility required by the mobile terminal is as follows:

Let's take a look at the statistics of mobile devices given by Baidu, which are Android and iOS. You can find that it is now necessary to be compatible with Android 4.1+ and IOS7+. Here are the data given by Baidu. Of course, you should determine the compatibility based on the statistics of your own products.

To summarize the best practices throughout this article, the compatibility targets are Android 4.1+, IOS7+, UC and QQ browsers

Attribute comparison

From the above goals and caniuse, it is easy to conclude that we need to write both 09 and standard versions of the syntax. Only when the attributes exist in both versions of the syntax can they be used. The following is a comparison of the two versions of the syntax. Note that this is not a grammar guide. For a grammar guide, please see the recommended materials at the end.

Container properties

Container properties include:

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Project Properties

Project properties include:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Mining experience

Generally speaking, as long as the 09 version of the syntax has the corresponding function, it can be used, but there are still some pitfalls on the mobile terminal, which makes some attributes unusable

justify-content: space-around cannot be used because the old syntax does not have it. However, it can be simulated using space-between + container padding

flex-wrap: wrap cannot be used. The corresponding old syntax box-lines: mutiple is not supported by most browsers, which means that lines cannot be broken.

When the uc span inline element is used as a child, the display must be set to block. It is best to use a block-level element directly.

Actual Combat

Having said so much, here is a standard way to write a flex attribute.

 webkit前缀09版webkit前缀标准版标准版

For example, display: flex should be written like this:

 display : -webkit-box ; display : -webkit-flex ; display : flex ;

Some students must say this is too troublesome. Is there any simple way? There is indeed a total of three ways. Thank you seniors

The first is the editor plugin. There is a plugin called autoprefix, which can be installed in sublime. You only need to write the standard attribute and then press the shortcut key to automatically fill in the prefix attribute. This method is the simplest to use, but it will be difficult to maintain later. For example, what if the 09 version syntax is no longer needed one day? ? ? Change them one by one, o(╯□╰)o

The second type is the preprocessor mixin. If you have used less or sass, you must know mixin. The following takes less 2.x as an example. Sass is similar.

 .display-flex ( @display : flex ) { & when ( @ display = flex ) { display : - webkit - box ; } & when ( @ display = inline - flex ) { display : - webkit - inline - box ; } display : e ( "-webkit-@{display}" ); display : @ display ; } .flex-direction ( @direction ) { & when ( @ direction = row ) { - webkit - box - orient : horizontal ; - webkit - box - direction : normal ; } & when ( @ direction = row - reverse ) { - webkit - box - orient : horizontal ; - webkit - box - direction : reverse ; } & when ( @ direction = column ) { - webkit - box - orient : vertical ; - webkit - box - direction : normal ; } & when ( @ direction = column - reverse ) { - webkit - box - orient : vertical ; - webkit - box - direction : reverse ; } - webkit - flex - direction : @ direction ; flex - direction : @ direction ; } .flex-wrap ( @wrap ) { & when ( @ wrap = nowrap ) { - webkit - box - lines : single ; } & when ( @ wrap = wrap ) { - webkit - box - lines : multiple ; } - webkit - flex - wrap : @ wrap ; flex - wrap : @ wrap ; } .justify-content ( @justify -content ) { & when ( @ justify - content = flex - start ) { - webkit - box - pack : start ; } & when ( @ justify - content = flex - end ) { - webkit - box - pack : end ; } & when ( @ justify - content = center ) { - webkit - box - pack : center ; } & when ( @ justify - content = space - between ) { - webkit - box - pack : justify ; } - webkit - justify - content : @ justify - content ; justify - content : @ justify - content ; } .align-items ( @align -items ) { & when ( @ align - items = flex - start ) { - webkit - box - align : start ; } & when ( @ align - items = flex - end ) { - webkit - box - align : end ; } & when ( @ align - items = center ) { - webkit - box - align : center ; } & when ( @ align - items = baseline ) { - webkit - box - align : baseline ; } & when ( @ align - items = stretch ) { - webkit - box - align : stretch ; } - webkit - align - items : @ align - items ; align - items : @ align - items ; } .order ( @order ) { - webkit - box - ordinal - group : @ order ; - webkit - order : @ order ; order : @ order ; } .flex ( @flex ) { - webkit - box - flex : @ flex ; - webkit - flex : @ flex ; flex : @ flex ; }

You only need one line to use it.

 .container { . display - flex ; . flex - direction ( row ); . justify - content ( center ); }

The result of compiling the above code less is as follows

 .container { display : - webkit - box ; display : - webkit - flex ; display : flex ; - webkit - box - orient : horizontal ; - webkit - box - direction : normal ; - webkit - flex - direction : row ; flex - direction : row ; - webkit - box - pack : center ; - webkit - justify - content : center ; justify - content : center ; }

Some students said it was so troublesome, I don’t want to write it? In fact, someone should have already written it, such as compass, you can refer to it

The premise of this method is that the CSS preprocessor has been used, and the maintainability is better than the first method; but in my experience, in fact, most of the mixins of the project may not be maintained by anyone. For example, the prefix version may not be needed one day, but no one will necessarily update it.

The third type is the CSS postprocessor. In fact, since the advent of postcss, the job of automatically adding prefixes should be done by postcss. With this plug-in, we only need to configure the browser version to be compatible. The postprocessor will automatically help you add prefixes. Recently, Babel has also released a similar babel-env

You can use the fis-postprocessor-autoprefixer plugin in fis, which I introduced in my previous article "Summary of the Redesign of the Experience Wireless Steps Page"

You can use postcss-loader in webpack

Finally, I can have fun with browser prefixes^_^

Here is a little scientific knowledge: the experimental properties behind CSS will no longer be enabled by adding prefixes, but will be displayed through the browser settings, because the prefix method is not elegant enough. . . The blame is mainly on the front-end developers, because we only write webkit prefixes and don’t write standard properties, o(╯□╰)o

Summarize

I hope this article can help you use flex better and avoid pitfalls. Now you can use flex freely on mobile terminals, but not on PC terminals, IE8... If there is no compatibility issue, then come and use this useful layout method.

Finally, I strongly recommend everyone to read Teacher Damo's "Graphical CSS3", which is the best book I have ever seen about CSS3.