免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

display:flex 多欄多列布局瀏覽器支持情況：火狐直接支持w3c無前綴寫法，谷歌和opera支持-webkit- 前綴寫法，比較適合移動端開發(fā)使用，

display:flex 這個牛逼的css3布局屬性，遺憾的是只有谷歌和火狐支持，
中國人常用的手機上的瀏覽器幾乎全軍覆沒，UC瀏覽器不支持，安卓4.1.1和之前版本手機自帶的瀏覽器也不支持，微信自帶瀏覽器也不支持。

看來要留給兒子們用了。

示例:

html,body{ padding:0; margin:0;}/*	flex-flow: row wrap; row橫向（左向右）顯示 column豎向（上向下）顯示 wrap一行顯示不完的時候換行*/.col{ border:red solid 1px;}footer { height:300px;   display: -webkit-flex;  -webkit-flex-flow: row;  -webkit-align-items: stretch;  -webkit-justify-content:space-between;    /*IE10還不支持*/  display: -ms-flex;  -ms-flex-flow: row wrap;  -ms-align-items: stretch;  -ms-justify-content:space-between;	  display: flex;  flex-flow: row;  align-items: stretch;  justify-content:space-between;}.col2{-webkit-flex:1;-moz-flex:1;flex:1}display:flex 的HTML測試結構<footer>    <div class="col col1" style=" width:60px;">jquery特效</div>    <div class="col col2" style="">前端路上</div>    <div class="col col3" style="width:30px;">懶人建站</div></footer> 

一個Flexbox布局是由一個伸縮容器(flex containers)和在這個容器里的伸縮項目(flex items)組成。

　　伸縮容器(flex  containers)是一個HTML標簽元素，并且“display”屬性顯式的設置了“flex”屬性值。在伸縮容器中的所有子元素都會自動變成伸縮項目(flex  items)。
　　這有一個三列布局的例子。外面的div容器是一個伸縮容器，而里面的left、main和right三個div都是伸縮項目：

　　設置一個簡單的伸縮容器很容易，代碼如下：

        .container {  display: flex;}        　　伸縮方向與換行(flex-flow)
　　伸縮容器有一個CSS屬性“flex-flow”用來決定伸縮項目的布局方式。如果伸縮容器設置了“flex-flow”值為“row”，伸縮項目排列由左向右排列：

　　如果“flex-flow”值設置為“column”，伸縮項目排列由上至下排列：
.container {  display: flex;  flex-flow: row;}        　　一個伸縮容器中的所有伸縮項目既可以排列在單行也可以多行排列。這個主要由“flex-flow”是否設置為“wrap”來決定。如果伸縮容器設置了“wrap”屬性值，當伸縮項目在伸縮容器中無法在一行中顯示的時候會另起一行排列。
.container {  display: flex;  flex-flow: row wrap;}　　伸縮項目(flex items)
　　在伸縮容器中的所有子元素都將自動變成伸縮項目。沒有額外配置CSS的必要。你唯一需要的做的就是設置伸縮項目的尺寸。
　　如果伸縮容器把“flex-flow”設置為“row”后，伸縮項目將需要設置他們的寬度。伸縮項目的高度將會自動設置為伸縮容器的高度：

　如果伸縮容器把“flex-flow”設置為“column”后，伸縮項目將需要設置他們的高度，伸縮項目的寬度將會自動設置為伸縮容器的寬度：

　給伸縮項目設置“width”和“height”屬性來定義伸縮項目尺寸，而這個伸縮項目是獨立于其他伸縮項目。例如，如果我們給主內容(content)設置了一個600px的寬度，不管伸縮容器中有一個、兩個或者上百個伸縮項目，主內容的寬度都是600px。

　　如果你想伸縮項目根據(jù)伸縮容器剩余的空間來決定伸縮項目的寬度，你可以使用“flex”屬性。例如，我們可以告訴瀏覽器，左邊欄和右邊欄占用了伸縮容器減去主內容寬度的空間。
　　flex的值于對應的空間成正比。如果左邊欄設置了值為“1”和右邊欄設置了值為“2”，伸縮容器剩余的空間將按比例分配給左邊欄和右邊欄，并且右邊欄所占的空間是左邊欄的兩倍：

　　下面是示例中運用在伸縮項目上的一些代碼，展示了獨立寬度和按比例計算的寬度：

.main {  width: 600px;}.left {  flex: 1;}.right {  flex: 2;}　　完整的實例
　　這是一個很簡單的實例，F(xiàn)lexbox創(chuàng)建了一個經典的三列布局。主內容寬度為60%，而邊欄是使用“flex”屬性，按比例自動根據(jù)伸縮容器剩余空間計算得到對應的寬度：
　　HTML結構
  …       …     …
        　　CSS代碼
.container {  display: flex;  flex-flow: row;}.main {  width: 60%;}.left {  flex: 1;}.right {  flex: 2;}　　示例效果