1九杂、彈性布局
橫向排列:
單行:開(kāi)啟彈性布局:display:flex; 寫在父盒子 (子盒子會(huì)跟父盒子進(jìn)行伸縮)
子盒子內(nèi)寫 flex:份數(shù) 分父盒子的總大小
子盒子內(nèi)寫 flex-basis:px數(shù) 該子盒子固定分走px數(shù)(basis優(yōu)先級(jí)比width屬性高)
分行:
flex-wrap:wrap; 子盒子固定數(shù)值分配祷嘶,不夠就往下面行排
justify-content:flex-start(默認(rèn),左邊)脖捻;flex-end(往右邊擠) center(往中間擠) space-round (平均分隔居中) space-between(平均分隔兩邊) 永遠(yuǎn)對(duì)主軸生效
垂直對(duì)齊
align-content:跟justify-content的一樣 (這個(gè)屬性只有多行才會(huì)生效)
align-items:flex-start(單行上面對(duì)齊) flex-end(單行下面對(duì)齊) center(單行中間對(duì)齊) 在單行使用較多(也支持多行)
align-self:flex-start(單個(gè)上面對(duì)齊) flex-end(單個(gè)下面對(duì)齊) center(單個(gè)中間對(duì)齊)
*排列方向:flex-direction:row(按行顯示) column(按列顯示) 設(shè)置哪個(gè)恭理,哪個(gè)為主軸