flexbox 中的引导列不在较小的屏幕上换行答案

【问题标题】：Bootstrap columns in flexbox not wrapping on smaller screensflexbox 中的引导列不在较小的屏幕上换行
【发布时间】：2016-01-10 14:19:42
【问题描述】：

我的网站有一个部分，我在 2 个 div 上使用下面的 CSS，以及一个 a 标签，以使内容在中心垂直对齐。

问题在于，使用 flex 样式属性时，理想情况下，当窗口 col-md-4 会堆叠在一起。

这并没有发生，而是这些列变得非常细，并且仍然并排显示。有没有什么办法解决这一问题？最好尽量远离表格单元格格式

.about-us-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-nav a {
    font-size: 20px;
    color: #52361D;
    background-color: #885A31;
    border-color: #52361D;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-help-container {
    margin-top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    z-index: 2;
}

【问题讨论】：

这篇文章在我第一次在项目中使用flexbox时确实帮助我理解了它：css-tricks.com/snippets/css/a-guide-to-flexbox
在 Bootstrap 4 中，您可以使用“flex-wrap”类来实现与自己手动编写 flexbox css 相同的功能。

标签： css html twitter-bootstrap flexbox

【解决方案1】：

您应该考虑两件事：

当你将display: flex 应用到一个元素上时，它就变成了一个带有多种默认样式的弹性容器。

其中一个默认值是flex-direction: row，它沿水平轴对齐弹性项目（子元素）。要切换到垂直方向，您需要指定flex-direction: column。

另一个默认值是flex-wrap: nowrap，它强制弹性项目保持在一行（即使它们溢出容器）。

根据您的问题：

问题在于，使用 flex 样式属性，当窗口 col-md-4 会堆叠在一起。这没有发生，而是列变得非常瘦，仍然并排显示一边。

听起来弹性项目没有包装。尝试将其添加到 flex 容器中：
```
flex-wrap: wrap;
```
如果您希望 flex 项目在窗口小于 768 像素时垂直堆叠，请使用带有 flex-direction 属性的媒体查询。
```
@media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
```

关于浏览器支持的说明：

所有主流浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。更多详情this answer。

【讨论】：