仅在柔性箱中的单个项目中居中

Question

我有一个柔性箱控制的脚。它可以包含1,2或3个从属的div。

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

对于2或3个div，上面的css工作得很好：

• 其中，左和右被左、右冲红，中间位于中间。
• 有了两个，它们就被左右冲了。

但对于单一的div，它是左对齐的。我希望它是居中的。

如何调整css，以便在单个div中居中，同时保留2或3div的行为。

Answer 1

.footer > :only-child
{
    margin-left: auto;
    margin-right: auto;
}

Answer 2

如果你想用边距来做，调整边距，你可以使用space-evenly，或者跨浏览器使用伪元素和你现有的space-between。

堆栈片段-伪+ space-between

​

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer::before, .footer::after {
  content: '';
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

​

堆栈片段- space-evenly (浏览器支持)

​

.footer {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

​