如何在 flex 顯示中將元素放在彼此下方？

Question

這是我的代碼：

 .menu_box { background-color: whitesmoke; margin: auto; position: fixed; top: 0; bottom: 0; left: 0; right: 0; border-radius: 3px; width: 100vh; height: 60vh; display: flex; flex-direction: column; } .menu_box_body { flex-grow: 1; display: flex; flex-direction: row; flex-wrap: wrap; width:100%; } .menu_box_header { height: 45px; background-color: #f1f1f1; border-bottom: 1px solid #e1e1e1; position: relative; margin-bottom: 10px; width: 100%; } .menu_options { border: 1px solid #e1e1e1; display:flex; align-items:center; justify-content:center; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="menu_box"> <div class="menu_box_header"> </div> <div class="menu_box_body"> <div class="menu_options col-xs-6"><div>{icon}</div><h3>part1</h3></div> <div class="menu_options col-xs-6"><div>{icon}</div><h3>part2</h3></div> <div class="menu_options col-xs-6"><div>{icon}</div><h3>part3</h3></div> <div class="menu_options col-xs-6"><div>{icon}</div><h3>part4</h3></div> </div> </div>

我想把{icon}放在partN的頂部（不是每個partN ） 。 我該怎么做？ 如您所知， <div>和<h3>都有block顯示。 但我真的不知道為什么他們彼此相鄰。 無論如何，我怎樣才能把它們放在一起？

Answer 1

如果將 .menu_box_body css 替換為兩行以下

flex-direction: row;
flex-wrap: wrap;

與以下兩行

flex-direction: column;
align-items:center;

你會得到結果。 最終的 CSS 將是：

.menu_box_body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items:center;
  width:100%;
}

Answer 2

您已將 display flex 添加到 .menu_options 元素，該元素引用單元格。 這就是為什么元素不作為塊的原因 如果您在那里刪除 display flex，它們將堆疊在彼此的頂部。

如果您仍然想在那里使用 display:flex （例如居中），您可以添加 flex-direction: column - 這也會將它們放在彼此的頂部。