小程序制作（超详解！！！）第六节 flex弹性盒模型布局

1.index.wxml

<view class="box">
  <view class="title">页面布局示例</view>
  <!--实现三栏水平均匀布局-->
  <view style="display: flex;text-align: center;line-height: 80rpx;">   
    <view style="background-color: red;flex-grow: 1;">1</view>
    <view style="background-color: green;flex-grow: 1;">2</view>
    <view style="background-color: blue;flex-grow: 1;">3</view>
  </view>
  --------------------------
  <!--实现左右混合布局-->
  <view style="display: flex;height: 300rpx; text-align: center;">
    <view style="background-color: red;width: 250rpx;line-height: 300rpx;">1</view>
    <view style="display: flex;flex-direction: column;flex-grow:1 ;line-height: 150rpx;">
      <view style="background-color: green;flex-grow: 1;">2</view>
      <view style="background-color: blue;flex-grow: 1;">3</view>
    </view>
  </view>
  -----------------------------
  <!--实现上下混合布局-->
  <view style="display: flex;flex-direction: column;line-height: 300rpx; text-align: center;">
    <view style="background-color: red;height: 100rpx; line-height: 100rpx;">1</view>
    <view style="flex-grow: 1; display: flex;flex-direction: row;">
      <view style="background-color: green;flex-grow: 1;">2</view>
      <view style="background-color: blue;flex-grow: 1;">3</view>
    </view>
  </view>
</view>

对内容进行布局：display: flex

文本水平居中：text-align:center

分配副空间：flex-grow。若每个相同则平均分配。

宽度：width

垂直方向布局:flex-direction:column(列方向）

水平方向布局:flex-direction:row(行方向）

注：如果height和line-height相等则文本在垂直方向居中。

2.总结

1.flex弹性盒模型布局

flex是flexible box 的缩写，意为“弹性布局”

2.flex容器布局

属性	含义	合法值
flex-direction	设置主轴方向（即项目排列方向）	row,row-reverse,column,column-reverse
flex-wrap	如果一条轴线排不下，可以换行	nowrap,wrap,wrap-reverse
justify-content	项目沿主轴方向的对齐方式	flex-start,flex-end,center,space-between,space-around
align-items	项目在交叉轴上的对齐方式	flex-start,flex-end,center,baseline,stretch
align-content	项目在交叉轴上有多根轴线时的对齐方式	flex-start,flex-end,center,space-between,space-around,stretch

3.flex项目布局

属性	说明
order	项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow	各项目宽度之和小于容器宽度时，各项目分配容器剩余宽度的放大比例，默认为0，即不放大。
flex-shrink	各项目宽度之和大于容器宽度时，各项目缩小自己宽度的比例，默认为1，即该项目将缩小。
flex-basis	元素宽度的属性，和width功能相同，但比width的优先级高。
flex	是flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch。

4.利用line-height设置文本垂直居中对齐

line-height可以理解为每行文字所占的高度。比如说有一行高度为20px的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px，由于每个字的高度只有20px，于是浏览器就把多出来的30px (50px-20px) 在这行文字的上面加上了15px，下面加上了15px，这样文字就在这50px的空间内是居中的了。