<分区>
由于我一直在研究 flexbox 一段时间并且终于“看到了曙光”，我想我会分享我的例子来展示在没有 css hack 的情况下实现灵活的列布局是多么容易边距、填充等..
我知道有些人根本不喜欢 flexbox 并且可能有充分的理由，但这篇文章是为那些想知道它是什么并获得一个工作和可用的例子的人准备的，这个例子真的非常非常乍一看很容易理解...
首先是一些 HTML:
<div class="header">100 setup</div>
<div class="flexcontainer">
<div class="flexbox flex100">100</div>
</div>
<div class="header">75/25 setup</div>
<div class="flexcontainer">
<div class="flexbox flex75">75</div>
<div class="flexbox flex25">25</div>
</div>
<div class="header">50/50 setup</div>
<div class="flexcontainer">
<div class="flexbox flex50">50</div>
<div class="flexbox flex50">50</div>
</div>
<div class="header">33/33/33 setup</div>
<div class="flexcontainer">
<div class="flexbox flex33">33</div>
<div class="flexbox flex33">33</div>
<div class="flexbox flex33">33</div>
</div>
<div class="header">20/20/20/20 setup</div>
<div class="flexcontainer">
<div class="flexbox flex20">20</div>
<div class="flexbox flex20">20</div>
<div class="flexbox flex20">20</div>
<div class="flexbox flex20">20</div>
</div>
然后是一些 CSS:
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
border:1px solid #3B3B3B;
background-color: #919191;
width:100%;
min-height:100px;
}
.flexbox {
margin:5px;
border:1px solid #F2F2F2;
background-color:#E3E3E3;
padding:5px;
}
.header {
font-size:0.75em;
font-family:verdana;
width:100%;
display:block;
line-height:20px;
}
.flex20 {
-webkit-flex: 4 0 0;
flex: 4 0 0;
}
.flex25 {
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
.flex33 {
-webkit-flex:3 0 0;
flex: 3 0 0;
}
.flex50 {
-webkit-flex:1 0 0;
flex: 1 0 0;
}
.flex75 {
-webkit-flex: 2 0 0;
flex: 2 0 0;
}
.flex100 {
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
这是一个JSFiddle用于查看和测试