弹性箱以盒子为中心

Question

所以我对flexbox有点新鲜，我试图将此段放在flexdiv中，并具有最小的宽度，以免它遍布整个页面。但是，一旦我在DIV盒上添加了一个最小的宽度，它就停止了我的内容通过移动宽度。我将在下面添加一个片段，如果有人需要进一步澄清问题，请告诉我。感谢任何花时间对此进行审查并为我提供建议的人！

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  display: flex;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
}
#description {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  color: #BBBBBB;
  margin: 15px;
}
@media only screen and (min-width: 760px) {
  #smaller {
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    min-width: 200px;
    max-width: 400px;
    flex-basis: auto;
    /* default value */
    flex-grow: 1;
  }
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <div id="smaller">
    <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

Answer 1

它不居中，因为您限制了容器的总宽度：

#smaller {
    display:flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    min-width: 200px; /* limits width; no space for centering */
    max-width: 400px; /* limits width; no space for centering */
    flex-basis: auto;
    flex-grow: 1;
}

而是在文本元素上设置限制：

#description {
  min-width: 200px;
  max-width: 400px;
}

JSFIDDLE

Answer 2

因此，使用Flexbox，必须将display: flex应用于您要定位的任何内容的父元素，并且只能直接影响孩子元素。

然后，您需要更改flex-direction为列，以使所有元素彼此在彼此之间。

尝试此而不是#whoheading CSS

#who{
  color:#10D0C9;
  font-family: 'Philosopher', sans-serif;
  display:flex;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
  flex-direction: column;
}

Answer 3

可以确保您根本不需要使用Flexbox。auto的左/右边缘将水平居中一个大小的元素。您的标题不需要Flexbox，只需要text-align: center;即可。您在#description上拥有的FLEX居中属性实际上也没有任何核心。这是您的代码简化而没有任何flex属性 - 这是您要做的吗？

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  text-align: center;
}
#description {
  color: #BBBBBB;
  margin: 15px;
}
@media only screen and (min-width: 760px) {
  #description {
    margin: 15px auto;
    min-width: 200px;
    max-width: 400px;
  }
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

Answer 4

您不需要将Flexbox用于此简单的中心。
max-width和margin: auto就足够了。

https://jsfiddle.net/gnka8pky/

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  text-align: center; /* centered text */
}
#description {
  color: #BBBBBB;
  margin: 15px auto; /* left and right margin = auto */
  max-width: 400px; /* text will not stretch past this point */
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <div id="smaller">
    <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

如果需要将链接置于底部，则需要使其成为块元素并使用text-align: center。或添加一个额外的块级包装器，例如div并将文本中心。

a.goals {
  display: block;
  text-align: center;
}