伸縮佈局

1. 什麼是網頁佈局?

在網頁中擺放盒子的過程  ----> 佈局

2. 如何擺放盒子?

1. 讓盒子一行顯示 用 浮動
2. 讓盒子壓著另外一個盒子 用 定位
3. 如果要移動盒子的位置可以通過 margin 和 padding

3. 如果在網頁中遇到如下佈局效果該怎麼辦?

解決思路:

  	1. 先準備三個盒子
    2. 讓三個盒子浮動
    3. 第一個盒子左浮動  最後一個盒子右浮動  中間盒子居中顯示

4. 可以通過伸縮佈局的方式快速的解決以上問題

1. 給父元素設定 display: flex;
2. 給父元素設定: justify-content: space-between;

5.伸縮佈局詳解

1. 什麼時候用伸縮佈局?

   在任何情況下都可以使用伸縮佈局.一般情況下如果希望元素快速的一行顯示,並且父元素的大小修改不會影響網頁佈局這種情況下,我們可以使用伸縮佈局 去替代 普通佈局 大家可以參照上面的案例.
   

2. 怎麼用伸縮佈局?

   • 如果要用伸縮佈局,必須給其直接父元素設定 display: flex屬性, 才能保證元素一行顯示

     哪些元素一行顯示,就必須給其直接父元素設定為伸縮盒子  1
     

3. 為什麼在伸縮盒子中 子元素會一行顯示呢?

   • 首先是因為在伸縮盒子中,所有的元素都是按照主軸方向顯示的

   • 只要是伸縮盒子就預設有兩條軸,一條是水平顯示的主軸 另外一條是 永遠都要垂直於主軸的側軸

     

   • 伸縮盒子中的元素沒有脫標,是因為在伸縮盒子中元素按照主軸方向顯示的.

6. 如果希望伸縮盒子中的元素獨佔一行顯示

• 修改主軸的方向就可以了
• flex-direction 設定主軸方向的屬性; [必須記住]
  • row 預設主軸的方向是水平顯示
  • column 主軸的方向變成垂直顯示
  • 注意該屬性是給伸縮盒子加的

7.設定子元素在主軸方向的對齊方式 [必須記住]

• justify-content: 設定子元素在主軸方向的對齊方式的
  • flex-start 在主軸的開始位置對齊
  • flex-end 在主軸的結束位置
  • space-between 元素兩端對齊,中間自適應
  • space-around 元素的周圍出現空白間距
  • center 元素居中

8. 設定元素在側軸方向的對齊方式[必須記住]

• align-items: 設定子元素在側軸方向的對齊方式
  • flex-start 在側軸的開始位置對齊
  • flex-end 在側軸的結束位置對齊
  • center 在側軸的中間位置對齊
  • stretch 沿著側軸拉伸 (預設值)
  • 注意: 在伸縮盒子中必須給子元素設定寬度,高度預設是拉伸的

9. 在伸縮盒子中,不管子元素有多少個,預設都一行顯示

• flex-wrap: 設定子元素是否換行
  • nowrap : 預設不換行
  • wrap : 代表元素要換行顯示

10.設定換行後的對齊方式(多行對齊方式)[瞭解]

• align-content: 設定元素換行後的對齊方式(必須保證元素換行後,才可以使用這個屬性)
• flex-start 換行後的開始位置對齊
• flex-end 換行後的結束位置對齊
• center 換行後居中對齊
• space-between
• space-around
• stretch 預設值

11. flex-flow(補充屬性)

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

例如:
 flex-flow: row wrap;

​

round

• stretch 預設值

11. flex-flow(補充屬性)

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

例如:
 flex-flow: row wrap;

總結核心知識點

1.伸縮盒子設定

2.設定伸縮盒子主軸方向

3.設定伸縮盒子主軸對齊方式

4.設定伸縮盒子側軸對齊方式

5.設定伸縮盒子伸縮比例（flex）

☞伸縮佈局(flex)(螢幕適配)

概念

☞ 伸縮佈局[彈性佈局]

Flex 是 Flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性.
任何一個容器都可以指定為 Flex 佈局。

設定盒子為伸縮盒子

☞ display: flex;
例如:
.box {
 	display: flex;
}

伸縮盒子兩條軸

主軸(main axis): 預設水平從左向右

側軸(cross axis): 始終垂直於主軸

設定主軸方向(flex-direction)

flex-direction: row  |  row-reverse |  column |  column-reverse

設定在主軸的對齊方式(justify-content)

justify-content: flex-start(預設值) | flex-end | center |  space-between | space-around

設定在側軸的對齊方式(align-items )

align-items: flex-start | flex-end | center | baseline | stretch(預設值)

設定元素是否換行顯示(flex-wrap)

flex-wrap: nowrap | wrap(換行顯示)

設定元素換行後的對齊方式(align-content )

align-content: flex-start| flex-end | center| space-between | space-around |stretch(預設對齊方式)

設定子元素的伸縮比(flex )

flex 屬性定義子元素平均分配剩餘空間，該子專案佔多少份。

.item {
flex: <number>; /* default 0 */
}

設定子元素的排序方式

order 屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。

擴充套件-min-width-屬性

min-width: 設定元素的最小寬度(如果視口的值大於當前設定的值,那麼元素的寬度就按照視口的大小顯示)

如果視口的寬度小於當前設定的值,那麼元素的寬度就按照設定的值顯示

總結: min-width設定元素的寬度,永遠不能比設定的值小

數學表示的方式    當前元素的寬度 >= 500px

background-size屬性補充介紹

background-size: 具體值| 百分比 | cover | contain

補充一個漢字換行效果

/* 漢字遇到特殊符號 空格 自動換行 
   解決: 保證文字在末尾處換行,不是遇到特殊符號換行
*/
word-break: keeep-all(預設值) | break-all(在末尾處換行);

如有不足，請多指教，
未完待續，持續更新！
大家一起進步！