Flex布局-容器属性

flex 布局方便适配不同大小的内容区域

一、盒模型分类：IE盒模型，标准盒模型

区别：

/* 标准盒模型（默认值）------实际占比（width+padding+border）-----需要额外计算 */
box-sizing:content-box;

/* IE盒模型  -----实际占比（width）----不需要额外计算 */
box-sizing:content-box;

微信小程序 View视图标签支持两种布局方式：Block 和 Flex

注意：
所有 View 默认都是 block浮动布局，所以如果要使用 flex 布局的话需要进行显式声明

二、容器与项目元素

日常开发中，采用flex布局的元素，一般简称为“容器”

容器内的元素简称为“项目”或者“元素”

三、主轴与交叉轴

水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）

四、容器属性

布局属性：
容器属性： flex-flow、flex-direction、flex-wrap、justify-content、align-items、
align-content
元素/项目属性： order、flex-grow、flex-shrink、flex-basis、flex、align-self

五、flex不单是一个属性，还包含了一套新的属性集。

属性集包括设置容器和项目两部分

容器属性：

（1）弹性盒模型display:flex;

（2）元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse

①    flex-direction：row（默认值）------主轴横向，项目沿主轴排列，从左到右排列

②    flex-direction：row-reverse---------row的反方向，从右到左排列

③    flex-direction：column-------主轴纵向，项目沿主轴排列，从上到下排列

④    flex-direction：column-reverse-------column的反方向，从下到上排列

（3）元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse

①   flex-wrap:nowrap（默认值）-------- 不换行。如果单行内容过多，则溢出容器

②  flex-wrap：wrap--------容器单行容不下所有项目时，换行排列。

③  flex-wrap：wrap-reverse-------容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。

flex-flow 属性： 相当于direction和wrap的集合

 flex-flow: row nowrap;/* 顺序排列且不换行 */ 

 flex-flow:row-reverse wrap;/* 反序排列且自动换行 */

（4）项目元素在主轴上（X轴）的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly

①  justify-content：flex-start  -------  容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。

②  justify-content：center-------项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离

③  justify-content：flex-end-------项目对齐主轴终点，项目间不留空隙

④  justify-content：space-between-------项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。

⑤  justify-content：space-around---------与space-between相似。
不同点为，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。

⑥  justify-content：space-evenly--------项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

（5）元素在交叉轴（Y轴）的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start

① align-items:stretch（默认值）----------当未设置项目尺寸，项目拉伸至填满行高

②  align-items: flex-start----------项目顶部与行起点对齐

③  align-items: center-------项目在行中居中对齐。

④   align-items: flex-end---------项目底部与行终点对齐。

⑤   align-items:baseline-----项目的第一行文字的基线对齐，以子元素的第一行文字对齐

（6）多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

① align-content:stretch（默认值）-------- 当未设置项目尺寸，项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。

② align-content:flex-start-----------首行在交叉轴起点开始排列，行间不留间距

③ align-content:center-----------行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等

④ align-content:flex-end-----------尾行在交叉轴终点开始排列，行间不留间距。

⑤ align-content:space-between----------行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0

⑥ align-content:space-around----------行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半

⑦ align-content:space-evenly------行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等

项目元素属性：

（1）多余空间时元素放大比例flex-grow：0（默认值） | <number>

（2）空间不足时元素缩小比例flex-shrink:1（默认值） | <number>

（3）元素在主轴上占据空间flex-basis:auto（默认值） | <length>

（4）flex 是grow、shrink 、basis的简写

（5）元素的排列顺序order:0（默认值） | <integer>

（6）单独对某个元素设置交叉轴对齐方式
align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch

六、交叉轴上的多行对齐

通过flex-wrap: wrap使得元素在一行放不下时进行换行。

在这种场景下就会在交叉轴上出现多行，多行情况下，flex布局提供了align-content属性设置对齐。

重点：
align-content与align-items比较类似，同时也比较容易迷糊。下面会将两者对比着来看它们的异同。

首先明确一点：align-content会以多行作为整体进行对齐，容器必须开启换行。

对比：

区别：
在属性值上，align-content比align-items多了两个值：space-between和space-around

七、练习

<view class="items">
  <view class="item">
    <view>项目一</view>
    <view>详情介绍，详情介绍，详情介绍，详情介绍，详情介绍</view>
  </view>
  <view class="item">
    <view>项目二</view>
    <view>详情介绍，详情介绍，详情介绍，详情介绍，详情介绍</view>
  </view>
  <view class="item">
    <view>项目三</view>
    <view>详情介绍，详情介绍，详情介绍，详情介绍，详情介绍，</view>
  </view>
</view>

.items{
  width: 100%;
  height: 1000rpx;
  background: #eee;
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}
.item{
    width: 100%;
    height: 200rpx;
    background:paleturquoise;
    display:flex;
    align-items:center;
    justify-content: space-around; 
}
.item view:first-child{
  width: 30%;
  height: 150rpx;
  background: red;
   color: black;
}
.item view:last-child{
  width: 60%;
  color: black;
}