flex布局 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
flex布局原理:flex是flexible box 的缩写 意为 弹性布局 用来给盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局
1.当我们的父盒子设为flex布局以后,子元素的float clear vertical-align属性将失效。
2.伸缩布局=弹性布局=伸缩盒布局=flex布局
采用flex布局的元素,称为flex容器,简称容器。他的所有子元素自动成为容器成员,称为flex项目,简称项目
常见的父项属性
flex-direction : 设置主轴方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素排列方式(多行)
align-items:设置侧轴的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction flex-wrap flex-flow:row warp;
1.flex-direction : 设置主轴方向
row 默认值 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下往上
2.justify-content:设置主轴上的子元素排列方式
flex-start 默认值 从头部开始 如果主轴是x轴 则从左往右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴,水平居中)
space-around 平分剩余空间
space-between 先两边贴边,在平分剩下空间
3.flex-wrap:设置子元素是否换行
默认情况下,项目都是不换行的,如果放不开子元素,会缩小子元素的宽度,放到父元素盒子中
nowrap 默认不换行
wrap 换行
4.align-items:设置侧轴的子元素排列方式(单行)
flex-start 默认值 从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸
5.align-content:设置侧轴上的子元素排列方式(多行) 单行情况下没有效果
flex-start 默认值 在侧轴的头部开始排列
flex-end 尾部开始排列
center 居中显示
space-around 子项在侧轴平分剩余空间
space-between 先分布在两头 在平分剩下的空间
stretch 设置子项高度平分父元素高度
flex布局子项常见属性
flex属性
定义子元素分配剩余空间,用flex来表示占多少份数
语法:
.item{flex:<number>}
align-self
控制某一个子项在侧轴上的排列方式
order控制项目的排列顺序,默认是0;数值越小 越靠前