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

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

---

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

html

<div id="vTabs" class="vTabs"><div class="tab-item">商品</div><div class="tab-item">評價</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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。