使弹性项目居中对齐和底部对齐

Question

我有一个具有以下属性的flex容器（蓝色正方形）：

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

因此，其子项（浅蓝色方块）如下所示排列它们自己。但是，我想从正常流程中添加另一个孩子（绿色正方形）并将其相对于其父对象放置。要将其定位在下面，如您所见，我最好编写类似bottom: 20px;和的内容margin: auto;。

我试着z-index无济于事。我应该如何处理？我应该使用另一个父元素吗？

Answer 1

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

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

方法1：CSS定位属性

应用于position: relativeflex容器。

应用于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项目。这会以非标准的意外方式更改对齐方式。更多详细信息：绝对定位的flex项目不会从Firefox和IE11的常规流程中删除

方法2：Flex自动边距和不可见的Flex项（DOM元素）
结合使用页auto边距和新的，不可见的柔性项目，可以实现布局。

新的伸缩项目与底部项目相同，并位于另一端（顶部）。

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

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

简而言之：

• 创建绿色框的副本。
• 将其放在列表的开头。
• 使用弹性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自动保证金和不可见的Flex项（伪元素）

此方法与＃2相似，但在语义上更简洁，并且必须知道绿色框的高度。

• 创建一个高度与现有绿色框相同的伪元素。
• 将其放置在容器的开头::before。
• 使用弹性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>