居中和底部对齐弹性项目

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>

一个警告:某些浏览器可能无法从正常流程中完全删除绝对定位的弹性项目.这会以非标准的,意外的方式更改对齐方式.更多细节:Firefox和IE11中的正常流程不会删除绝对定位的flex项目

方法#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网格布局

这可能是最干净,最有效的方法.不需要绝对定位,虚假元素或其他hackery.

只需创建一个包含三行的网格.然后居中对齐第二行和第三行中的项目.第一行可以保持为空.

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>