一、布局原理
felx为弹性布局,任何一个容器都可以指定为flex布局
父盒子设为flex布局后,子元素的float、clear、vertical-align属性将失效
采用flex布局的元素,成为"flex"容器,简称“容器”,所有子元素自动成为容器成员,称为flex项目
二、一些概念
主轴:默认为水平(x)向右
侧轴:默认为竖直(y)向下
三、常见父项属性
flex-direction 设置主轴方向
属性值:
row(默认) 从左到右
row-reverse 从右到左
column 从上到下
colum-reverse 从下到上
justify-content 设置主轴上子元素排列方式
属性值:
flex-start(默认) 从头部开始
flex-end 从尾部开始
center 在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边,再平分剩余空间(重要!)
flex-wrap 设置子元素是否换行
属性值:
nowrap(默认) 不换行
wrap 换行
align-items 设置侧轴上的子元素的排列方式(单行)
属性值:
flex-start(默认) 从上到下
flex-end 从下到上
center 挤在一起居中
stretch 拉伸
align-content 设置侧轴上的子元素的排列方式(多行)
属性值:
flex-start(默认) 在侧轴的头部开始排列
dlex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素高度平分父元素高度
flex-flow 复合属性,相当于同时设置了flex-direction和flex-wrap
四、常见子项属性
flex 定义子项目分配剩余空间,表示占多少份数
align-self 表示继承父元素的algin-items属性,若没有父元素,则等同于stretch
可以设置单个项目和其他项目有不同属性
(可覆盖align-items属性,默认为auto)
order 定义项目的排列顺序(和z-index)类似
例:div span:nth-child(2){
order:-1; <!---默认为0-->
}
参考资料:bilibili黑马程序员