起步

• 效果如下:
  
• 在父元素中,将3个盒子平均分成了3等份
• 代码如下:

p span {flex: 1;background-color: lightcoral;
}p span:nth-child(even) {border-right: 1px solid black;border-left: 1px solid black;
}

• 假设有3个子元素
• flex:1 的意思是,将剩余的宽度平均分成3份,然后该元素占1份

进一步:

• 给第一个子元素设置flex:1
• 给第二个子元素设置flex:2
• 给第三个子元素设置flex:3
• 效果如下
  
• 代码如下:

p span {
background-color: lightcoral;
}p span:nth-child(even) {
border-right: 1px solid black;
border-left: 1px solid black;
}p span:nth-child(1) {
flex: 1;
background-color: red;
}p span:nth-child(2) {
flex: 2;
background-color: blue;
}p span:nth-child(3) {
flex: 3;
background-color: green;
}