flex: 1，对应的具体的值

[jiaochunxiao]

flex相关

容器属性

flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

• flex-direction 决定主轴方向，即项目的排列方向

.box {
  flex-direction: row | row-reverse | column |column-reverse;
}

• flex-wrap 定义如果一条轴线排不下，如何换行

  .box {
  flex-wrap: nowrap | wrap | wrap-reverse;
  }

• flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

  .box {
  flex-flow: <flex-direction> || <flex-wrap>;
  }

• justify-content justify-content属性定义了项目在主轴上的对齐方式。

  .box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
  }

• align-items align-items属性定义项目在交叉轴上如何对齐。

  .box {
  align-items: flex-start | flex-end | center | baseline | stretch;
  }

• align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  .box {
  align-content: flex-start | flex-end | center | space-between | space-around;
  }

项目属性

order、 flex-grow 、 flex-shrink、 flex-basis、flex、algin-self

• order order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex-grow flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

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

• flex-basis flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

• align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  .item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }

  建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

复习完基本的知识，现在来看 flex: 1。

flex : 1

flex为一个非负数字n：该数字为flex-grow的值，

 flex：n；
 =
 flex-grow：n；
 flex-shrink: 1;
 flex-basis：0%；

flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值，

  flex：n1 n2; 
  =
  flex-grow：n1；
  flex-shrink：n2;
  flex-basis：0%；

flex为一个长度或百分比L：视为flex-basis的值，

  flex: L; 
  = 
  flex-grow：1;
  flex-shrink：1;
  flex-basis：L；

flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，

  flex：n L
  =
  flex-grow：n;
  flex-shrink：1;
  flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。 flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

参考

• Flex 布局教程：语法篇

• flex属性-flex:1到底是什么

[jiangzhenxiang]

flex: 1即flex-grow: 1; flex-shrink: 1; flex-basis: auto。

flex: 1，这个1表示flex-grow，此时flex-shrink和flex-basis都使用默认值，分别是1和auto

[jiaochunxiao]

flex: 1即flex-grow: 1; flex-shrink: 1; flex-basis: auto。

flex: 1，这个1表示flex-grow，此时flex-shrink和flex-basis都使用默认值，分别是1和auto

当flex取值为一个非负数字时，则该数字是设置的flex-grow值，其它两个属性用初始值，如flex:1时，等同于flex: 1 1 0%