justify-content: center 不工作在 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。

请查看我的 sn-p，如果您有任何问题，请告诉我。

#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>

Answer 2

使用align-items: center 或align-content: space-evenly 或同时使用。

没有align-items 或align-content

.flex-container {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
}

.flex-children {
  width: 40px;
  height: 40px;
  background-color: red;
}

<div class="flex-container">
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
</div>

使用align-items 或align-content

.flex-container {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.flex-children {
  width: 40px;
  height: 40px;
  background-color: red;
}
  

<div class="flex-container">
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
  <div class="flex-children"></div>
</div>

CSS-tricks: align-items

CSS-tricks: align-content