flex 布局

2021-04-02 本文已影响0人米诺zuo

Flexbox布局中有两个重要的概念：Flex容器和Flex项目。
Flex容器包含多个Flex项目。

flex 使用
flex 容器设置 display:flex或者display:inline-flex

Flex容器

属性	值
flex-direction	row	column	row-reverse		column-reverse	控制Flex项目沿着主轴（Main Axis）的排列方向
flex-wrap	wrap	nowrap	wrap-reverse	控制Flex项目是否换行显示
flex-flow	row wrap	row nowrap	column wrap		column nowrap 等	flex-direction和flex-wrap两个属性的组合速记属性
justify-content	flex-start	flex-end	center		space-between		space-around	控制 Flex项目在Main-Axis上的对齐方式
align-items	flex-start	flex-end	center		stretch		baseline	控制Flex项目在Cross-Axis对齐方式
align-content	flex-start	flex-end	center		stretch	用于多行的Flex容器，控制Flex项目在Cross-Axis对齐方式

Flex项目

| 属性 | 值 | | 含义 |

| order | 数值 | 根据order值重新排序。从底到高。|
| flex-grow | 0 || positive number | 控制Flex项目在容器有多余的空间如何放大 |
| flex-shrink | 0 || positive number | 控制Flex项目在容器没有额外空间又如何缩小 |
| flex-basis | auto || % || em || rem || px | 指定Flex项目的初始大小 |
| align-self | auto || flex-start || flex-end || center || baseline || stretch | 控制单个Flex项目在Cross-Axis对齐方式 |

flex-grow

将每一个item所设置的 grow 全部加起来，获得可用空间，然后除以总的grow值，得到单位分配空间。
默认情况下，flex-grow属性值设置为0，表示Flex项目不会增长，填充Flex容器可用空间。

flex-shrink

先将所有项目按照 flex-shrink * item-size 的方式加起来得到一个加权和，然后计算出每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 之前的总和。最后每一个item 减去这个 shrink比例 * 负可用空间。
默认情况下，flex-shrink属性值设置为1，表示Flex项目会缩小，适应屏幕宽度

flex-basis

flex-basis指定了 flex 元素在主轴方向上的初始大小，即决定了 flex项目内容的宽或者高（取决于主轴的方向）的尺寸大小。
flex-basis和width/height有一定的优先级，具体规则如下：

flex-basis 的优先级比 width/height 非auto高
width/height auto优先级等于 flex-basis，取两者中的最大值。

align-self

align-self 控制单个项目沿着Cross-Axis的对其方式。

flex属性

flex是 flex-grow,flex-shrink,flex-basis 的简写
flex:1是 flex:1 1 auto的缩写

  .box {
    display: flex;
    width: 500px;
    > div{
        width:120px;
        &:last-child{
          flex-shrink: 2;
        }
    }
  }


  <div className="box">
      <div style={{backgroundColor:'red'}}>A</div>
      <div style={{backgroundColor:'lightblue'}}>B</div>
      <div style={{backgroundColor:'yellow'}}>C</div>
      <div style={{backgroundColor:'brown'}}>D</div>
      <div style={{backgroundColor:'lightgreen'}}>E</div>
</div>

如上，box是flex布局，子元素每个的宽度是120px，超出父元素的总宽度100px，
** 100 = 120 * 5 - 500 **
所以此时单独设置flex-grow是无效的，因为此时已经没有空间供于子元素扩展了

在未设置flex-shrink的情况下，即使设置子元素的宽度为120px，也会因为父元素的总宽度的限定而使子元素的宽度等比例收缩为100px;

120 - 1 * (1+1+1+1+1) * 100 = 100px

设置最后一个子元素的flex-shrink:2，此时弹性盒子会自动进行一下换算：
1）将超出的宽度等比例分割为2+1+1+1+1即六份，因为子元素的flex-shrink的默认值为1，
2）此时，最后一个子元素收缩超出部分的2份，其他的分别收缩一份
超出的宽度 100 = 120* 5 - 500

//最后一个子元素的宽度为
120 - 2 * (2+1+1+1+1) * 100 = 86.67
//其余的宽度为
120 - 1 * (2+1+1+1+1) * 100 = 103.33

原文链接：
https://www.jianshu.com/p/0db2e9eb10f0
https://www.jianshu.com/p/4b606cb31f56