如何使用 flexbox 在每个断点处居中 div？答案

【问题标题】：How to center divs at every breakpoint with flexbox?如何使用 flexbox 在每个断点处居中 div？
【发布时间】：2019-06-17 22:01:54
【问题描述】：

我想将 div 以我目前拥有的方式居中，但问题是当有两个 div 时，它们不会与上面的矩形对齐。我知道它们会与justify-content:space between 对齐，但这会阻止 div 在它是行中唯一的一个时居中。我想做的事有可能吗？

.wrapper {
  max-width: 1000px;
  margin: 0 auto
}

.title {
  width: 100%;
  height: 100px;
  background: green;
  margin-bottom: 30px;
}

.outer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  /*            flex-grow, flex-shrink, flex-basis*/
  flex: 0 0 31%;
  margin: 0 1% 2% 1%;
  height: 300px;
}

.col1 {
  background-color: red;
}

.col2 {
  background-color: blue
}

.col3 {
  background: black;
}

@media only screen and (max-width: 960px) {
  .col {
    flex: 0 0 48%;
  }
}

@media only screen and (max-width: 480px) {
  .col {
    flex: 0 0 100%;
  }
}

<div class="wrapper">
  <div class="title">

  </div>
  <div class="outer">
    <div class="col col1">

    </div>
    <div class="col col2">

    </div>
    <div class="col col3">

    </div>

  </div>

</div>

【问题讨论】：

这可能不是一个完美的解决方案，但可能值得考虑：使用justify-content: space-around 而不是space-between。 stackoverflow.com/q/38290861/3597276

标签： html css flexbox

【解决方案1】：

您可以将margin-left: auto 设置为.col1，将margin-right: auto 设置为.col2，分别推送div。

.wrapper {
  max-width: 1000px;
  margin: 0 auto
}

.title {
  width: 100%;
  height: 100px;
  background: green;
  margin-bottom: 30px;
}

.outer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  /*            flex-grow, flex-shrink, flex-basis*/
  flex: 0 0 31%;
  margin: 1% 0 2% 0;
  height: 300px;
}

.col1 {
  background-color: red;
  margin-right: auto;
}

.col2 {
  background-color: blue;
  margin-left: auto;
}

.col3 {
  background: black;
}

@media only screen and (max-width: 960px) {
  .col {
    flex: 0 0 48%;
  }
}

@media only screen and (max-width: 480px) {
  .col {
    flex: 0 0 100%;
  }
}

<div class="wrapper">
  <div class="title">

  </div>
  <div class="outer">
    <div class="col col1">

    </div>
    <div class="col col2">

    </div>
    <div class="col col3">

    </div>

  </div>

</div>

【讨论】：