1、弹性布局
横向排列：
单行：开启弹性布局：display:flex; 写在父盒子 (子盒子会跟父盒子进行伸缩)
子盒子内写 flex:份数 分父盒子的总大小
子盒子内写 flex-basis:px数 该子盒子固定分走px数(basis优先级比width属性高)
分行：
flex-wrap:wrap; 子盒子固定数值分配，不够就往下面行排
justify-content:flex-start(默认，左边)；flex-end(往右边挤) center(往中间挤) space-round (平均分隔居中) space-between(平均分隔两边) 永远对主轴生效
垂直对齐
align-content:跟justify-content的一样 (这个属性只有多行才会生效)
align-items:flex-start(单行上面对齐) flex-end(单行下面对齐) center(单行中间对齐) 在单行使用较多(也支持多行)
align-self:flex-start(单个上面对齐) flex-end(单个下面对齐) center(单个中间对齐)
*排列方向：flex-direction:row(按行显示) column(按列显示) 设置哪个，哪个为主轴
网友评论