Home > Developer > Web Develop
Interestingly, although no browsers currently support the Box-flex,box-orient attribute, these two properties have been very hot since CSS3 was invented. 2014 Ali School recruit 5th asked to use the function in CSS3 to achieve three rectangular layout, the total width of 100%, where three rectangles, the width of the first rectangle is 200px, the second and the third rectangle is equal in width, gives the HTML structure is:
<div " box > <div class = " item " >column 1 </div> <div " Span style= "color: #800000;" >item >column 2 </div> <div class = item >column 3 </div></div>
The CSS3 attributes referred to here include Box-flex and box-orient. Because there are no browsers to support these two properties, Firefox supports alternative-moz-box-flex,-moz-box-orient properties, Safari,opera and chrome support for alternative-webkit-box-flex,- The Webkit-box-orient property.
Here is the CSS style sheet for the topic
1<style type="Text/css">2*{padding:0; margin:0}3 . box{4Width -%;5 Background:greenyellow;6box-orient:horizontal;7-webkit-box-orient:horizontal;8-ms-box-orient:horizontal;9-o-box-orient:horizontal;Ten-moz-box-orient:horizontal; OneDisplay:-ms-box; ADisplay:-moz-box; -Display:-webkit-box; -Display:-o-box; the } -.box>. item{ - height:100px; - background:red; +margin:10px 10px 10px0; --moz-box-flex:1; +-webkit-box-flex:1; A } at. box. item:first-child{ - width:200px; -margin-left:10px; --moz-box-flex:10px; --webkit-box-flex:10px; - } in -</style>
1 Box-flex:
This property specifies whether the child elements of the box can be scaled (the retractable element can be scaled down or enlarged as the box shrinks or expands, as long as there is extra space in the box, and the retractable elements are expanded to fill the space), primarily allowing the child container to divide the parent container's width by a certain rule. If the above code three sub-block values are 1, that is, the width of each child block 1/3, but because of this problem, because. box. item:first-child{width:200px} to the first child element is limited to a width of 200px, So the second and third widths are 1/2 of the remaining width.
such as code
123<style>4 Div5 {6Display:-moz-box;/*Firefox*/7Display:-webkit-box;/*Safari and Chrome*/8 Display:box;9 width:300px;Ten border:1px solid black; One } A - #p1 - { the-moz-box-flex:1.0;/*Firefox*/ --webkit-box-flex:1.0;/*Safari and Chrome*/ -Box-flex:1.0; - border:1px solid red; + } - + #p2 A { at-moz-box-flex:2.0;/*Firefox*/ --webkit-box-flex:2.0;/*Safari and Chrome*/ -Box-flex:2.0; - border:1px solid blue; - } -</style> in -<body> to +<div> -<p id="P1">Hello</p> the<p id="P2">W3School</p> *</div> $ Panax Notoginseng<p><b> Note: </b>ie does not support the Box-flex property. </p> - the</body> +This is an example of w3school in red and blue each account for 1/3 and 2/3 of the total width.
Do not know that the example of the parent container display is box, what is it ~ because only such a child container can be divided, but there is a small problem, if you use margin:0 auto in chrome ordered child element Center is compared perfect, But Firefox is not, don't worry, we can set the parent container to Text-align:center;
2 box-orient:
He is also a scalable box property that specifies whether the child elements of the box should be arranged horizontally or vertically.
Talking about CSS3 Box-flex property and Box-orient property by Ali 14 School recruit
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
