本文共 3251 字，大约阅读时间需要 10 分钟。

align-content属性在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过 align-content 属性来确定排列的方式。可以设置以下值。

1. flex-start ：从上往下排列。示例代码如下：

.outter {   display: flex;   flex - wrap: wrap;   align - content: flex - start;   width: 300px;   height: 300px;   background: pink;}

2 flex-end ：末尾段对齐。效果图如下：

2. center ：中点对齐。效果图如下： 4 space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。效果图如下： 3. space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。效果图如下： 4. stretch ：默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。

.outter.inner {    background: gray;    width: 100px;    /* height: 100px; */    border: 1px solid#ccc;    box - sizing: border - box;}

效果图如下：

元素（子容器）的相关属性 flex-basis： 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。 .item { flex-basis: | auto; } 默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。

当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flexshrink 配合使用才能发挥效果。

当 flex-basis 值为 0 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。 flex-grow：

设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。比如有以下代码：

     
    
     1
       
    
     2
    
   

wxss代码为：

outter {    display: flex;    width: 300px;    height: 300px;    flex - wrap: wrap;    background: pink;}.outter.inner {    background: gray;    width: 100px;    height: 100px;    border: 1px solid#ccc;    box - sizing: border - box;}.outter.inner1 {    flex - grow: 2;}.outter.inner2 {    flex - grow: 1;}

效果图为：

因为两个元素分别占了2份，1份，所以第一个元素是占据了整个容器宽度的2/3，第二个元素占据了整个容器宽度的1/3。 另外，如果设置 flex-grow 为0，那么他的宽度将会保持为设置的宽度，如果宽度没有设置，那么将根据他的子元素来保留宽度。假如代码为：

     
    
     1
       
    
     2
    
   

wxss代码为：

.outter.inner1 {    flex - grow: 0;}.outter.inner2 {    flex - grow: 1;}

效果图为：

如果把 inner1 的 width 删掉，那么效果图为：

flex-shrink属性： 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。比如有以下代码：

     
    
     1
      
    
     2
      
    
     3
      
    
     4
    
   

wxss的代码如下：

.outter {    display: flex;    width: 300px;    height: 300px;    background: pink;}.outter.inner {    background: gray;    width: 100px;    height: 100px;    border: 1px solid#ccc;    box - sizing: border - box;}.outter.inner2 {    flex - shrink: 0;}

效果图为：

因为给 inner2 设置了 flex-shrink 为0，所以即使在空间不够的情况下，他也不会被压缩。 flex属性：

flex属性是 flex-grow flex-shrink flex-basis 三个属性的简写。假设以上三个属性同样取默认值，则 flex 的默认值

是 0 1 auto 。

关于 flex 的取值，有以下几种方式：

1. auto ：等价于 1 1 auto 。也就是允许增长，允许缩小，宽度为自动。
2. none ：等价于 0 0 auto 。也就是不允许增长，不允许缩小，宽度为自动。
3. 非负数字：这个数字表示的是 flex-grow 的值， flex-shrink 为1，表示允许缩小， flex-basis 为0%。可以认为他就是把剩余的空间进行填充。比如以下代码是等价的：

.item {    flex: 1;}.item {    flex - grow: 1;    flex - shrink: 1;    flex - basis: 0 % ;}

4. 0 ：对应的三个值分别为 0 1 0% 。比如以下代码是等价的：

.item {    flex: 0;}.item {    flex - grow: 0;    flex - shrink: 1;    flex - basis: 0 % ;}

5. 长度或者百分比：则这个值视为 flex-basis 的值，而 flex-grow 为1， flex-shrink 为1。比如以下代码是等价的：

.item - 1 {    flex: 0 % ;}.item - 1 {    flex - grow: 1;    flex - shrink: 1;    flex - basis: 0 % ;}.item - 2 {    flex: 24px;}.item - 2 {    flex - grow: 1;    flex - shrink: 1;    flex - basis: 24px;}

6. 两个非负数字：分别视为 flex-grow 和 flex-shrink 的值， flex-basis 取 0% ，如下是等同的：

.item {    flex: 2 3;}.item {    flex - grow: 2;    flex - shrink: 3;    flex - basis: 0 % ;}

7. 一个非负数字和一个长度或百分比：则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {    flex: 11 32px;}.item {    flex - grow: 11;    flex - shrink: 1;    flex - basis: 32px;}

更多关于flex布局请参考：

App生命周期

请参考：

转载地址：https://maoli.blog.csdn.net/article/details/89321803 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！