柔性項忽略對齊內容特性

Question

我有以下幾點：

main { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-content: center; 
 
    } 
 

 
.content-container { 
 
    padding: .5em; 
 
    margin-bottom: 74px; 
 
    flex-basis: min-content; 
 
    }

<main> 
 
<div class="content-container"> 
 
    <div>Exercitationem officiis, quod. Culpa deserunt et nisi perspiciatis quisquam tempora tempore voluptates? 
 
     Assumenda commodi distinctio fugiat illo in ipsam maiores minus nam ratione rem, saepe soluta tempora, vero. 
 
     Quisquam, voluptatum! 
 
    </div> 
 
    <div>Autem cumque debitis deleniti dicta doloremque ea est ex, harum magni natus omnis placeat provident recusandae 
 
     saepe sapiente, ut voluptas voluptate, voluptatibus? Dolore dolores iure necessitatibus non obcaecati saepe sequi! 
 
    </div> 
 
</div> 
 
</main

我想有.content-container無論屏幕大小始終居中。但問題是，.content-container DIV總是獲得的100vh的高度（不考慮不具有確定的高度）。我嘗試設置flex-basis，但它沒有效果。

如果我手動設置height到例如100像素，該內容將剛剛重疊。

我在做什麼錯？

Answer 1

在單線路柔性容器（flex-wrap: nowrap），使用align-items爲橫軸對準。

在多線柔性容器（flex-wrap: wrap），使用align-content。

在這種情況下，因爲只有一條彎曲線（佔用容器的全高），請在容器上使用align-items: center，或者在該項上使用。

align-items進入柔性容器上。它爲所有項目設置默認align-self。

align-self推移個人柔性物品。它覆蓋父母爲該特定項目設置的align-items。

下面是一個更完整的解釋：

• How does flex-wrap work with align-self, align-items and align-content?

Answer 2

嘗試增加：

.content-container { 
    align-self: center; 
    flex: 1; 
} 

Answer 3

使用align-items分發沿其容器的交叉軸項目：

main { 
     align-items: center; 
}