证明内容：中心无法在flex上运行：移动设备中100％

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>

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