?

1、

2、

?justify：整理版面

3、

4、歸納

justify-content：flex-start（默認）、center、flex-end

下面還會提到剩下的兩種項目在主軸上對齊方式：

space-between:兩端對齊（項目間距離相等）

space-around：每個項目兩側的間隔相等。項目之間的間隔比項目與邊框的間隔大一倍。

5、軸

5-0、默認從頭行開始

5-1、軸從中間開始、且默認對齊方式為左對齊

align：排列

5-2、軸從尾部開始

?

6 雙項目

6-1、默認軸向為橫向

6-2、設置軸向為縱向

7 align-self：允許單個項目有與其他項目不一樣的對齊方式（覆蓋align-items屬性）

7-1、

它讓子元素的軸設置在中間

7-2、

軸從尾部開始，且兩端對齊

8、三項目

?

分別設置了三個的主軸位置

?9、四項目

9-1、flex-wrap

設置了flex-wrap：如果一條軸線排不下的時候，如何換行

9-2、flex-basis

兩個一組項目，每組用flex布局、組內也用flex布局

小組內設置了??flex-basis: 100%;即設置，人為要求項目占據的空間。默認為項目本來的大小auto

10、網格布局

11、圣杯布局

12、輸入框布局

可是本次項目的圖標提示是在輸入框的內部。所以它這個布局暫時對我的項目起不到什么作用。

13、懸掛式布局

?可以子項套子項設置flex布局

轉載于:https://www.cnblogs.com/carry-2017/p/9908937.html

總結

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

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