Question

我有一个flexbox控制的页脚。它可以包含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工作正常：

三个，左和右左右冲洗，中位于中间。
2，他们左右冲洗

但是使用单个 div ，它是左对齐的。我希望它会集中。

如何调整css，以便在单个 div 的情况下，它将居中，同时保留2或3 div 的行为？

Answer 1

#!/bin/bash

path="./dir1/dir2/dir3/xxx.txt"
suffix="something fixed string"
prefix=`echo $path | cut -d/ -f1,2`
echo "$prefix/$suffix"

Answer 2

您可以确保您的商品在可用空间中增长，因此其内容将相对于商品

.footer > div {
   flex-grow:1:
   text-align: center; // for example
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.footer > div {
 flex-grow:1;
 text-align:center; //for example
}

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

Answer 3

如果您想使用保证金来执行此操作，请调整保证金，您可以使用space-evenly，或使用伪元素的交叉浏览器技巧和现有的space-between

Stack snippet - pseudo + space-between

＆＃13;

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

＆＃13;

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

＆＃13;

堆叠代码段 - space-evenly（browser support）

＆＃13;

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

＆＃13;

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

＆＃13;

当flexbox中只有一个项目时居中

3 个答案: