The use of flex layout to commemorate the first mobile website development and flex Layout

The use of flex layout to commemorate the first mobile website development and flex Layout

I have been focusing on the development of PC websites and have never been familiar with mobile websites. Today, the coincidence is also the company's business needs, and I have learned the flex layout before, so I will practice it together. There are still many problems encountered, mainly about flex layout.

 

Flex layout is the content in css3, a new layout method, also called elastic layout, mainly to replace inline-bolck and float for the total layout. Of course, these two la s have their own advantages. After all, they have their own reasons.

 

The history process is box --> flexbox --> flex

 

Because Google is debugging, we naturally assume that browsers on mobile phones support html5 + css3, so there is a version.

1 display: flex; 2 justify-content: space-between; 3 align-items: center;

And so on.

Testing websites in http://www.responsinator.com/etc.

 

The layout of Apple and Android is messy. Later, I learned that a prefix is required for running on apple, because browsers are all in the-webkit-kernel, mainly because standardization has not been implemented, and they are all private attributes. So I wrote the following code:

display: -webkit-flex; display: flex;-webkit-justify-content:space-between; justify-content: space-between; -webkit-align-items:center;align-items:center;

Well, Apple is doing quite well. I use 4, which is acceptable except for the small screen.

On Android, the layout of the company's Android devices has remained unchanged. Generally, the testing machines are near-recently used. The longest time is also the machine 1-2 years ago. Later, I realized that it was not to identify the flex layout at all. I had to use box (that is, the syntax earlier) to solve the problem, and I got the following statement:

 1 .display_flex(){ 2     display: -webkit-box; 3     display: -webkit-flex; 4     display: flex; 5 } 6 .justify(){ 7      -webkit-justify-content: space-between; 8     -webkit-box-pack:justify; 9     justify-content: space-between;   10 }11 .justify(@ju)12 {13     -webkit-justify-content: @ju;14     -webkit-box-pack:@ju;15     justify-content: @ju;   16 }17 18 .align(@align)19 {20     -webkit-box-align:@align;21     -webkit-align-items: @align;22     align-items: @align;    23 }24 .flex-flow-column(){25     -webkit-box-orient:block-axis;26     -webkit-flex-flow: column nowrap;  27     flex-flow: column nowrap;  28 }29 .flex(@f){30     -webkit-box-flex:@f;31     -webkit-flex: @f;   32     flex: @f;33 }

Note: This is less (I have not learned very well)

However, it is a pity that the new flex has a feature called "exceeding the automatic line feed". The box also has similar attributes, but none of the browsers support this feature, therefore, you can only choose other la S (such as the float mentioned above.

 

Summary:

Flex layout is basically considering the kernel, PC is not very recommended, because most of the domestic to be compatible with the IE7-8, can be considered in the Mobile End to use (after all, only Android and Apple ). All in all, this layout is quite good and necessary for learning. html5 + css3, as they said, will be the mainstream direction in the future.

 

Please kindly advise if you have any better solutions. Thank you.

 

Referenced materials:

The http://www.w3cplus.com/css3/using-flexbox.html (old box)

The http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (new flex)