轉(zhuǎn)自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

?

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

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

看來(lái)要留給兒子們用了。

示例:

html,body{ padding:0; margin:0;} /*flex-flow: row wrap; row橫向（左向右）顯示 column豎向（上向下）顯示 wrap一行顯示不完的時(shí)候換行 */ .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測(cè)試結(jié)構(gòu)<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>?

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

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

　　設(shè)置一個(gè)簡(jiǎn)單的伸縮容器很容易，代碼如下：

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

?

　　如果“flex-flow”值設(shè)置為“column”，伸縮項(xiàng)目排列由上至下排列：

這里將展處樣設(shè)置伸縮容器，使用伸縮項(xiàng)目在一行中顯示：

.container {??display: flex;??flex-flow: row;}? ?? ???　　一個(gè)伸縮容器中的所有伸縮項(xiàng)目既可以排列在單行也可以多行排列。這個(gè)主要由“flex-flow”是否設(shè)置為“wrap”來(lái)決定。如果伸縮容器設(shè)置了“wrap”屬性值，當(dāng)伸縮項(xiàng)目在伸縮容器中無(wú)法在一行中顯示的時(shí)候會(huì)另起一行排列。

這里展示了如何將伸縮容器設(shè)置為“wrap”:

.container {??display: flex;??flex-flow: row wrap;}　　伸縮項(xiàng)目(flex items)
　　在伸縮容器中的所有子元素都將自動(dòng)變成伸縮項(xiàng)目。沒(méi)有額外配置CSS的必要。你唯一需要的做的就是設(shè)置伸縮項(xiàng)目的尺寸。
　　如果伸縮容器把“flex-flow”設(shè)置為“row”后，伸縮項(xiàng)目將需要設(shè)置他們的寬度。伸縮項(xiàng)目的高度將會(huì)自動(dòng)設(shè)置為伸縮容器的高度：

　如果伸縮容器把“flex-flow”設(shè)置為“column”后，伸縮項(xiàng)目將需要設(shè)置他們的高度，伸縮項(xiàng)目的寬度將會(huì)自動(dòng)設(shè)置為伸縮容器的寬度：

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

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

　　下面是示例中運(yùn)用在伸縮項(xiàng)目上的一些代碼，展示了獨(dú)立寬度和按比例計(jì)算的寬度：

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

轉(zhuǎn)載于:https://www.cnblogs.com/y-lin/p/5728442.html

總結(jié)

以上是生活随笔為你收集整理的display:flex 多栏多列布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。