显示 flex 伪内容的宽度错误答案

【问题标题】：Display flex pseudo content has wrong width显示 flex 伪内容的宽度错误
【发布时间】：2021-07-01 12:18:38
【问题描述】：

我正在使用伪内容和弹性布局。为什么li:before没有我设置的10px宽度？

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/MWmwyOE

<ul>
  <li>
    <p>Lorum 123 dfjsd 3ijfadsifj sdfjoifj oijas fdjasf ijaio</p>
  </li>
  <li>
    <p>37dkj dfjkasdfjdsijf dksdjf jfjiasdfmdafom</p>
  </li>
</ul>

ul {
  width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: flex;
  margin-bottom: 20px
}
li:before {
  content: "";
  display: flex;
  width: 10px;
  flex-basis: 10px;
  height: 10px;
  background: red;
}
p {
  margin: 0;
}

【问题讨论】：

标签： css

【解决方案1】：

默认情况下，弹性项目不会缩小到其最小内容大小以下。要更改此设置，请设置项目的最小宽度或最小高度。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

默认情况下，flex 将收缩值设置为 1。如果您将flex: 0 0 auto; 添加到伪元素，您的代码就可以工作。

ul {
  width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: flex;
  margin-bottom: 20px
}
li:before {
  content: "";
  display: flex;
  width: 10px;
  flex-basis: 10px;
  height: 10px;
  background: red;
  flex: 0 0 auto;
}
p {
  margin: 0;
}

<ul>
  <li>
    <p>Lorum 123 dfjsd 3ijfadsifj sdfjoifj oijas fdjasf ijaio</p>
  </li>
  <li>
    <p>37dkj dfjkasdfjdsijf dksdjf jfjiasdfmdafom</p>
  </li>
</ul>

【讨论】：

【解决方案2】：

试试这个 https://codepen.io/MuhammadRizwan/pen/bGWdpxB

更新你的类属性

li:before {
  content: "";
  display: flex;
  width:100%;
  min-width: 10px;
  flex-basis: 10px;
  height: 10px;
  background: red;
}

【讨论】：