防御式CSS是什么？

作者：Ahmad Shadeed
译者：前端小智
来源：ishadeed

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。

防御式 CSS是一个片段的集合，可以帮助我编写受保护的CSS。换句话说，就是将来会有更bug出现。

1.Flexbox 包裹

CSS flexbox 是目前最有用的CSS布局功能之一。在一个包装器上添加 display: flex，让子项挨着排序。

问题是，当空间不足时，那些子项默认不会被包裹成一个新的行。我们需要用 flex-wrap: wrap 来改变这一行为。

下面是一个典型的例子。

.options-list {
    display: flex;
}

当空间较少时，会出现水平滚动