目录
一、Flex简介
是一种浏览器提倡的布局模型;布局网页更简单、灵活;避免浮动脱标的问题。
作用:
基于Flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
设置方式
父元素添加display:flex,子元素可以自动的挤压或拉伸。
组成部分:
弹性容器
弹性盒子
主轴(默认水平)
侧轴
二、主轴的对齐方式
修改主轴对齐方式属性:justify-content
属性值 | 作用 |
flex-start | 默认值,起点开始依次排序 |
flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列,孩子盒子两边加间距 |
space-between | 弹性盒子沿主轴均匀排列,两边靠,只有孩子盒子有间距 |
space-evenly | 弹性盒子沿主轴均匀排列,所有间距都相等 |
三、侧轴对齐方式
修改侧轴对齐方式属性:
align-items(添加到弹性容器)
align-self:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
属性值 | 作用 |
flex-start | 默认值,起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
stretch | 默认值,弹性盒子沿着主轴线被拉伸至铺满容器 |
四、Flex伸缩比
使用flex属性修改弹性盒子伸缩比
属性
flex:值
取值分类
数值(正数)
注意:只占用父盒子剩余尺寸
五、Flex布局
1、主轴方向
使用flex-direction改变元素排列方向
主轴默认是水平方向、侧轴默认是垂直方向
属性值 | 作用 |
row | 行,水平(默认值) |
column | 列,垂直 |
row-revarse | 行,从右向左 |
column-reverse | 列,从下向上 |
2、弹性盒子换行
目标:使用flex-wrap实现弹性盒子多行排列效果
调整行对齐方式:align-content
取值与justify-content基本相同