彈性盒模型

彈性盒模型的作用：用來輔助div+css布局，解決傳統布局的繁瑣不便之處并且達到自適應布局模式（也稱之為彈性布局）。

（傳統布局）div+css布局

• 基于盒模型，依賴 display屬性 + position屬性 + float屬性進行頁面布局。
• 好處：兼容性比較好
• 壞處：布局比較繁瑣
• 不便：
  • 盒子居中，各種居中對齊
  • 大量調整盒子位置
  • 通常div水平顯示設置float
  • 清除浮動
  • margin重疊問題

css3給我們提出了一套自適應的布局模式——彈性布局（彈性盒模型），它用來輔助div+css布局。

什么是彈性盒模型

• 概念：是一種當頁面需要自適應不同屏幕大小以及設備類型時確保元素擁有恰當行為的布局模式
• 目的：提供一種更加有效 的方式來針對一個容器里面的元素進行排列，對齊和分配空間，就是為了元素在盒子里面面對盒子的寬度不同時能更好的適應。這種布局模式對移動端更加友好。

彈性盒子結構

彈性盒子是由彈性容器和彈性項目構成。

• 彈性容器：包含彈性項目的父元素
• 彈性項目：彈性容器里面的每個子元素。
• 主軸：彈性項目排列所有軸就稱為主軸。默認主軸是水平方向
• 側軸：與主軸垂直的方向就稱為側軸。

彈性容器

設置彈性容器（給父元素設置）

• display：flex:將盒子變為塊級的彈性容器，對其他兄弟元素來說，它依然是一個普通的塊級標簽，對里面的子元素（彈性項目）來說，這個盒子是它們的彈性容器。
• display:inline-flex：將盒子變為行內塊級彈性容器，對其他兄弟標簽來說，它是一個普通的行內塊級元素，對里面的子元素來說，它是彈性容器。

特點：

• 彈性容器里面的子元素（彈性項目）可以同行顯示，默認排列不下時，按比例將子元素進行壓縮
• 彈性容器只對于直接子元素有效
• 彈性容器對自己的兄弟標簽沒有任何影響
• 對于彈性容器來說，高度是自適應的，無需設置高度（需要固定高度時才設置）

注意

• 彈性容器外面和彈性項目內都是正常渲染的，彈性盒子只控制彈性項目如何在彈性容器里面顯示。

彈性項目的排列方式

• flex-wrap 控制彈性項目是否換行

  • flex-wrap：nowrap; 不換行（默認值）
  • flex-wrap:wrap; 換行

• flex-direction

  控制彈性項目的排列方式，同時確定彈性容器的主軸。

  默認是水平方向為主軸，側軸是與主軸垂直的軸為側軸

  • row:默認值，沿著水平主軸讓元素從左到右的排列
  • row-reverse:沿著水平主軸讓元素反向排列
  • column:設置垂直方向為主軸，元素從上到下排列（改變主軸）
  • column-reverse:設置垂直方向為主軸，元素反向排列

改變某個彈性項目的顯示位置

order（給子元素設置）

• 取值也為數字，默認為0，數字越大越靠后

• 相同數字按照代碼結構排列

• 語法：

  order:數字;

• 應用場景：

  • 不改變代碼結構的前提下，可以調整盒子之間的位置
  • 后期可以實現盒子拖拽功能

富裕空間

• 彈性項目在彈性容器里面排列之后剩余的空間，即彈性容器排除彈性項目之后剩余的空間。
• 主軸富裕空間：justify-content
• 側軸富裕空間：align-items 所有的彈性項目 align-self 設置當前彈性項目
• 原理：讓彈性項目通過flex-grow去消化富裕空間

分配主軸方向上的富裕空間

justify-content

• flex-start:默認值，將主軸方向的富裕空間分配在彈性項目的最后（左對齊）
• flex-end:將富裕空間分配在主軸的彈性項目最前面（右對齊）
• center:彈性項目居中
• space-between:首尾緊靠彈性容器，中間彈性項目均分
• space-around:每個彈性項目兩邊的距離是一樣的。
• space-evenly:每個彈性項目之間的距離相同，包含第一個和最后一個和彈性容器的距離。

分配側軸方向上的富裕空間

align-items

• flex-strat:默認值，彈性項目在側軸的頂部對齊
• flex-end:彈性項目在側軸的底部對齊
• center:彈性項目在側軸上居中對齊
• strech:拉伸，如果彈性項目沒有設置高度，彈性項目會將彈性容器撐滿

align-self（給子元素設置）

• flex-start 上方
• flex-end 下方
• 彈性項目私有align-items的屬性，即單獨給某個彈性項目（子元素）設置側軸方向上的富裕空間分配。

消化富裕空間

flex-grow（給子元素設置）

語法：

flex-grow ：數字;（彈性因子）

• 默認為0 ，取值為數字
  • 0表示不參與富裕空間的消化
• 原理：彈性項目會將彈性容器里面多余的空間（富裕空間）分成等量的份數，然后按照每個彈性項目的比例分配給彈性項目里面，彈性項目去消化。
• 彈性因子越大，分配的彈性空間越大，盒子的寬度越大。

壓縮空間

• 同一行彈性項目寬度相加之后，超出彈性容器的空間。

• 原理：讓彈性項目通過flex-shrink去壓縮分配給彈性項目

分配壓縮空間

flex-shrink（給子元素設置）

設置當前彈性容器寬度不夠時，彈性項目的壓縮因子（收縮因子）

• 取值：數字，默認為1

• 數字越大，壓縮空間越大，盒子反而越小

• 原理：當彈性容器寬度容不下當前這行彈性項目時，就會按照flex-shrink來收縮彈性項目以達到不換行的目的。這個屬性會按照設置的值將要收縮的寬度等量劃分，減少彈性項目的的尺寸。

• 前提：彈性容器寬度不夠時，并且不換行，而且彈性項目的總寬度要大于彈性容器的寬度，才能有效

• 壓縮空間的分配公式：

  每個彈性項目最終壓縮后的寬度=自己彈性項目的初始寬度-（壓縮空間/ 壓縮因子的總數）壓縮空間=每個彈性項目的寬度的總和
  • 壓縮空間：（超出容器的值）
  • 壓縮空間（超出容器的值）=彈性項目的總寬度 - 彈性容器的寬度
  • 壓縮因子的總數：設置壓縮份數的總和。（默認是1）

練習：如果容器為500px，項目為120px，共有5個項目？

如果第一個項目設置flex-shrink為2，第二個設置為3， 第四個設置為3，請計算每個彈性項目最終壓縮后的寬度？

壓縮因子總數：2+3+1+3+1=10

壓縮空間=120*5-500=100

每一份的取值寬度：100/10= 10px

box1：10*2=20px 120-20=100px

box2：10*3=30px 120-30=90px

box3、box5：10*1=10px 120-10=110px

box4：10*3=30px 120-30=90px

• flex-basis（給子元素設置）

  設置彈性項目的 默認寬度，其優先級大于width

  語法：

  flex-basis:300px; width:400px; 優先級：flex-basis > width > 由內容撐開的寬度

4：10*3=30px 120-30=90px

• flex-basis（給子元素設置）

  設置彈性項目的 默認寬度，其優先級大于width

  語法：

  flex-basis:300px; width:400px; 優先級：flex-basis > width > 由內容撐開的寬度

總結

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

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