居中和底部对齐弹性项目

Question

我有一个具有以下属性的弹性容器（蓝色方块）：

 display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

因此，它的子项（浅蓝色方块）会按照您在下面看到的那样自行排列。但是，我想在正常流程之外添加另一个子项（绿色方块）并将其相对于其父项定位。要按照下面的方式定位它，我最好写一些类似 bottom: 20px; 和 margin: auto; 的东西。

我试着玩弄 z-index 但无济于事。我应该如何处理这个问题？我应该求助于创建另一个父元素吗？

原文由 Willege 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下是实现此布局的五个选项：

1. CSS 定位
2. 具有不可见 DOM 元素的 Flexbox
3. 带有隐形伪元素的 Flexbox
4. 带有 flex: 1 的 Flexbox
5. CSS 网格布局

---

方法#1：CSS 定位属性

将 position: relative 应用于弹性容器。

将 position: absolute 应用于绿色弹性项目。

现在绿色方块绝对定位在 flex 容器中。

更具体地说，绿色方块已从文档流中移除，但仍保留在 最近定位的祖先 的范围内。

使用CSS偏移属性 top ， bottom left right

 flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  border: 4px solid blue;
  height: 300px;
  width: 300px;
}
flex-container > flex-item:first-child {
  display: flex;
}
flex-container > flex-item:first-child > flex-item {
  border: 4px solid aqua;
  height: 50px;
  width: 50px;
  margin: 0 5px;
}
flex-container > flex-item:last-child {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%); /* fine tune horizontal centering */
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}

 <flex-container>
    <flex-item><!-- also flex container -->
	    <flex-item></flex-item>
	    <flex-item></flex-item>
	    <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

一个警告： 一些浏览器可能不会从正常流程中完全删除绝对定位的弹性项目。这会以一种非标准的、意想不到的方式改变对齐方式。更多细节： 绝对定位的 flex 项目不会从 Firefox 和 IE11 的正常流程中删除

---

方法#2：Flex Auto Margins & Invisible Flex Item（DOM 元素）

通过结合 auto 边距 和一个新的、不可见的 flex 项目，可以实现布局。

新的弹性项目与底部项目相同，并放置在另一端（顶部）。

更具体地说，因为弹性对齐是基于自由空间的分布，所以新项目是保持三个蓝色框垂直居中的必要平衡。新项目必须与现有绿色项目的高度相同，否则蓝色框不会精确居中。

使用 visibility: hidden 从视图中删除新项目。

简而言之：

• 创建绿色框的副本。
• 将它放在列表的开头。
• 使用 flex auto 边距使蓝色框居中，两个绿色框从两端创造相等的平衡。
• 将 visibility: hidden 应用到重复的绿色框。

 flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid blue;
    height: 300px;
    width: 300px;
}
flex-container > flex-item:first-child {
    margin-top: auto;
    visibility: hidden;
}
flex-container > flex-item:nth-child(2) {
    margin-top: auto;
    display: flex;
}
flex-container > flex-item:last-child {
    margin-top: auto;
    margin-bottom: auto;
}
flex-container > flex-item:first-child,
flex-container > flex-item:last-child {
    border: 4px solid chartreuse;
    height: 50px;
    width: 50px;
}
flex-container > flex-item:nth-child(2) > flex-item {
    border: 4px solid aqua;
    height: 50px;
    width: 50px;
    margin: 0 5px;
}

 <flex-container>
    <flex-item></flex-item>
    <flex-item><!-- also flex container -->
	    <flex-item></flex-item>
	    <flex-item></flex-item>
	    <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

---

方法#3：Flex Auto Margins & Invisible Flex Item（伪元素）

此方法类似于 #2，除了它在语义上更清晰并且必须知道绿色框的高度。

• 创建一个与现有绿色框高度相同的伪元素。
• 使用 ::before 将它放在容器的开头。
• 使用 flex auto 边距使蓝色框保持居中，绿色伪元素和 DOM 元素从两端创建相等的平衡。

 flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid blue;
    height: 300px;
    width: 300px;
}
flex-container::before {
  content: "";
  margin-top: auto;
  height: calc(50px + 8px);  /* height + borders */
  visibility: hidden;
}
flex-container > flex-item:first-child {
  margin-top: auto;
  display: flex;
}
flex-container > flex-item:last-child {
  margin-top: auto;
  margin-bottom: auto;
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}
flex-container > flex-item:first-child > flex-item {
  border: 4px solid aqua;
  height: 50px;
  width: 50px;
  margin: 0 5px;
}

 <flex-container>
    <flex-item><!-- also flex container -->
        <flex-item></flex-item>
	    <flex-item></flex-item>
	    <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

---

方法 #4：将 flex: 1 添加到顶部和底部项目

从上面的方法 #2 或 #3 开始，不要担心顶部和底部项目的高度相等以保持相等的平衡，只需给每个项目 flex: 1 。这将迫使它们都消耗可用空间，从而使中间项居中。

然后，您可以将 display: flex 添加到底部项目以对齐内容。

---

方法#5：CSS 网格布局

这可能是最干净、最有效的方法。不需要绝对定位、虚假元素或其他骇客手段。

只需创建一个包含三行的网格。然后将第二行和第三行中的项目居中对齐。第一行可以留空。

 grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  border: 4px solid blue;
  height: 300px;
  width: 300px;
}

grid-item:nth-child(2) {
  display: flex;
}

grid-item:nth-child(2)>flex-item {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border: 4px solid aqua;
}

grid-item:nth-child(3) {
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}

 <grid-container>
  <grid-item></grid-item>
  <grid-item><!-- also flex container -->
    <flex-item></flex-item>
    <flex-item></flex-item>
    <flex-item></flex-item>
  </grid-item>
  <grid-item></grid-item>
</grid-container>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

让容器 position: relative 和绿色方块 position:absolute;

 body {
  margin: 0;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 192px;
  height: 192px;
  border: 4px solid indigo;
  position: relative;
  background: lavender;
}

.blue {
  margin: 10px;
  width: 30px;
  height: 30px;
  outline: 4px solid skyblue;
  background: honeydew;
}

#green {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  outline: 4px solid yellowgreen;
  background: greenyellow;
}

 <div id=container>
<div class=blue></div><div class=blue></div><div class=blue></div>
<div id=green></div>
</div>

原文由 L777 发布，翻译遵循 CC BY-SA 3.0 许可协议