1.flex—靈活性。採用flex布局的元素，flex容器
2.給裝眾多相同盒子的父盒子display:flex.
將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。
當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。
當所有子元素的寬小於父元素的寬，則子元素的寬由子元素決定，。
設定了flex布局之後。子元素的float,clear和certical-align將失效。
3.使用場景：
float:會有父級高度塌陷問題
inline-block:會 造成空隙問題，基線對齊問題
position：若相對定位給不好，結構布局中會造成布局混亂
試用與移動端，
核心理念：父元素控制子元素的布局操作
4.布局重要點：在於元素排列方向，和換行的確定
5.容器本身的屬性。主軸和交叉軸的配合使用。
（1）主軸：元素的排列方向。flex-dierction:row預設方向向右：
1 2 3 4 5 6 7 88 7 6 5 4 3 2 1123
4567
8
8 76
5432
1
**塊中的數字代表對應的盒子
flex-wrap: nowrap 不換行
1 2 3 4 5 6 7 81 2 3 4
5 6 7 8
1 2 3 4
8 7 6 5
（3）元素在主軸上的對齊方式；
justify-content: flex-start 靠左側對齊
flex-end 靠右側對齊
center 居中對齊
space-around 每個專案兩側間隔相等
space-between:兩端對齊，每個專案之間的間隔相等
（4）元素在交叉軸對齊方式
1.align-items:每行內部元素的排列
flex-start 以盒子頂部和左邊對齊
flex-end 以盒子底部和左邊對齊
center 盒子左邊對齊，平均居中對齊
baseline 文字基線對齊
2.align-content:換行的這幾行元素的對齊方式（每一行看成乙個整體，只有一行不起作用）
flex-start
flex-end
center
space-around :每個行兩側間隔相等
space-between：兩端對齊，每個行之間的間隔相等
(5)排序。order.
order:值越小越在最後面。如order:1,則該盒子排列在最後面
（6）分配容器的多餘空間。flex-grow.
單個給 每個專案設定—放大某個專案：
預設值為0.
（7）收縮。flex-shrink:預設值為1，預設收縮自己
flex-shrink:0 不收縮，該咋樣就咋樣
值為2,3,4.。。時，才有意義
壓縮比例：元素不換行 被擠壓，誰大誰被壓縮的厲害
(8) 主軸上專案的預設長度。flex-basis:
auto:由內容決定寬
（8）以上三個屬性的復合寫法：flex:flex-grow flex-shrink flex-basis. 一般只需要寫 flex:1即可.當涉及到hover有壓縮效果時，可設定：flex：1 1 auto.
（9）align-self:允許單個專案與其他專案有不一樣的對齊,可以覆蓋align-items屬性。給單個專案對齊方式，即可改變它的位置。
flex-start
flex-end
center
baseline
6.主軸與交叉軸的復合寫法。flex-flow：flex-direction flex-wrap;
7.例做乙個4*2的彈性布局[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-2hfzcnyq-1582010355202)(c:\users\dell\desktop\web前端\筆記%3wh)]xd9d025ga)5zpq34kq.png)
ul
li
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...
彈性盒模型
彈性盒模型 給父級新增flex display flex flex wrap wrap 換行 彈性盒模型主軸，縱軸方向 flex direction row reverse 從右到左，元素主軸的方向 預設值row，從左到右 column 從上到下 column reverse 從下到上 主軸 水平 ...