標籤：style blog color 使用 width html
box-flex是css3新添加的盒子模型屬性，它的出現可以解決我們通過N多結構、css實現的布局方式。經典的一個布局應用就是布局的垂直等高、水平均分、按比例劃分。目前box-flex屬性還沒有得到firefox、Opera、chrome瀏覽器的完全支援，但可以使用它們的私人屬性定義firefox(-moz)、opera(-0)、chrome/safari（-webkit)。 box-flex主要讓子容器針對父容器的寬度按一定規則進行劃分。舉個栗子：<!DOCTYPE html><html><meta charset="utf-8" /><style>.wrap { display: -webkit-box; -webkit-box-orient: horizontal;}.child { min-height: 200px; border: 2px solid #666; margin: 10px; font-size: 40px; font-weight: bold; font-family: Georgia; -webkit-box-align: center;}.w200 {width: 200px}.flex1 {display:block;-webkit-box-flex: 3}.flex2 {display:block;-webkit-box-flex: 1}</style><div class="wrap"> <!-- <div class="child w200">200px</div> <div class="child flex1">比例1</div> <div class="child flex2">比例2</div> --> <input type="text" class="child flex1" value="比例1"> <input type="text" class="child flex2" value="比例2"></div></html>
Ps:例如上面的child要求是塊（block）元素才有效。
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
