Question

我正在使用flexbox将内容与justify-content: center集中在一起，其功能符合预期，但flexbox也会将div并排移动，这是我不想要的。

这是一个例子

＆＃13;

.flex {
  display: flex;
  justify-content: center;
}

.content {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 10px;
}

＆＃13;

<div class="flex">
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

＆＃13;

如何在保留另一个定位顶部的默认一个div的同时使用flexbox。

Answer 1

您可以设置flex-direction: column，然后必须使用align-items: center。默认flex-direction为row。

＆＃13;

.flex {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.content {
  width: 100px;
  height 100px;
  color: #000;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

＆＃13;

<div class="flex">
  <div class="content"></div>
  <div class="content"></div>
</div>

＆＃13;

Answer 2

尝试以下代码，

＆＃13;

.flex {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.content {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 10px;
}

＆＃13;

<div class="flex">
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

＆＃13;

使用flexbox将内容居中，而不是并排制作元素

2 个答案: