flex 缩写

html
 <div class="nav-bottom-box">
   <div class="left">1</div>
   <div class="right">2</div>
 </div>
scss
.nav-bottom-box {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100px;
 display: flex;
 div {
   flex: auto;
   border: 1px solid #f00;
 }
}

image.png

• flex ： 第一个参数 会伸长并吸收 flex 容器中额外的自由空间，第二个参数 会缩短自身来适应 flex 容器，第三个参数：

flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：

auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。

content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。

百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

取值

• initial
  元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。
• auto
  元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
• none
  元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

栗子：

image.png

伸长

image.png

缩短

image.png

.left : flex: 1 1 120px; .right: auto

image.png

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex