之前對于flex的學習比較淺層次的，工作中大多數使用

display:flex; justify-content:center; align-items:center;

但是遇到更高級的布局或者更靈活的布局，這些基礎的flex代碼已經不夠用了
為此決定深入學習flex布局；
學習flex布局，這里我推薦一個專門學習flex布局的網站
flex學習網站

1.inline-flex

inline-flex：將對象作為內聯塊級彈性伸縮盒顯示

2.order

給3子元素塊一個order:-1;此時3就排到最前面；同樣如果單獨給3一個
ordr:1;那么3子元素會到最后；
order是設置在子元素里面的屬性,具體作用是可以決定本身的排列先后順序

3.align-self


align-self主要用在子元素上，定義flex子項單獨在側軸（縱軸）方向上的對齊方式

4.flex-grow、flex-shrink、flex-basis

• 第一個屬性：flex-basis
  flex-basis該屬性用來設置元素的寬度，其實，width也可以設置寬度。如果元素上同時設置了width和flex-basis，那么width 的值就會被flex-basis覆蓋掉。
• 第二個屬性：flex-basis
  該屬性用來設置當父元素的寬度大于所有子元素的寬度的和時（即父元素會有剩余空間），子元素如何分配父元素的剩余空間。 flex-grow的默認值為0，意思是該元素不索取父元素的剩余空間，如果值大于0，表示索取。值越大，索取的越厲害。
• 第三個屬性：flex-basis
  當父元素的寬度小于所有子元素的寬度的和時（即子元素會超出父元素），子元素如何縮小自己的寬度的。 flex-shrink的默認值為1，當父元素的寬度小于所有子元素的寬度的和時，子元素的寬度會減小。值越大，減小的越厲害。如果值為0，表示不減小
  https://blog.csdn.net/m0_37058714/article/details/80765562

總結

以上是生活随笔為你收集整理的关于flex布局的深入学习的全部內容，希望文章能夠幫你解決所遇到的問題。

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