flex弹性布局特点
- 操作方便,布局简单,移动端使用广泛
- pc端支持情况较差
- ie 11或更低版本不完全支持
flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
- 当我们为父盒子设为flex布局以后,子元素的float、clear 和vertical-align属性将失效。
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素,称为Flex容器( flex container ) , 简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目( flex item) , 简称"项目"。
总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
常见父项属性
- flex-direction :设置主轴的方向
- justify-content :设置主轴上的子元素排列方式
- flex-wrap :设置子元素是否换行
- align-content :设置侧轴上的子元素的排列方式(多行)
- align-items :设置侧轴上的子元素排列方式(单行)
- flex-flow :复合属性,相当于同时设置了flex-direction 和flex-wrap
主轴与侧轴:
在flex布局中,是分为主轴和侧轴两个方向，同样的叫法有:行和列、x轴和y轴
flex-direction设置主轴的方向
flex- direction属性决定主轴的方向(即项目的排列方向)
注意:主轴和侧轴是会变化的,就看flex- direction设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
justify-content设置主轴.上的子元素排列方式
flex布局子项常见属性
- flex子项目占的份数
- align-self控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序(前后顺序)
flex属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数。
align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0。
注意:和z-index不一样。