-
傳統的布局概念
基于盒子容器，依賴 display 、position 、float三個屬性，相互制約
-
Flex布局概念
1.Flex布局簡稱 “彈性布局” 或 “流式布局” 或 “”伸縮布局”，各有千秋，
2.是一種當頁面需要適應不同的螢屏大小以及設備型別時確保元素擁有恰當的行為的布局方式，
3.Flex提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間，
4.缺點：兼容性問題，瀏覽器版本過低（比如IE9以下的不支持）， -
Flex實戰演練
先明確一下概念的東西：容器簡稱伸縮容器，容器里面的東西簡稱伸縮項，如圖
1. 排列方式（針對容器操作，作用于伸縮項）
大容器加樣式：display:flex; flex- direction:row;
*說明：
//display:flex 將容器變為伸縮容器，
// flex- direction:row;(以一行排列，從左至右），反方向為flex- direction:row-reverse；
// flex- direction:column;(以一列排列，從上至下），反方向為flex- direction:column-reverse；2. 主軸對齊方式（針對容器操作，作用于伸縮項）
大容器加樣式：display:flex; flex- direction:row;justify-content:flex-start;
*說明：
1.justify-content:flex-start; 把所有伸縮項沿主軸的起點方向對齊,效果如下圖
2.justify-content:flex-end; 把所有伸縮項沿主軸的終點方向對齊,效果如下圖
3.justify-content:center; 把所有伸縮項沿主軸的居中對齊,效果如下圖
4.justify-content:space-between;把所有伸縮項居中左右間隔平分（兩端對齊）,效果如下圖
5.justify-content:space-around;把每個伸縮項左右都加一定的邊距,效果如下圖
3. 側軸對齊方式（針對容器操作，作用于伸縮項）
大容器加樣式：display:flex; flex- direction:row;justify-content:flex-start;align-items:flex-start;
1.align-items:flex-start; 把所有伸縮項沿側軸的起點方向對齊,效果如下圖,
2.align-items:flex-end; 把所有伸縮項沿側軸的終點方向對齊,
3.align-items:baseinline; 把所有伸縮項沿文字內容基線對齊,效果如下圖
4.align-items:stretch; 把所有伸縮項拉伸對齊,效果如下圖
4. 側軸個別對齊方式（針對伸縮項操作，作用于伸縮項）
伸縮項加樣式：align-items:flex-start;*
*說明：
align-self的取值和align-items一樣
align-self:flex-end; 把第一個伸縮項沿側軸底部對齊，如下圖
align-self:flex-start; 把伸縮項沿側軸頂部對齊
align-self:center; 把伸縮項沿側軸居中對齊5. 換行與換行對齊（針對伸縮容器操作，作用于伸縮項），注意：換行對齊必須基于伸縮項換行
例如：當容器的寬度為600px 容器內有3個300px的伸縮項
大容器加樣式：**display:flex; **
*說明：
A.flex-wrap:nowrap; 默認是不換行；
B.flex-wrap:wrap; 換行； 如圖
C. align-content: flex-strat; 用于換行之后與側軸起點對齊； 如圖
D. align-content: flex-end; 用于換行之后與側軸終點對齊 ； 如圖
E. align-content: center; 用于換行之后與側軸居中對齊； 如圖
F. align-content: space-between; 用于換行之后與側軸上兩端對齊 ； 如圖
G. align-content: space-around; 用于換行之后與側軸環繞對齊； 如圖
H. align-content:stretch; 用于換行之后與側軸上拉伸對齊； 如圖
I. flex-wrap:wrap-reverse; 反轉換行； 如圖
6. 伸縮項排序（針對伸縮項操作，作用于伸縮項）
order:0; 默認排序（數值越小，顯示在前面，數值越大 越靠后）
7. 伸縮項擴充（針對伸縮項操作，作用于伸縮項）
場景：當伸縮項寬度之和小于容器的寬度時，希望伸縮項按比例自動填充，若伸縮項寬度總和不小于容器的寬度時，設定的flex-grow無效
flex-grow:0;默認0，不進行擴充 值越大，所占的比例越大
補充說明：
8. 伸縮項縮小（針對伸縮項操作，作用于伸縮項）
注意：flex-shrink:1；默認值為1 值越大，所占的比例越小
9. 伸縮項寬度設定（針對伸縮項操作，作用于伸縮項）
flex-basis:100px; 伸縮項寬度設定
10. 伸縮項屬性連寫（針對伸縮項操作，作用于伸縮項）
flex: 0 1 auto； 分別代表：擴充 縮小 寬度
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/256394.html
標籤：其他
上一篇：vue/cli創建的typescript專案，引入less一直報錯Syntax Error: TypeError: this.getOptions is not a function