css之flex布局

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

.vTabs
width 100%
height 40px
line-height 40px
background #ffffff
display flex
.tab-item
flex auto
text-align center

效果



阮一峰大神的flex介绍

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool