偶数垂直和水平对齐flexbox答案

【问题标题】：Even Vertical and horizontal align flexbox偶数垂直和水平对齐flexbox
【发布时间】：2017-07-25 16:38:14
【问题描述】：

基本上，我将三个项目与 flexboxes 排成一行，并且它可以正常工作，但是垂直对齐存在一个奇怪的问题。截屏： Fiddle Demo

.flex-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

.points {
  flex: 1;
  vertical-align: top;
}

.p1 {
  align-self: flex-start;
}

.p2 {
  align-self: center;
}

.p3 {
  align-self: flex-end;
}

<div class="textcenter">
  <h1>Lorem Ipsum</h1>
  <h4>dolor sit amet, consectetur adipiscing</h4>
</div>

<div class="flex-container bg">
  <div class="points p1 textcenter">
    <h3>Support for most popular<br>languages and frameworks</h3>
    <p></p>
  </div>

  <div class="points p2 textcenter">
    <h3>Open Source</h3>
  </div>

  <div class="points p3 textcenter">
    <h3>Constantly Growing</h3>
  </div>
</div>

提前致谢，迭戈

【问题讨论】：

我对你的例子也有一个奇怪的问题，Diego。无论我多么努力，我都无法检查您用来生成该图像的代码。请提供minimal reproducible example，以便我为您提供帮助。
也许您在最后一个 flex 子元素的元素上有默认边距/填充？
或者top + relative，一个简单的<br>，一个伪元素，一个transform，line-height，align-self等等。我更喜欢检查而不是猜测。花费更少的时间来回答和修复。
对不起，安德烈，我会尽快弄个小提琴
我解决了你的问题，但没有align-self: flex-start; & align-self: center; & align-self: flex-end; 这有什么问题吗？？我知道你的 p1、p2、p3 你的观点，但在课堂上不需要风格

标签： html css alignment flexbox

【解决方案1】：

Revise Fiddle

.flex-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: cadetblue;
}

.points {
  flex: 1;
  vertical-align: top;
  text-align: center;
}

p1,p2,p3 {
}

<div class="textcenter">
   <h1>tutorial-db</h1>
   <h4>The Ultimate Coding Recource Database</h4>
</div>

<div class="flex-container bg">
   <div class="points p1 textcenter">
      <h3>Support for most popular<br>languages and frameworks</h3>
      <p></p>
   </div>

   <div class="points p2 textcenter">
      <h3>Open Source</h3>
   </div>

   <div class="points p3 textcenter">
      <h3>Constantly Growing</h3>
   </div>
</div>

【讨论】：

我希望您不要将此视为批评，但作为建议，如果您想努力提高答案的质量，您可以在 How to Answer 中找到一些很好的一般建议.特别是对于这个问题，“试试这个” 类型的答案通常被认为质量较低（即使解决方案是正确的），因为它清楚地表明答案是基于猜测的/hunch/feeling 而不是真正理解问题。此外，您可以尝试简要解释一下原理：为什么您认为特定的解决方案会起作用。最好的问候，
感谢@AndreiGheorghiu 的建议。永远不要重蹈覆辙。