如何将两个flex项中的一个置于flex容器中？

Question

我希望方框2位于#box-cntnr的中心，所以我使用的是align-self属性。我会对实现这一目标的其他方法持开放态度。 JSFiddle

HTML

<div id="box-cntnr">
  <div class="box" id="b1">box 1</div>
  <div class="box" id="b2">box 2</div>
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

#box-cntnr {
  display: flex;
}

#b1 {
  align-self: center;
}

Answer 1

假设您希望BOX＃2在Flex容器中垂直和水平居中，您需要做的第一件事就是给容器一些高度。

在您的代码中，flex项目只能水平居中，因为容器没有指定高度，所以它解析为内容高度，垂直空间有限。

HTML （无更改）

<强> CSS

html, body { height: 100%; }

body { margin: 0; }

#box-cntnr {
  display: flex;
  position: relative;
  height: 100%;
  background-color: yellow;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

#b2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Revised Fiddle

通过在Flex容器中分配可用空间，justify-content，align-items，align-self和auto边距等Flex对齐属性起作用。因此，如果BOX＃2是容器中唯一的弹性项目，我们可以使用这些属性来实现完美的居中。

但是，BOX＃2有一个兄弟（BOX＃1），因此这些属性不能有效地用于居中，因为BOX＃1占用空间，这将导致计算失败。换句话说，弹性对齐属性将使BOX＃2位于剩余空间中。

最简单的方法是使用absolute positioning。我们可以将position: relative应用于容器，将position: absolute应用于BOX＃2。这将从文档流中删除BOX＃2，并使我们能够在父级的整个空间内自由对齐它。

Answer 2

您可以使用此....并添加 像这样

＆＃13;

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

#box-cntnr {
  display: flex;
}

#b1 {
  align-self: center;
}
.ctr1 {
  margin:0 auto;
  display: flex;
}

＆＃13;

<div id="box-cntnr">
<div class="ctr1">
  <div class="box" id="b1">box 1</div>
  <div class="box" id="b2">box 2</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;