flex(flexible box缩写),该布局又称弹性布局,伸缩布局
传统布局与flex布局对比
传统布局 | flex布局 |
---|---|
兼容性好 | 一些浏览器不支持或仅部分支持 |
布局较繁琐 | 操作方便,布局简单 |
在移动端不能很好地布局 | 移动端应用很广泛 |
当我们为父盒子设置flex布局以后,子元素的float、clear、vertical-align属性将失效,
父项常见属性
属性名 | 作用 |
---|---|
flex-direction | 设置主轴方向 |
justify-content | 设置主轴上元素的排列方式 |
flex-wrap | 设置子元素是否换行 |
aligin-content | 设置侧轴上的子元素排列方式(多行) |
aligin-items | 设置侧轴上的子元素排列方式(单行) |
flex-flow | 复合属性,相当于同时设置了flex-direction和flex-wrap |
flex-direction设置主轴的方向
默认主轴方向是x轴方向,水平向右
默认侧轴方向是y轴方向,水平向下
设置主轴方向
属性 | 说明 |
---|---|
row | 从左到右(默认值) |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
flex-direction设置谁为主轴,那么另一个就是侧轴,子元素是跟着主轴排列的
justify-content设置主轴上的子元素排列方式
使用这个属性前要确定好主轴
属性 | 描述 |
---|