css伸缩布局(附图、实例)默认主轴（横向 从左往右）

伸缩盒子（display: flex;）的flex-direction默认主轴是横向

如图红色线条是主轴：


子盒子沿着主轴，从左往右排布


注意：
横向是宽width
纵向是高height
当通过使用flex-direction的方法改变主轴方向（如主轴是纵向）时，子盒子是沿着纵线，从上往下排布的。
其实，只要注意宽和高的取值问题不大的。

实例(主轴：纵向 容器从上往下排布)：
微信开发者工具

<!--index.wxml-->
<view class="root">
  <view class="tabs"></view>  
  <view class="content"></view>
  <view class="content2"></view>

</view>

<!--index.wxss-->
page{
  height: 100%;
}
.root{
  flex-direction: column;
  display: flex;  
  height: 100%;
  background-color: #f0f0f0;
}

.tabs{
  height: 50px;
  background-color: pink;
}
.content{
  flex: 100;
  background-color: plum;
}
.content2{
  flex: 100;
  background-color: powderblue;
}