css - 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 元素保持在一行上(即使它们溢出容器)。

   来自你的问题:

   The problem is that with the flex style properties, when the window is <768px ideally the content would change layout and each col-md-4 would stack on top of one another. This is not happening, instead the columns just become really skinny and are displayed still side by side.

   听起来 flex 元素没有换行。尝试将其添加到 flex 容器中:

   flex-wrap: wrap;
   

2. 如果您希望 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 .