Flexbox Application Examples

The distance from the previous article "layout artifact: Flexbox" has been published for a week, and this week came to Friday (O (∩_∩) o~~);

Habitually in Friday to summarize his week's work, to record the work events that deserve to be remembered this week, whether good or bad;

This week continues to be the development of responsive web pages, mobile browsers, and page development, so I have a lot of practice opportunities;

This week, the previous percent-responsive layout was shifted to a flex-based, responsive layout.

The paper came to the end of the light, I know this matter to preach.

There are a lot of details to be noticed in practical applications:

The following is an example of today's demo:

Demo Address: http://jsfiddle.net/8f50uvzw/

# Flex is the property value of display and is currently in draft State, so when writing, you need to add the private prefixes of each browser, namely-webkit,-moz,-ms,-O, and so on.

So Display:flex should write:

    display:-webkit-flex;    Display:-moz-flex;    Display:-ms-flex;    Display:flex;

So similar to justify-content:space-around; Do you want to prefix this secondary attribute?

In Chrome debugging, without adding a prefix does not affect its expression effect; However, the real Web page after the actual use of mobile phone to open, without the prefix of the statement can not effectively display the effect;

So, when it comes to Flex tag Properties, it's important to remember to prefix it, especially -webkit-;

Demo

. Main-center,.main-subcenter,.subform{display:-webkit-flex;        Display:-moz-flex;        Display:-ms-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;- Webkit-align-items:flex-end;align-items:flex-end;-webkit-flex-wrap:wrap;flex-wrap:wrap;}

　　

Many common flex-related properties are applied to the parent element, not to individual child elements.

HTML structure:

<div class= "container" ><a href= "#" > Columns </a></div>

　　

At this point, there is no need to define img,a separately to make it appear in the middle of the Div, just add the following CSS code in the parent div:

    Display:flex;    Justify-content:center;    /* Horizontal Center */    Align-items:center;     /* Vertical Center */    Flex-direction:column;    /* Sibling A, and img Sort by "column" */

　　

3# can easily control how pages are displayed in different screen sizes by setting min-width and flex-wrap:wrap :

By adding the following styles to the main module:

    . Flex-ele{     -webkit-flex-wrap:wrap;      Flex-wrap:wrap;      min-width:180px;   }

When the screen size is reduced to 180px, the display looks like this:

4#flex Alignment

 justify-content: space -between; 
           
 space-between maximizes the distribution of elements inside the container. Whether it's two flex-item or more than 10, it's all set up.  
 
 

 justify- content: space-around          

   It's easy to think of the "rotten margin:0". Flex-item is evenly distributed by default, but each one centers on the

   within its given space;

    The content is referenced, content source:/http zhuanlan.zhihu.com/frontendmagazine/19955794

The AA Flex container is called a "flex-item" for each direct child element. However, all elements inside the child element do not inherit any special styles, and you can add any CSS you want. Because each child element is a flex-item, you will find yourself "protecting" the contents by wrapping the elements in a div or other element. Make the element a flex-child, not a content within it;

6# "Block", "inline", "float" and "text-align" are meaningless in flex-item environment; By default, all Flex-item are aligned to the top and left of the Flex container

　　

HTML code:

<! DOCTYPE html>
CSS code:
/**mindex.css*2015/4/7*built by @kevin */*{margin:0;padding:0;} Li{list-style:none;} A{color: #fff; text-decoration:none;}. Clearfix:after{content: '. '; Display:block;height:0;clear:both;visibility:hidden;}. Clearfix{*zoom:1;} Body{background-color: #333; font-family: ' Helvetica Neue ', helvetica,arial,sans-serif;font-size:100%;}. Header,.footer{position:relative;width:100%;height:160px;background-color: #345AA3; color: #fff; font-size:100%;    　　Text-align:center;    　　-webkit-flex-direction:column; Flex-direction:column;}.    Main-center. Left,. main-center Right {-webkit-flex-direction:column; Flex-direction:column;}. Header img{width:64px;}. Logo {Width:60px;height:60px;background:url (http://www.xing88.com/Areas/Mobile/Content/Article/Index/ logonoword2x.png); background-size:60px 60px;background-repeat:no-repeat;background-position:center Center;}. Title {margin-top:6px;font-size:120%;}. Main-center img {width:80px;}. Messageno {font-size:150%;}. Footer{background-color: #999; color: #666; font-size:100%;}.    　　Main-center,.main-subcenter,.subform{display:-webkit-flex;    　　Display:-moz-flex; Display:-ms-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;- Webkit-align-items:flex-end;align-items:flex-end;-webkit-flex-wrap:wrap;flex-wrap:wrap;}.    Common {display:-webkit-flex;    Display:-moz-flex;　　Display:-ms-flex;　　Display:flex;    -webkit-justify-content:center;    Justify-content:center;    -webkit-align-items:center; Align-items:center;}. item{width:48%;margin:1% 0;color: #fff; min-height:160px;}. Left{background-color: #913E8E;}. Right{background-color: #00B1BD;}. userface{width:120px;}.      　Subitem{width:50%;height:80px;background-color: #333;d isplay:-webkit-flex;    　　Display:-moz-flex;    　　Display:-ms-flex;display:flex;-webkit-justify-content:center;   　　 Justify-content:center;   　　 -webkit-align-items:center; Align-items:center;}. Sub-left-top{background-color: #31569C;}.  sub-right-top{  Background-color: #00BB8C;}. Sub-left-bottom{background-color: #00B4BF;}.        Subleftmain {background:url (http://www.xing88.com/Areas/Mobile/Content/Home/rgBg.jpg) no-repeat top center; Background-size:cover;}. Suntitle {
Display:inline-block;width:100%;text-align:center;background-color:rgba (0,0,0,0.4); Height:160px;line-height: 160px;font-size:120%;text-shadow:0 0 0 Rgba (0,0,0,0.3);}. Sub-right-bottom{background-color: #f7f7f7;}. Sub-right-bottom img{margin-top:5px;width:70px;height:70px;border-radius:35px;}
　　
Flexbox Application Examples