使用flexbox对齐div文本

Question

我试图证明div中的某些文本是合理的，无论我做什么，我似乎都无法将它带到我想要的地方。我在使用flexbox时所看到的所有资源都表明我的代码是正确的，但显然不是。我创建了Fiddle我当前的代码。

.job-description {
  display: flex;
  justify-content: space-between;
}

<div class="job-description">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit massa, condimentum consectetur quam vel, dictum ullamcorper nulla. Maecenas ac sem hendrerit, finibus nibh vitae, aliquet est. Aliquam consequat ultricies turpis sit amet pulvinar. Aenean
    commodo consectetur sapien eu rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
  </p>
</div>

Answer 1

只需使用text-align: justify

即可

<强> CSS

.job-description {
    display: flex;
    justify-content: space-between;
}

.job-description p{
    text-align: justify;
}

<强> DEMO HERE

Answer 2

这似乎是一个概念混乱。

  

justify-content属性沿着flex items对齐main axis   Flex容器当前行的。

     

Text

但是，您不想证明您的Flex项目的合理性。相反，你想要证明其中的文本是正确的。因此，证明它的正确方法是使用Flexbox属性，而不是text-align属性。具体来说，有this example：

  

此属性描述块的内联级内容的方式   如果内容未完全填充，则沿着内联轴对齐   线盒。

因此，您将text-align: justify添加到您的Flex项目。或者，如果您愿意，可以使用Flex容器，并让flex项继承它。