Page layout --Box box attribute syntax Detailed

• When the mobile terminal development, the Holy Grail layout, flexible pouch, is that we often use to get, there is a display W3C long time ago: box properties

• flex is the latest, but in the actual browser testing, display: flex can not completely replace the display: -webkit-box
• display: box can be used in reference http://www.html5rocks.com/en/tutorials/flexbox/quick/
• display: flex can be used in reference https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Compatibility problems can refer https://css-tricks.com/old-flexbox-and-new-flexbox/
• Android UC browser only supports display: box grammar. The iOS UC browser supports two ways 
• Note that if you need to use the display when using the line-clamp: box

display: -webkit-box; the parent element set this property, and effect display: flex Similarly, the sub-element in a row can be displayed, and adaptive.

Demo:

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .parent{
 7             width: 400px;
 8             height: 600px;
 9             display: -webkit-box;
10             -webkit-box-orient: vertical;/* 竖向排列 */
11         }
12 is          .child-One { 
13 is              background : LightBlue ; 
14              -webkit-Flex-Box : . 1 ; 
15          } 
16          .child-TWO { 
. 17              background : LightGray ; 
18 is              -webkit-Flex-Box : 2 ; 
. 19          } 
20 is          .child- Three { 
21 is              background : LightGreen ; 
22 is              / * add a fixed height and margins * / 
23 is              height: 200px;
24             margin: 15px 0;
25         }
26     </style>
27 
28 <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
29     <div class="parent">
30         <div class="child-one">1</div>
31         <div class="child-two">2</div>
32         <div class="child-three">3</div>
33     </div>
34 </div>

Results are as follows:

　　　　　　

 

So here someone will say, display: -webkit-box; and display: flex what is the difference?

If you say the difference, display: box; the old norms, to take into account the antique loom to add it.
flexbox flex is the new norm, the old machine is not supported

1. The following properties to control between the two properties by:

display:box;	display:flex	Explanation
box-orient: horizontal | vertical | inherit	flex-direction:row | column	This attribute defines how the sub-elements parent element is arranged.
box-direction:normal | reverse	flex-direction:row-reverse | row-reverse	That the action of changing the order of child elements
box-pack: start | end | center | justify	justify-content:flex-start | flex-end | center | space-between|space-around	This attribute defines the parent element sub-elements are arranged horizontally
box-align: start | end | center | baseline | stretch	align-items:flex-start | flex-end | center | baseline | stretch	This attribute defines sub-elements parent element is arranged vertically
box-flex:<number>	flex: is flex-grow, flex-shrink and flex-basis shorthand	The property sub-let container be divided according to certain rules for the width of the parent container
box-ordinal-group: using the required prefix	order:  <number>	The order of the sub, smaller values ​​are arranged more toward the front
box-lines: have been eliminated	flex-wrap：nowrap | wrap | wrap-reverse	Sub wrapping results in a container

 Here there are a lot of flex property has not been written, it can refer to my other blog post introduces Detailed syntax Detailed property

tip: box attribute basically need to add a different prefix before the official use browser

2.display: Compatibility Analysis box layout browser: flex and display

References can be: https://www.cnblogs.com/walk-on-the-way/p/5997073.html

In general, do not consider the words of the IE browser, PC on which can end use, general use display: flex; Andrews UC mobile terminal only supports display: box, iOS's UCdisplay: box and display: flex both support .

display in the actual test: flex can not completely substitute display: box. display: flex browser compatibility is too much trouble.

Browser compatibility writing:

1 .container{
2 　　　　display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
3 　　　　display: -moz-box; /* Firefox 17- */
4 　　　　display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
5 　　　　display: -moz-flex; /* Firefox 18+ */
6 　　　　display: -ms-flexbox; /* IE 10 */
7 　　　　display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
8 }