flex布局原理:
通过父盒子添加flex属性,来控制子盒子的位置和排列方式
flex布局父项常见属性:
flex-direction: —设置主轴(x轴)的方向(默认x轴)
justify-content: —设置主轴上的子元素排列方式
flex-wrap: —设置子元素是否换行( flex布局中默认不换行 )
align-content: —设置侧轴(y轴)上的子元素排列方式(多行)
align-items: —设置侧轴上的子元素排列方式(单行)
flex-flow: —复合属性,相当于同时设置了flex-direction和flex-wrap,flex-flow: row wrap;
flex布局子项常见属性:
flex: number —子项目占的份数
align-self: —控制子项自己在侧轴的排序方式
order: —属性定义子项的排列顺序(前后顺序),默认从一开始
例子:
flex布局子项常见属性: