html - 居中和底部对齐 flex 元素

Question

我有一个具有以下属性的 flex 容器(蓝色方 block ):

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

因此，它的 child (浅蓝色方 block )如下所示排列。但是，我想在正常流程之外添加另一个 child (绿色方 block )并将其相对于其父级定位。要将其定位为如下所示，理想情况下我会写 bottom: 20px;和 margin: auto; .



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

Answer 1

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

CSS 定位

带有隐形 DOM 元素的 Flexbox

具有不可见伪元素的 Flexbox

带有 flex: 1 的 Flexbox

CSS 网格布局

方法 #1:CSS 定位属性

申请 position: relative到 flex 容器。

申请 position: absolute到绿色的 flex 元素。

现在绿色方 block 绝对定位在 flex 容器内。

更具体地说，绿色方 block 已从文档流中移除，但仍保持在 nearest positioned ancestor 的范围内。 .

使用 CSS 偏移属性 top , bottom , left和 right移动绿色方 block 。

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 元素。这会以一种非标准的、意想不到的方式改变对齐方式。更多详情:Absolutely positioned flex item is not removed from normal flow in Firefox & IE11

方法 #2:Flex 自动边距和不可见的 Flex 元素(DOM 元素)

与 auto margins 的组合和一个新的、不可见的 flex 元素可以实现布局。

新的 flex 元素与底部元素相同，并放置在另一端(顶部)。

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

使用 visibility: hidden 将新元素从 View 中移除.

简而言之:

创建绿色框的副本。

将其放在列表的开头。

使用 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>