Flexbox中的Bootstrap列未包裝在較小的屏幕上

Question

我在網站的一部分中使用2格以下的CSS，其中一個a標記，以使內容在中心垂直對齊。

問題在於，使用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項目保留在一行上（即使它們溢出了容器）。

   根據您的問題：

   問題在於，使用flex樣式屬性時，理想情況下，當窗口<768px時，內容將更改布局，並且每個col-md-4都將堆疊在一起。 這並沒有發生，而是列變得非常稀薄，並且仍然並排顯示。

   聽起來彈性項目沒有包裝。 嘗試將其添加到flex容器中：

    flex-wrap: wrap; 

2. 如果希望在窗口<768px時將flex項垂直堆疊，請使用具有flex-direction屬性的媒體查詢。

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

關於瀏覽器支持的注意事項：

除了IE <10以外 ，所有主流瀏覽器都支持Flexbox。 某些最新的瀏覽器版本（例如Safari 8和IE10）需要供應商前綴 。 要快速添加前綴，請使用Autoprefixer 。 此答案中有更多詳細信息。