flex布局

今天刚面完一场面试，问到flex布局，我以为是没有问题的，没想到。。。

面试官问：

你知道flex布局吗？说一下。我巴拉巴拉把属性都说完了

然后接着问：flex-grow是怎么作用的？假设有三个项目，flex-grow分别设置为1,2,3，那效果是什么样的？然后就懵了，我说扩大自己的1倍，2倍。。。肯定是错的，也是没想到，我知道的竟然一直都是错的。

所以在这里记录，总结一下

1. 前言：

flex容器默认有两根轴，主轴和交叉轴（与主轴垂直交叉）

2. 在父盒子上设置的属性

在父元素设置display：flex；在容器之中的项目自动进行flex布局

flex-direction：设置容器的主轴方向（项目是竖着排列还是横着排列，默认是横着）

 row:默认值，水平方向，起点在左端。
 row-reverse： 水平方向，起点在右段。
 column：  垂直方向，起点在上沿，
 column-reverse： 垂直方向，起点在下沿。

flex-wrap：当项目的宽度超过容器宽度时的处理方式。

   nowrap：默认值，不换行，容器内的项目宽度会被压缩
   wrap：换行
   wrap-reverse ：换行，但是反序换行

flex-flow：这个是上面两个属性的结合,可以同时设置两个属性

justify-content: 设置项目在主轴方向上的对齐方式

  flex-start：默认值，与主轴起点对齐。
  flex-end： 与主轴终点对齐。
  center： 与主轴的中心对齐。
  space-between：容器中有剩余空间时，使得项目之间的间隙相等。
  space-around：容器有剩余空间时，使得每个项目两侧的间隙相等，所以项目之间的间隙是项目一侧间隙的两倍。

align-items：设置项目在交叉轴上的对齐方式

  flex-start：与交叉轴起点方向对齐
  flex-end：与交叉轴终点对齐
  center：与交叉轴中心对齐
  stretch：当项目的没有设置高度或者设置为auto，那么项目的高度占满容器的高度。
  spaceline：与项目内容中的文字的基线(文字的底部下划线的感觉)对齐

3. 在项目（子盒子）上设置的属性）

order ：设置项目的排列顺序

默认值为 0，数值越大位置越后
【如果容器内有两个项目，项目1设为2，项目2设置为1，则项目1排在最后】

flex-grow

flex-grow：在主轴方向扩大

 默认值为0（代表有剩余空间也不会扩大）
 设置的值表示，当容器还有剩余空间时，项目根据设置的属性值按比例来分配剩余空间。

 所以开头面试官问的问题：
     假设容器宽度设置: width:320px;
     项目1 ：width:100px;  flex-grow :1;
     项目2：width:100px;  flex-grow :2;
     
     效果是：项目1宽度占据 180px，项目2宽度占据140px
     因为容器剩余空间为120px，然后按照1:2的比例分配给两个项目。

flex-shrink：在主轴方向收缩

 默认值为 1
 如果某个项目设置为0，那么空间不够的时候，别的项目都会收缩，它不会。

这个也模拟一下
     假设容器容器: width 80px
     项目1 ：width100px，flex-grow 1
     项目2：width100px ， flex-grow 2
     
     效果是：项目1宽度占据 60px，项目2宽度占据 20px
     因为容器宽度为80px，但是两个项目所需宽度为200px，所以两个项目需要收缩的宽度为120，根据1:2来进行收缩。

flex-basis：在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余的空间
flex ：是flex-grow，flex-shrink，flex-basis这三个属性的简写方式。
```
 flex：1；，意思是：flex：1 1 0
```
align-self：可以在项目上设置自己的align-items属性值。会覆盖父元素上的align-items元素

前端面试题 - flex布局🤦‍♀️

flex布局

1. 前言：

2. 在父盒子上设置的属性

3. 在项目（子盒子）上设置的属性）

flex-grow