从来没使用过的maxmincontent

　　标题写的是从来没有使用过的width属性，有点标题党了。更加准确的是，在此之前我甚至从来都没有见过。
　　它们是maxcontent、mincontent、fitcontent。
　　要不是为了实现这个效果之前，搜索了一下这才知道，真是开了眼了，故写下这篇文章记录一下。
　　CSS是真的难，虽然很久没有写过CSS了，但是感觉自己绝大多数时候还是没有啥问题的，一旦遇上了，一时感觉就很无解。一、目标的效果
　　这是一个步骤图步骤节点个数不确定步骤节点超过当前容器不换行出现滚动条最外面的容器宽度继承父级百分百，宽度不固定节点外层有背景颜色
　　其余的需求不重要。二、实现代码2。1触发BFC解决问题
　　html部分：复制代码
　　一开始想的是在box上面直接使用flex，然后让wrap可滑动就行了，container模拟容器宽度。就有了如下的css：。container｛width：300px；｝。wrap｛overflowx：scroll；overflowy：hidden；｝。box｛padding：24px；display：flex；alignitems：center；｝。item｛width：100px；height：60px；background：salmon；marginright：12px；｝复制代码
　　结果如下：
　　由于flex的属性的原因，item的挤在一行，width被重新计算了。那么我给box添加上width：100呢？会有如下的结果：
　　哦？宽度还是被压缩了。看来width和flex有点不对付啊。去翻阅一下妧一峰老师的Flex布局教程，发现了一个属性flexshrink。
　　如果所有项目的flexshrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flexshrink属性为0，其他项目都为1，则空间不足时，前者不缩小。出自阮一峰《Flex布局教程》
　　所以给item添加上flexshrink：0之后，效果果然没问题了。
　　item的宽度没问题了，也可以滑动了。再给item的父级添加一下背景颜色，哦豁，问题来了，iterm的父级没有跟着扩宽。
　　它超出最外层容器宽度之后，就断了也就是说item的宽度并没有把父级给撑起来。那给box添加一个overflow：auto，让它触发了〔〔BFC〕〕。
　　子元素已经能够撑起父元素的宽度了，但是就和图片一样，它又带来了新的问题。多了一个滚动条。那还得把wrap上面的overflowx：scroll给删除掉，完美了。这时候的代码片段如下：。wrap｛overflowx：scroll；overflowy：hidden；border：1pxsolidrebeccapurple；｝。box｛padding：24px；display：flex；alignitems：center；backgroundcolor：gainsboro；overflow：auto；｝。item｛flexshrink：0；width：100px；height：60px；background：salmon；marginright：12px；｝复制代码
　　触发〔〔BFC〕〕来解决问题总感觉非常的hack，它不符合逻辑。为什么再有了flex属性之后，子元素就撑不起父元素的宽度了呢？width是不是有其他属性可以解决这个问题呢？
　　所以我打开了MDN的width部分。width：maxcontent
　　果然，看到了这样的属性：
　　width的默认值是auto。给box添加上maxcontent、mincontent、fitcontent任何一个属性值都可以实现需求。而且不需要修改wrap上面的overflowx，更加的符合直觉。子元素就应该乘宽父元素，然后父元素触发容器overflowx：scroll的效果。
　　css如下：。wrap｛overflowx：scroll；overflowy：hidden；border：1pxsolidrebeccapurple；｝。box｛padding：24px；display：flex；alignitems：center；width：100；width：maxcontent；width：mincontent；width：fitcontent；backgroundcolor：gainsboro；｝。item｛width：100px；height：60px；background：salmon；marginright：12px；｝复制代码
　　这个是不是也算是触发了BFC呢？三、总结
　　对于三者的区别和解析，我这里就不丢人现眼了。大家可以直达张鑫旭大哥的个人博客搜索理解CSS3maxmincointent。。。关键字，写得已经足够的直接和简单了。
　　对于这个知识点觉得没啥可以总结的。就是觉得自己现在靠着前端这门手艺活生存，但是却缺乏对于它一些属性的基本认识，不会用某些属性情有可原，毕竟不是天天都在用，忘记了很正常。
　　但是在这之前从来没有见过就不应该了。本来以为是新的属性，结果一看，2016年就出来了有一种全世界只有自己不懂的感觉。
　　这雀氏是值得反思的。没有养成常翻阅文档的习惯缺少对于CSS系统的了解缺乏对于CSS的敬畏心
　　第一点，我大概之前听过小野说过，他即便已经不在一线编程了，依旧每周都会翻阅MDN，加深自己的印象。我是在用到的时候才偶尔翻翻。
　　第二点，CSS是有其逻辑存在的，只不过比较分散，不要求自己能够精通，但是心中至少要形成知识体系，遇到了问题可以知道哪里有，哪里能够解决。