Flex布局-（比浮動和定位更友善的布局方式）

文章目錄

• 一、什麼是Flex布局
• 二、容器的概念
• 三、容器的屬性
• • 1. 主軸的方向 flex-direction
  • 2. 當子元素在主軸上無法排下時，是否換行 flex-wrap
  • 3. 項目在主軸上的對齊方式 justify-content
  • 4. 項目在交叉軸上如何對齊 align-items（管理單行）
  • 5. 多根軸線的對齊方式 align-content（管理整體）
• 四、容器下子元素的屬性
• • 1. order
  • 2-3. 放大比例/縮小比例 flex-grow / flex-shrink
  • 4.flex-basis
  • 5. flex
  • 6. align-self

一、什麼是Flex布局

Flex是Flexible Box的縮寫，顧名思義就是“彈性布局”，用來為盒裝模型提供最大的靈活性。

個人嘗試使用後比浮動用來做頁面定位好許多。配合定位非常nice。

• 任何一個容器都可以用作 flex 布局 （display:flex;）
• 行内元素也可以使用 flex 布局 （display:inline-flex;）
• 需要注意的是，設為flex布局以後，子元素的float、clear和vertical-align屬性将失效

div{
  display:flex;
  display:inline-flex;
}
           

二、容器的概念

• 當一個div設定display：flex之後， 這個div下的所有的子元素自動會成為成員。
• 容器預設存在兩根軸

  其中開始的位置叫做 start 結束的位置叫end

  • 水準的主軸
  • 垂直的交叉軸

三、容器的屬性

flex-direction. 決定主軸的方向

flex-wrap 決定是否換行

flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式，預設 row nowrap。

justify-content 在主軸上的對齊方式

align-items 在交叉軸上如何對齊

salign-content 多根軸線的對齊方式

1. 主軸的方向 flex-direction

• row： 水準方向對齊（預設值）
• row-reverse: 反向的水準方向對齊 （起點在右邊）
• column: 主軸為垂直方向，起點在上沿
• column-reverse: 主軸為垂直方向，起點在下沿

div{
  display:flex;
  flex-direction:row | row-reverse |  column | column-reverse;
}
           

flex-direction:row; 執行個體

2. 當子元素在主軸上無法排下時，是否換行 flex-wrap

• nowrap 不換行（預設）
• wrap 換行
• wrap-reverse 換行，在第一行的下方

div{
   display:flex;
   flex-wrap:wrap-reverse;
}
           

3. 項目在主軸上的對齊方式 justify-content

• flex-start 左對齊（預設值）( 空尾 )
• flex-end 右對齊 ( 空頭 )
• center 居中 ( 前後空相同 )
• space-between 兩端貼邊，其餘盒子間隔都相等 ( 前後沒有,中間間隔相同 )

• space-around 每個項目兩側的間隔相等, 項目兩邊的間距之和等于相等的間距

  ( 中間間隔相同,前後各留間隔的一半周圍的空間 )

div{
	display:flex;
	justify-content:flex-start;
}
           

4. 項目在交叉軸上如何對齊 align-items（管理單行）

• flex-start. 交叉軸的起點對齊 ( 空底部 )
• flex-end 交叉軸的終點對齊 ( 空頂上 )
• center 交叉軸的中點對齊 ( 上下各空一半 )
• baseline 項目的第一行文字的基線對齊 ( 空底部,但内容下移至空部上 )
• stretch 如果未設定高度或設為auto，将占滿整個容器的高度（預設值）( 預設,如果項目未設定高度或設為auto，将占滿整個容器的高度 )

**交叉軸不一定是從上往下!!! **

5. 多根軸線的對齊方式 align-content（管理整體）

如果項目隻有一根軸線，該屬性不起作用

• flex-start. 與交叉軸的起點對齊
• flex-end 與交叉軸的終點對齊
• center 與交叉軸的中點對齊
• space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布
• space-around 每根軸線兩側的間隔都相等。是以，軸線之間的間隔比軸線與邊框的間隔大一倍
• stretch 軸線占滿整個交叉軸（預設值）

四、容器下子元素的屬性

類似一個div盒子設定了flex布局，其中每個子元素的屬性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1. order

order : 數值越小，排列越靠前，預設為0

#container > div:first-child {
  order: 2;
}
#container > div:nth-child(2) {
  order: 4;
}
#container > div:nth-child(3) {
  order: 1;
}
#container > div:nth-child(4) {
  order: 3;
}
           

2-3. 放大比例/縮小比例 flex-grow / flex-shrink

當flex-wrap: nowrap; 不折行時，容器寬度有剩餘/不夠分，彈性元素們該怎麼“彈性”地伸縮應對？這裡針對上面兩種場景，引入兩個屬性(需應用在彈性元素上)

• 縮小比例 flex-shrink
  1. 假設容器

     #container寬度是200px

     ，一共有三個彈性元素，

     寬度分别是50px、100px、120px

     。在不折行的情況下，此時容器寬度是明顯不夠配置設定的。

  2. flex-shrink預設為1

     ，也就是當不夠配置設定時，元素都将等比例縮小，占滿整個寬度(

     但是并非嚴格等比縮小

     ，它還會考慮彈性元素本身的大小）

     

• 放大比例 flex-grow
  1. 假設容器

     #container寬度是200px

     ，一共有三個彈性元素，

     寬度分别是50px、100px

     。此時容器寬度是有剩餘空間的。

  2. flex-grow預設為0

     也就是說容器剩餘寬度預設是

     不進行配置設定

  3. 通過指定flex-grow為大于零的值,來配置設定空間

     

     

4.flex-basis

在進行彈性處理之餘，其實有些場景我們更希望元素尺寸固定，不需要進行彈性調整。設定元素尺寸除了width和height以外，flex還提供了一個flex-basis屬性。

flex-basis設定的是元素在主軸上的初始尺寸，所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

5. flex

6. align-self

// 圖檔借鑒與此網站 https://www.cnblogs.com/qcloud1001/p/9848619.html