起步

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

總結

以上是生活随笔為你收集整理的css --- flex:n的解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。