標籤：容器 最大 tle ever bsp port blog art set
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>盒模型display:box;</title></head><body> <article class="wrap"> <section class="section sectionOne">01</section> <section class="section sectionTwo">02</section> <section class="section sectionThree">03</section> </article></body></html>
.wrap { width: 600px; height: 200px; border: 1px solid #000000; display: -webkit-box; /*這樣元素就會內聯化*/ display: -moz-box; display: box; -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient: horizontal; -webkit-box-direction: reverse; box-direction: reverse; -webkit-box-align: center; box-align: center; /*子容器的水平對其方式*/ -webkit-box-pack: justify;}.section { width: 50px; height: 80px;}.sectionOne { background: orange; /* -webkit-box-flex:1; box-flex:1; */}.sectionTwo { background: purple; /* -webkit-box-flex:2; box-flex:2; */ /*margin: 0 50px;*/ height: 108px;}.sectionThree { background: green; width: 100px;}
注意：
給box設定vertical或block-axis屬性(此屬性是預設值)其效果似乎表現一致，
都可將子容器垂直排列，具體兩者有什麼實質差別暫時還沒有搞清楚。
如果父容器選擇vertical或block-axis屬性對子容器進行垂直排列，
其是對父容器的高度進行分配劃分。此時如果父容器定義了寬度值，
其子容器的寬度值設定則無效狀態；如果父容器不設定寬度值，
其子容器的寬度值才有效並且取最大寬度值的子容器的寬度。
效果：
CSS3盒模型display:box;box-flex:3;
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
