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