起步

• 效果如下:
  
• 在父元素中,將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;
}