flex弹性布局
操作方便、布局简单、移动端应用广泛
flex布局原理:
通过给父盒子设置flex属性、来控制子盒子的位置和排列的方式
- 任何容器都可以指定为flex布局
- 为父盒子设置了之后、子元素的float、clear和vertical-align属性将失效
- 设为flex布局的元素、为flexcentainer容器、它的子元素称为flex项目
- flex项目也可以继续设置为flex容器
常见的父项的属性:
- flex-direction:设置主轴的方向;
- justify-content:设置主轴上的子元素排列方式
- flex-warp:设置子元素是否换行
- align-content:设置侧轴上的子元素的排列方式(多行)
- align-items:设置侧轴上的子元素的排列方式(单行)
- flex-flow:复合属性、同时设置了主轴方向(flex-direction)与是否换行(flex-warp)
flex-direction:主轴方向
- flex中有主轴与侧轴、元素是根据主轴来排列的
- 默认主轴是 row水平方向、 侧轴就是column 垂直方向
- 也可以设置列column 垂直方向 那侧轴就是row 水平方向
flex-direction属性:
属性值 | 说明 |
---|---|
row | 默认从左到右 |
row-reverse | 右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
注意:
主轴与侧轴是会变化的、主要是看flex-direction给谁设置为主轴 、剩下的就是侧轴、子元素是跟着主轴来排列的
justify-content:设置主轴上的子元素排列方式
justify-content(属性):
属性值 | 说明 |
---|---|
flex-start | 默认从头部开始、主轴是x轴、则从左到右、 |
flex-end | 从尾部开始排列 |
center | 主轴居中对齐(主轴是x则水平对齐) |
space-around | 平分剩余空间 |
space-between | 贴两边、在平分剩余空间 |
注意:使用这个属性前一定要确定好主轴是哪个
flex-wrap:设置子元素是否换行
- flex-wrap(属性): 默认情况下、项目都在一条轴线上的、默认不换行
属性值 | 说明 |
---|---|
nowrap | 默认、不换行 |
wrap | 换行 |
align-items 设置侧轴上子元素的排列方式(单行)
- align-items(属性): 默认是y轴、在子项为单项的时候使用
属性值 | 说明 |
---|---|
flex-start | 从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中) |
stretch | 拉伸 |
align-content 设置侧轴上子元素的排列方式(多行)
- align-content(属性): 用于子项目出现换行的情况(多行)、单行无效
属性值 | 说明 |
---|---|
flex-start | 默认侧轴头部开始排列 |
flex-end | 侧轴尾部开始排列 |
center | 侧轴中间显示 |
space-around | 在侧轴平分剩余空间 |
space-between | 侧轴贴两边、在平分剩余空间 |
stretch | 子项元素高度平分父元素高度 |
flex-flow 属性:主轴方向与是否换行的复合属性
flex-flow 属性: |
---|
说明:flex-direction(主轴方向)和 flex-wrap(是否换行) 属性的复合属性 |
//复合属性:水平方向 换行
flex-flow:row wrap;
align-content与align-items的区别 |
---|
说明 |
align-items 适用用单行、只有上对齐、下对齐、居中与拉伸 |
align-content 适用于换行(多行)、单行无效、有上对齐、下对齐、居中与拉伸及平均分配剩余空间 |
总结就是单行找align-items、多行找align-content |
item子项属性
- item(属性):
属性值 | 说明 |
---|---|
flex | 控制项目自己所占容器剩余空间份数 |
align-self | 控制项目自己在侧轴上的排列方式 |
order | 控制顺序 |
背景线性渐变
- 默认是从左到右
background:linear-gradient(属性):(起始方向、颜色、颜色2、…) |
---|
说明 |
background:-webkit-linear-gradient(left,red,blue) |
background:-webkit-linear-gradient(left top,red)从左上斜角覆盖 |
flex布局用于排版、rem布局负责等比缩放、很完美