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)