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

Source: Internet
Author: User

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)

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.