flex-direction:column justify-content 不起作用答案

【问题标题】：flex-direction:column justify-content not workingflex-direction:column justify-content 不起作用
【发布时间】：2018-08-17 22:09:58
【问题描述】：

我编写了一个包含 body 元素的 html 文件，并且在 body 元素中有 3 个段落标签。

所有段落的边框都是 2px 纯黑色我想使用 flexbox 折叠所有段落的边框。这是html和css代码：

<body>
  <p>
    iisquam quis maxime laudantium, rerum saepe, eum, nam velit ipsam expedita sed nulluisquam minus ullam ducimus ipsam excepturi eligendi, harum similique perspiciatis provident accusamus suscipit! Hic doloribus inventore corrupti obcaecati praesentium maiores reiciendis consectetur pariatur veritatis quam saepe libero blanditiis fugiat, quae recusandae cumque. Delectus libero, nam accusamus mollitia quia deserunt?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, aut magnam? Iure nemo totam corporis in quos, nesciunt suscipit at reprehenderit pariatur cupiditate tempore iste error, ducimus ea eveniet aut ipsum id labore, quidem impedit nihil voluptate fugiat voluptatum explicabo. Iusto officia unde, nesciunt aliquam enim temporibus? Eaque, placeat dignissimos!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos autem exercitationem laborum illo ipsum ex corporis omnis. Rem dignissimos perspiciatis sequi quod officiis, reiciendis iste.
  </p>
</body>
<style>
body{
  display:flex;
  flex-direction:column;
  justify-content:stretch;
}
p{
  border:2px solid black;
  maring:0;
}
</style>

您可以看到 justify-content 属性设置为拉伸。但在输出中，段落并没有被拉伸。每个段落元素之间都有一个空格，并且边框不会折叠。如何修复 css 代码，以使所有 flex 项周围没有像空间一样的边距

【问题讨论】：

投票结束，因为这个问题是由无法再复制的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。
stretch 不是justify-content 的有效值，因此您根本不清楚您要做什么

标签： html css flexbox

【解决方案1】：

您的 css 中有错字。

p{
  border:2px solid black;
  maring:0;
}

改变

maring: 0;

到

margin: 0;

它应该可以工作。

【讨论】：

【解决方案2】：

<p> 标签的样式

代替：

maring:0;

使用

margin:0px;

这只是你的 css 定义中的一个错字。

【讨论】：