flex佈局看這一篇就夠了

Flex 又被成為"彈性佈局"，任何一個容器都可以被指定為 Flex 佈局，在如今的頁面佈局中，flex起到至關重要的作用

 

1.flex佈局 概念 

被定義為 flex的元素被稱為 “flex容器” ， 而容器裡面的元素 被稱為 “flex專案”

flex容器存在兩根軸 - 水平的主軸 和 垂直的交叉軸

2.flex 屬性的申明

<div class="box">
 <div class="one">我是第一個’div‘</div>
 <div class="two">我是第二個’div‘</div>
</div>

//使用 display 屬性來申明該元素的佈局屬性
.box{
  display:flex | inline-flex;
}

3.flex容器屬性

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

3-1.flex-direction屬性 - 決定主軸的方向

1. row：主軸為水平方向，flex專案 從左往右 排列
2. row-reverse：主軸為水平方向，flex專案 從右往左 排列
3. column：主軸為垂直方向，flex專案 從上往下 排列
4. column-reverse：主軸為垂直方向，flex專案 從下往上 排列

3-2.flex-wrap屬性 - flex專案超出主軸軸線，flex專案如何排

1. nowrap：不換行
2. wrap：換行  ‘多上少下’
3. wrap-reverse：換行 ‘多下少上’

3-3.justify-content屬性 - flex專案在主軸方向的對齊方式

1. flex-start：左對齊
2. flex-end：右對齊
3. center： 居中對其
4. space-between：兩端對齊（各個flex專案之間的間隔都相等）
5. space-around：每個flex專案兩側的間距相等

 

3-4.align-items屬性 - flex專案在交叉軸方向的對齊方式

1. stretch：如果專案沒有高度或設為auto，將自動填充高度
2. flex-start：交叉軸的起點對齊
3. flex-end：交叉軸的終點對齊
4. center：居中對齊
5. baseline: 專案的第一行文字的基線對齊

3-5.align-content屬性 - 軸線的對齊方式（在一根軸線的時候不起作用）

1. stretch：軸線佔滿整個交叉軸
2. flex-start：交叉軸的起點對齊
3. flex-end：交叉軸的終點對齊
4. center：居中對齊
5. space-between：與交叉軸兩端對齊，軸線之間的間距均分
6. space-around：每根軸線兩側的間距都相等

4.flex專案屬性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

4-1.order屬性 - flex專案的排列順序 (數值越小，位置越靠前，預設為0)

.box{
  display:flex;
}
.one{
 order: 1;
}
.two{
 order: 1;
}

4-2.flex-grow屬性 - flex專案所佔空間的比例（預設為0） - 可參考柵欄佈局

.box{
  display:flex;
}
.one{
 flex-grow: 1;
}
.two{
 flex-grow: 1;
}

//如果所有flex專案的flex-grow屬性都為1，則它們將等分剩餘空間。
//如果其中有一個flex專案的flex-grow屬性為2，其他flex專案都為1，那麼2所佔據的剩餘空間將比其他項多一倍。

4-3.flex-shrink屬性 - flex專案的收縮比例（預設為0） - 可參考柵欄佈局

.box{
  display:flex;
}
.one{
 flex-shrink: 0;
}
.two{
 flex-shrink: 0;
}

//如果所有flex專案的flex-shrink屬性都為1，那麼當flex容器空間不足時，將會等比縮小
//如果該屬性值為0，其他屬性值為1，那麼為0的那個專案不改變大小，其他為1的等比收縮

4-4.flex-basis屬性 - 設定該容器主軸的空間大小（預設為 auto）

4-5.flex屬性 - flex-grow, flex-shrink 和 flex-basis的組合

該屬性有兩個推薦值：auto (1 1 auto) 和 none (0 0 auto)

4-6.align-self屬性 - 允許單個flex專案有與flex其他專案不同的對齊方式

可以覆蓋原來的align-items屬性，也可以繼承父元素的align-items屬性 ， 如果沒有父元素 ，預設stretch

align-self: auto | flex-start | flex-end | center | baseline | stretch;
// 預設 | 軸頭部對齊 | 軸尾部對齊 | 中部對齊 | flex專案第一行文字的底部對齊 | 當flex專案未設定高度時，flex專案將和flex容器等高對齊 

 

歡迎關注我的公眾號：碼上學習鴨