作者：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;
}
当空间较少时，会出现水平滚动
