弯曲所有孩子相同的宽度

在开发网页过程中，我们常常需要对一组子元素进行排列并设置宽度。但是如果每个子元素宽度不同，这样的排列就会显得非常凌乱。因此我们需要一种方式来统一设置这些子元素的宽度，使它们看起来更漂亮整齐。

使用CSS的flexbox布局属性

CSS3中的flexbox布局属性提供了一种简单易用的方法来对一组子元素进行对齐和排列。其中的justify-content属性可以设置子元素在主轴上的对齐方式，而flex-wrap属性可以控制子元素是否会换行。最重要的是flex属性，它可以控制子元素的宽度和占据比例。

均分子元素

如果要让子元素的宽度均分，只需设置每个子元素的flex属性为1即可。具体代码如下：

.parent {
  display: flex;
}
 
.child {
  flex: 1;
}

当子元素的flex属性为1时，它们会平均分配主轴上的剩余空间，以达到均分宽度的效果。

按比例分配宽度

我们也可以通过设置子元素的flex属性为不同的值来按比例分配宽度。例如，如果我们想让第一个子元素占据整个父元素的一半宽度，可以将其flex属性设为2，而其他子元素的flex属性则为1。具体代码如下：

.parent {
  display: flex;
}
 
.child:first-child {
  flex: 2;
}
 
.child:nth-child(2), .child:nth-child(3) {
  flex: 1;
}

这样，第一个子元素将占据整个父元素的一半宽度，而其他子元素将均分剩余空间。

等宽，且居中

我们也可以让子元素等宽，并且在父元素中居中。具体代码如下：

.parent {
  display: flex;
  justify-content: center;
}
 
.child {
  flex-basis: 20%;
}

这里我们使用了flex-basis属性来设置子元素的宽度为20%，同时使用justify-content属性将子元素居中。

通过使用CSS的flexbox布局属性，我们可以很容易地实现对一组子元素的均分、按比例分配、等宽等排列。这种方式不仅简单易用，而且适用于各种网页布局。