Question

所以我对flexbox有点新意，我试图把这个段落放在一个flexd div中并让它有一个最小宽度，这样它就不会在整个页面上展开。但是，一旦我在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上的弹性居中属性实际上并不是中心任何东西。这里的代码简化而没有任何弹性属性 - 这就是你要去的吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您不需要使用flexbox进行这种简单的居中 <{1}}和max-width就足够了。

https://jsfiddle.net/gnka8pky/

margin: auto

#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

Flexbox以盒子为中心

4 个答案:

jsFiddle