html - 证明内容 : center not working on flex:100% in mobile

Question

我正在尝试构建一个 3 x 3 的响应式按钮链接 flexbox 网格。网格在台式机和平板电脑上看起来很棒，但是在移动版本中，元素左对齐并且无法水平居中。我的目标是为移动设备获得一列，所有内容都居中。我切换到 flex: 100%;对于移动版本并尝试使用 justify-content: center，但它不起作用，我不确定为什么。

#love_button,
#additude_button,
#isnpr_button,
#functional_medicine_button,
#immh_button {
  width: 178px;
  height: 111px;
  display: block;
  background-repeat: no-repeat;
}

.flex-container {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  border: 4px solid orange;
}

.flex-item {
  width: 178px;
  height: 111px;
  flex: 33.3% 33.3% 33.3%;
  margin-bottom: 65px;
  background: royalblue;
}

Mobile Media Query @media only screen and (max-device-width: 640px) {
  /* Fixes bottom gap between resource link and footer mobile */
  .push {
    margin-bottom: 0;
  }
  .flex-container {
    justify-content: center;
  }
  .flex-item {
    flex: 100%;
  }
  #hide {
    display: none;
  }
}

<main>
  <section id="resources">
    <h1 class="resources_header">RESOURCES</h1>
    <div class="flex-container">
      <a href="https://loveandplants.com/" id="love_button" class="flex-item"></a>
      <a href="https://www.additudemag.com/" id="additude_button" class="flex-item"></a>
      <a href="http://www.isnpr.org/publications/" id="isnpr_button" class="flex-item"></a>
    </div>
    <div class="flex-container push">
      <a href="https://www.ifm.org/" id="functional_medicine_button" class="flex-item"></a>
      <a href="http://www.immh.org/" id="immh_button" class="flex-item"></a>
      <a href="#" id="hide" class="flex-item"></a>
    </div>
  </section>
</main>

Answer 1

改为尝试在媒体查询中更改 display:block 和 margin:10px auto。

请检查我的代码片段，如果您有任何问题，请告诉我。

#love_button,
#additude_button,
#isnpr_button,
#functional_medicine_button,
#immh_button {
  width: 178px;
  height: 111px;
  display: block;
  background-repeat: no-repeat;
}

.flex-container {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-evenly;
}

.flex-item {
  width: 178px;
  height: 111px;
  flex: 33.3% 33.3% 33.3%;
  margin-bottom: 65px;
  border: 1px solid red;
  background: green;
}

@media only screen and (max-width: 640px) {
  /* Fixes bottom gap between resource link and footer mobile */
  .push {
    margin-bottom: 0;
  }
  .flex-container {
    display: block;
    margin: auto;
  }
  .flex-item {
    margin: 10px auto;
  }
  #hide {
    display: none;
  }
}

<main>
  <section id="resources">
    <h1 class="resources_header">RESOURCES</h1>
    <div class="flex-container">
      <a href="https://loveandplants.com/" id="love_button" class="flex-item"></a>
      <a href="https://www.additudemag.com/" id="additude_button" class="flex-item"></a>
      <a href="http://www.isnpr.org/publications/" id="isnpr_button" class="flex-item"></a>
    </div>
    <div class="flex-container push">
      <a href="https://www.ifm.org/" id="functional_medicine_button" class="flex-item"></a>
      <a href="http://www.immh.org/" id="immh_button" class="flex-item"></a>
      <a href="#" id="hide" class="flex-item"></a>
    </div>
  </section>
</main>