flex布局是css3中的重要布局方式，稱為“彈性布局”，每次想到它主要是遇到元素垂直居中、元素寬高自適應(yīng)的問題，這些問題在flex中都能過簡(jiǎn)單設(shè)置就解決，它更像是原生APP中的布局操作，布局不必寫N多的盒模型代碼來實(shí)現(xiàn)，指哪就打哪。
末尾附上阮一峰大神的flex介紹，怎么用看這篇文章就可以了。

flex也是ReactNative中的布局方式。
flex分為容器和項(xiàng)目，項(xiàng)目存在于某個(gè)容器中。容器有6個(gè)css屬性，項(xiàng)目有6個(gè)css屬性，而且容器和項(xiàng)目中各有一個(gè)復(fù)合屬性，奈何就12個(gè)屬性，就是記不住呢，每次都需要百度…神經(jīng)衰弱的前兆可能…

---

下面一個(gè)例子，做一個(gè)有三個(gè)選擇按鈕的tab欄，三個(gè)tab均分寬度，自動(dòng)拉伸。(css用stylus語(yǔ)法糖)
在某一個(gè)元素上聲明display:flex即表示該元素是一個(gè)flex布局容器。
容器下的子元素即為項(xiàng)目。

html

<div id="vTabs" class="vTabs"><div class="tab-item">商品</div><div class="tab-item">評(píng)價(jià)</div><div class="tab-item">商家</div></div>

css

.vTabswidth 100%height 40pxline-height 40pxbackground #ffffffdisplay flex.tab-itemflex autotext-align center

效果

阮一峰大神的flex介紹
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

總結(jié)

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

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