flexbox 中的 Bootstrap 列不会在较小的屏幕上换行

Question

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

问题在于，对于 flex 样式属性，当窗口小于 768px 时，理想情况下，内容会改变布局，并且每个内容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;
}

Answer 1

您应该考虑两件事：

1. 当您应用display: flex到一个元素时，它变成了一个带有多种默认样式的 flex 容器。

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

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

   从你的问题：

   问题在于，使用 flex 样式属性时，理想情况下，当窗口小于 768px 时，内容会更改布局，并且每个内容col-md-4 都会堆叠在一起。这并没有发生，相反，这些列变得非常细小并且仍然并排显示。

   听起来弹性项目没有包装。尝试将其添加到 flex 容器中：

   flex-wrap: wrap;
   

2. 如果您希望 flex 项目在窗口 < 768px 时垂直堆叠，请使用带有该flex-direction属性的媒体查询。

   @media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
   

关于浏览器支持的注意事项：

所有主流浏览器都支持 Flexbox，但 IE < 10 除外。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。此答案中的更多详细信息。