谈一谈flex布局使用中碰到的一些问题

时间：2018-11-05 11:36:32 阅读：149 评论：0 收藏：0 [点我收藏+]

起因

工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题，以及一些有意思的特性，在此写篇博客记录一下。

flex三个值的含义

众所周知，flex布局所有的属性有两种：一种作用在弹性容器（Flex container）上，一种作用在弹性项目（Flex item）上，而flex就是作用在弹性项目上的属性。

flex 是 flex-grow、flex-shrink、flex-basis 三个值的简写，这个值规定了弹性项目如何伸长或压缩以适应弹性容器中的可用空间。

flex-grow 定义弹性项目的放大比列，可以接受数字（小数也可以），不接受负值，默认值是 0 。这个值如果为 0 就意味着即使容器内还存在剩余空间，弹性项目也不会放大。

flex-shrink 定义弹性项目的收缩比例，同样接受数字（小数也可以），不接受负值，默认值是 1 。如果一个弹性项目的 flex-shrink 设为 0 而其他弹性项目的 flex-shrink 值为 1 ，则当弹性容器空间不足时，该弹性项目不会被压缩，而其他的弹性项目会被等比例压缩。

flex-basis 定义在分配容器内空间之前，弹性项目占据的主轴空间（不一定是宽度，因为主轴方向可以是纵向的），默认值是 auto 。如果对弹性项目同时设置 flex-basis 和 width ， width 会被忽略。还要注意当主轴是横向的时候，如果设定了 max-width 或 min-width 会限制弹性项目的宽度。

这里讲一下 flex-basis 取值的情况：

指定的数值，比如以px、em为单位的数值。
百分数，取百分数的话就是相对其父弹性容器的宽或高（取决于主轴方向）来计算，如果包含块的尺寸未指定（也就是说父元素的尺寸取决于子元素），那么这时候结果和 auto 一样。
auto 值的意思是基于弹性项目的 width 或 height 调整大小（根据主轴的横向或者纵向），如果没有设置 width 或 height 则根据内容自适应。

设置flex之后的弹性项目如何计算宽度

这里给一个代码的例子

&lt;div id="content"&gt;
  &lt;div class="box1" style="background-color:red;"&gt;A&lt;/div&gt;
  &lt;div class="box2" style="background-color:lightblue;"&gt;B&lt;/div&gt;
  &lt;div class="box3" style="background-color:yellow;"&gt;C&lt;/div&gt;
&lt;/div&gt;

#content {
  display: flex;
  width: 360px;
}

.box1 {
  width: 100px;
  flex: 1 1 0;
}

.box2 {
  width: 100px;
  flex: 1 1 0;
}

.box3 {
  width: 100px;
  flex: 1 1 0;
}

由于flex-basis的值为 0 ，所以此时弹性容器的剩余空间为 360px - 0 * 3 = 360px ，由于3个元素都设置了 flex-grow: 1 ，所以剩余空间3个元素所占比例为 1:1:1 ，每个元素的宽度就是 360px / 3 = 120px 。

如果把代码改一下呢？

#content {
  display: flex;
  width: 360px;
}

.box1 {
  width: 100px;
  flex: 1 1 0;
}

.box2 {
  width: 100px;
  flex: 1 1 auto;
}

.box3 {
  flex: 1 1 200px;
}

此时，弹性容器内剩余宽度为：360px - 0 - 100px - 200px = 60px，3个元素所占剩余空间比例同样是 1:1:1 。那么宽度分别就是：0 + 20px = 20px ，100px + 20px = 120px ，200px + 20px = 220px 。

对应复杂情况的计算，这里有一个回答写得不错：

flex设置成1和auto有什么区别