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

您已将show flex添加到.menu_options元素，该元素引用该单元格。这就是为什么元素不作为块的原因如果你删除那里的显示flex，它们将堆叠在彼此之上。

如果您仍然想使用display：flex（例如中心内容），您可以添加flex-direction：列 - 这也会将它们放在彼此的顶部。

Answer 2

如果您将.menu_box_body css替换为两行以下

＆＃13;

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

＆＃13;

＆＃13; 以下两行

＆＃13;

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

＆＃13;

＆＃13; 你会得到结果。
最终的CSS将是

＆＃13;

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

＆＃13;

如何在柔性显示中将元素置于彼此之下？

2 个答案: