Use of flex layouts to commemorate the first development of mobile websites

has been focused on the development of the PC website, has not touched the mobile site, in today's coincidence is also the company's business needs, and before learning the layout of flex, and then practice. The problem is still a lot of, mainly talk about the flex layout.

Flex layout is the content of CSS3, a new layout, also known as elastic layout, mainly to replace Inline-bolck and float as the general layout. Of course, these two layouts still have their own advantages, after all, there is a reason for him.

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

Because it is in Google debugging, so it is reasonable to think that the browser on the phone is supporting HTML5+CSS3, so there is a version

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

Wait a minute

In the http://www.responsinator.com/and other testing site was very satisfied with

Get the real machine test, regardless of Apple or Android layout all messed up. Later only to know that running on the apple need to prefix, because the browser is-webkit-kernel, mainly because it has not been standardized, are private properties, so the following wording

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

Well, the apples were pretty good, I used 4, except the screen was a little bit more acceptable.

Get Android, Hehe, basically the company's Andro annihilated, the layout has not changed a bit. Test machines are generally near, and the longest words are machines 1-2 years ago. Later only to know that the original is not to identify the flex layout, can only be used box (that is, a very early syntax) to solve, you get the following wording

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;Ten} One . Justify (@ju) A{ - -webkit-justify-content:@ju; - -webkit-box-pack:@ju; the justify-content:@ju; -} -  - . Align (@align) +{ - -webkit-box-align:@align; + -webkit-align-items:@align; A Align-items:@align; at} - . Flex-flow-column (){ - -webkit-box-orient:Block-axis; - -webkit-flex-flow:column NoWrap; - Flex-flow:column NoWrap; -} in . Flex (@f){ - -webkit-box-flex:@f; to -webkit-flex:@f; + Flex:@f; -}

Note: This is less of the notation (I didn't learn very well)

But there's some regret in the middle. New Flex has a feature called "out-of-line", and there are similar properties in box, but none of the browsers support it, so you can only choose a different layout (as mentioned in the previous float) instead.

Summarize:

The layout of Flex is basically to consider the kernel, the PC is not very recommended, because most of the domestic to be compatible with IE7-8, you can consider on the mobile side (after all, only Android and Apple). All in all, this layout is very good, there is the need to learn, as they say HTML5+CSS3 will be the mainstream direction of the future.

If there is a better solution hope please advise, thank you.

Reference information:

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

Http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (New Flex)

Use of flex layouts to commemorate the first development of mobile websites