从来没使用过的max/min-content、fit-content

标题写的是从来没有使用过的width属性，有点标题党了。更加准确的是，在此之前我甚至从来都没有见过。

它们是max-content、min-content、fit-content。

要不是为了实现这个效果之前，搜索了一下这才知道，真是开了眼了，故写下这篇文章记录一下。

CSS是真的难, 虽然很久没有写过CSS了，但是感觉自己绝大多数时候还是没有啥问题的，一旦遇上了，一时感觉就很无解。

一、目标的效果

• 这是一个步骤图
• 步骤节点个数不确定
• 步骤节点超过当前容器不换行
• 出现滚动条
• 最外面的容器宽度继承父级百分百，宽度不固定
• 节点外层有背景颜色

其余的需求不重要。

二、实现代码

2.1 触发BFC解决问题

html部分：

<div class="container">
    <div class="wrap">
      <div class="box">
            <div class='item'></div>
            <div class='item'></div>
            <div class='item'></div>
            <div class='item'></div>
            <div class='item'></div>
            <div class='item'></div>
      </div>
    </div>
</div>

一开始想的是在box上面直接使用flex,然后让wrap可滑动就行了, container模拟容器宽度。就有了如下的css：

.container {
  width: 300px;
}

.wrap {
  overflow-x: scroll;
  overflow-y: hidden;
}

.box {
  padding: 24px;
  display: flex;
  align-items: center;
}

.item {
  width: 100px;
  height: 60px;
  background: salmon;
  margin-right: 12px;
}

结果如下：

由于flex的属性的原因，item的挤在一行，width被重新计算了。那么我给box添加上width: 100%呢？会有如下的结果：

哦？宽度还是被压缩了。看来width和flex有点不对付啊。去翻阅一下妧一峰老师的Flex布局教程，发现了一个属性flex-shrink.

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 --- 出自阮一峰《Flex布局教程》

所以给item添加上flex-shrink: 0之后，效果果然没问题了。

item的宽度没问题了，也可以滑动了。再给item的父级添加一下背景颜色，哦豁，问题来了，iterm的父级没有跟着扩宽。

它超出最外层容器宽度之后，就断了。。。。也就是说item的宽度并没有把父级给撑起来。那给box添加一个overflow: auto，让它触发了[[BFC]]。

子元素已经能够撑起父元素的宽度了，但是就和图片一样，它又带来了新的问题。多了一个滚动条。那还得把wrap上面的 overflow-x: scroll给删除掉，完美了。这时候的代码片段如下：

.wrap {
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid rebeccapurple;
}

.box {
  padding: 24px;
  display: flex;
  align-items: center;
  background-color: gainsboro;
  overflow: auto;

}

.item {
  flex-shrink: 0;
  width: 100px;
  height: 60px;
  background: salmon;
  margin-right: 12px;
}

触发[[BFC]]来解决问题总感觉非常的hack，它不符合逻辑。为什么再有了flex属性之后，子元素就撑不起父元素的宽度了呢？width是不是有其他属性可以解决这个问题呢？

在BB的指点下，我打开了MDN的width部分。

2.2 width: max-content

果然，看到了这样的属性：

width的默认值是auto。

给box添加上max-content、min-content、fit-content任何一个属性值都可以实现需求。而且不需要修改wrap上面的overflow-x, 更加的符合直觉。

子元素就应该默认可以撑宽父元素，然后父元素再触发容器overflow-x: scroll的效果。

css如下：

.wrap {
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid rebeccapurple;
}
.box {
  padding: 24px;
  display: flex;
  align-items: center;
  /* width: 100%; */
  /* width: max-content; */
  /* width: min-content; */
  width: fit-content;
  background-color: gainsboro;
}
.item {
  width: 100px;
  height: 60px;
  background: salmon;
  margin-right: 12px;
}

这个是不是也算是触发了BFC呢？

三、总结

对于三者的区别和解析，我这里就不丢人现眼了。大家可以直达张鑫旭大哥的个人博客搜索"理解CSS3 max/min-content..."关键字，写得已经足够的直接和简单了。

对于这个知识点觉得没啥可以总结的。就是觉得自己现在靠着前端这门手艺活生存，但是却缺乏对于它一些属性的基本认识，不会用某些属性情有可原，毕竟不是天天都在用，忘记了很正常。

但是在这之前从来没有见过就不应该了。本来以为是新的属性，结果一看，2016年就出来了。。。有一种全世界只有自己不懂的感觉。

这雀氏是值得反思的。

1. 没有养成常翻阅文档的习惯
2. 缺少对于CSS系统的了解
3. 缺乏对于CSS的敬畏心

第一点，我大概之前听过小野说过，他即便已经不在一线编程了，依旧每周都会翻阅MDN，加深自己的印象。我是在用到的时候才偶尔翻翻。

第二点，CSS是有其逻辑存在的，只不过比较分散，不要求自己能够精通，但是心中至少要形成知识体系，遇到了问题可以知道哪里有，哪里能够解决。