2021.4.9 北京林业大学 web前端开发基础 CSS3 弹性盒子

弹性盒子flexbox 一维布局

（移动端优先）
垂直居中、间隙的平均分配、自动占据剩余空间
弹性容器—>弹性元素

一、弹性容器

1.display属性（父元素）
display:flex;
2.flex-direction属性—行布局
行为主轴，列为辅轴
flex-direction:row
flex-direction:reverse（反向）
列布局
列为主轴，行为辅轴
flex-direction:colom
flex-direction:reverse（）
3.flex-wrap属性（是否折行，默认不折行）
:nowrap 不折行，父元素不够宽子元素会变瘦
:wrap 折行，父元素不够宽子元素会变成多行
：wrap-reverse 反向折行
4.flex-flow属性
flex-flow: flex-direction属性 flex-wrap属性;
flex-flow: row wrap;
5.justify-content（元素在主轴上的对齐方式）
：flex-start（行：左对齐）
：center （行：居中对齐）
：flex-end（行：右对齐