display flex不平分宽带

display:flex属性可以实现弹性布局，灵活控制元素的排列和宽度分配。但是，如果想要实现不平分宽度，可以使用flex属性中的flex-grow和flex-shrink属性。这两个属性分别用于设置或检索弹性盒子的扩展比率和收缩规则。通过调整这两个属性的值，可以实现不平分宽度的效果。

例如，在父盒子中有三个子元素，想要让它们宽度不平分，可以给每个子元素设置不同的flex-grow值或flex-shrink值。flex-grow值越大，表示该子元素在空间分配时会占据更多的宽度；flex-shrink值越大，表示该子元素在空间不足时会收缩更多的宽度。

以下是一个简单的示例代码：

<div class="box">
  <div class="child child1">
    <h1>文字文字文字</h1>
  </div>
  <div class="child child2">
    <p>文字文字文字文字文字文字文字文字文字</p>
  </div>
  <div class="child child3">
    <p>888373773</p>
  </div>
</div>

.box {
  display: flex;
}
.child {
  height: 300px;
}
.child1 {
  flex-grow: 1;
  background-color: #0f0;
}
.child2 {
  flex-grow: 2;
  background-color: #f00;
}
.child3 {
  flex-grow: 3;
  background-color: #fff000;
}

在上面的示例中，子元素.child1、.child2和.child3的flex-grow属性分别设置为1、2和3，表示它们在宽度分配时的比率。根据这个设置，.child1会占据1份宽度，.child2会占据2份宽度，.child3会占据3份宽度，实现了不平分宽度的效果。