Flexbox

Flexbox功能由Flexbox及FlexboxItem子组件组成。

简单平分

``` vux height=200 components=Flexbox,FlexboxItem,Divider

Horizontal12Vertical12

.flex-demo { text-align: center; color: #fff; background-color: #20b907; margin-bottom: 8px; border-radius: 4px; -webkit-background-clip: padding-box; }

### 嵌套布局

> 国内电商网站和支付应用最常见

> 1像素边框实现请参考1px解决方案

``` vux height=210 components=Flexbox,FlexboxItem
<template>
<flexbox :margin-left=0 style="height: 200px; background-color: #fff;" class="vux-1px-tb vux-1px-l vux-1px-r">
  <flexbox-item class="vux-1px-r" style="height:200px;"></flexbox-item>
  <flexbox-item>
    <flexbox orient="vertical" :margin-left=0>
      <flexbox-item class="vux-1px-b"></flexbox-item>
      <flexbox-item style="height: 100px;"><!--height: 100% doesnot work here-->
        <flexbox :margin-left=0>
          <flexbox-item class="vux-1px-r"></flexbox-item>
          <flexbox-item></flexbox-item>
        </flexbox>
      </flexbox-item>
    </flexbox>
  </flexbox-item>
</flexbox>
</template>