為什么在我添加對齊項之前 flex-direction 和 justify-content 不起作用？

Question

我在搞亂 flexbox 並且我意識到一些奇怪的事情——我想制作一排位於包裝器中間的元素； 我本能地選擇了類似的東西：

.wrapper {
  // ...
  display: flex;
  flex-direction: column; /*makes the items in a row*/
  justify-content: center; /*places the x-axis to the center*/
}

它沒有用。 內部物品仍然粘在左邊。 我很困惑，所以我盡我所能。 為了完整起見，我也嘗試了align-items （y 軸），令我驚訝的是它解決了問題。 包裝紙的所有孩子都在容器中央排成一排。 我在 web 的任何地方都找不到這個文檔？ 有人能解釋一下這個現象嗎？

下面是一個示例：

 #without-align-items { display: flex; width: 200px; height: 200px; background-color: dodgerblue; flex-direction: column; justify-content: center; } #with-align-items { display: flex; width: 200px; height: 200px; background-color: hotpink; flex-direction: column; justify-content: center; align-items: center; /*???*/ }

 <div id="without-align-items"> <p>Without</p> <p>Without</p> <p>Without</p> </div> <div id="with-align-items"> <p>With</p> <p>With</p> <p>With</p> </div>

Answer 1

flex-direction: row; 是默認值，項目水平對齊並垂直對齊。

當你使用flex-direction: column; 項目垂直對齊並水平對齊。