是否可以使flex项的宽度等于它的宽度（当你使用＆＃34; float＆＃34;属性时）？

Question

是否可以使flex项目的宽度等于其内容的宽度（如使用＆＃34; float＆＃34;属性时）？

Answer 1

当然，实际上，这是没有指定flex属性的flex项的默认行为。

等效的弹性值：

flex-grow: 0 
flex-shrink: 1
flex-basis: auto

.parent {
  display: flex;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
}
.child {
  padding: 1em 0;
  background: #c0ffee;
  border-right: 1px solid red;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit.</div>
  <div class="child">Lorem ipsum dolor.</div>
</div>

Answer 2

您可以向flex项添加min-width。如果使用flexbox，您可以利用Intrinsic＆amp;外在尺寸＆amp;将值声明为min-content。

同样如此：

.flex-item {
 min-width: min-content;
}

您可以看到example here