CSS防止div flex拉伸子级 [英] CSS prevent div flex from stretching child

问题描述

当div具有 flex 显示属性时，它将拉伸段落.我似乎缺少了一些东西，但是我认为可以放在flex div上的任何属性都无法改变.如何防止这种行为?(没有flex属性，我得到的结果在图像的右侧)

The moment div has the flex display property it stretches the paragraph. I seem to be missing something but no property I can think to put on the flex div changes this. How can I prevent this behavior? (without the flex property I get the result on the right in the image)

div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 200px;
  width: 100px;
}

p {
  background-color: green;
  display: inline;
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  </p>
</div>

推荐答案

添加另一个包装:

div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align:center;
  height: 200px;
  width: 100px;
}

p span{
  background-color: green;
}

<div>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
  </p>
</div>

相关问题，以了解为什么您的 inline 会被忽略:

Related question to understand why your inline is ignored:

弹性商品是否是块级元素?

弹性框项目的显示属性的使用

这篇关于CSS防止div flex拉伸子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！