带CSS的动态居中标题栏

Question

目前我有这个标题栏

#header {
  display: flex;
  align-items: center;
  height: 60px;
  background: gray;
}

.box {
  width: 32px;
  height: 32px;
  margin: 0 5px;
  background: red;
}

<div id="header">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

我希望容器在父级的中心对齐。

正如您所看到的，我总是希望在添加更多div或删除其中一些时将栏置于中心位置。

Answer 1

添加justify-content: space-around规则：

#header {
  display: flex;
  align-items: center;
  height: 60px;
  background: gray;
  justify-content: space-around;
}

.box {
  width: 32px;
  height: 32px;
  margin: 0 5px;
  background: red;
}

<div id="header">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Answer 2

您也可以使用justify-content: space-evenly;。 space-around和space-evenly之间的区别在于，周围的空间朝向父容器的（左侧和右侧）边缘的空间较小，而space-evenly中的空间在任何地方都相似。

#header {
  justify-content: space-evenly;
  display: flex;
  align-items: center;
  height: 60px;
  background: gray;
}

.box {
  width: 32px;
  height: 32px;
  margin: 0 20px;
  background: red;
  
}

<div id="header">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

flexbox的

Here is a good资源。