前端布局|前端布局 flex布局

一、什么是flex
flex是flecible Box的缩写,意思是“弹性布局”,任何一个容易的可以用flex布局。
当给父盒子设为flex布局之后,子元素的float,clear,和vertical-align属性将会失效
flex操作性方便,布局简单,广泛应用于移动端的开发,pc端页面则仍主要采用传统布局。
二、flex的布局原理
flex的原理就是通过给父盒子添加flex属性,来控制子盒子的位子和排列方式
三、常见的六个父项属性
1、flex-direction: 设置主轴的方向

属性值 说明
row 设x轴为主轴 从左到右
row-reverse 从右到左
column 设y轴为主轴 从上到下
column-reverse 从下到上


2、justify-content: 设置主轴上的子元素的排列方式
属性值 说明
flex-start 默认值 从头开始 即主轴是x轴时,从左到右
flex-end 从尾部开始排列
center 居中排列对齐
space-around 平分剩余空间
space-between 先两边贴,再平分剩余空间的部分

3、flex-wrap: 设置子元素是否换行
属性值 说明
wrap 自动换行
nowrap 默认值,不换行

4、align-content: 设置侧轴上的子元素的排列方式(多行)
注:必须在子项出现换行的情况,即flex-wrap:wrap

属性值 说明
stretch 设置子元素高度平分父元素高度
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子元素平分侧轴的剩余空间
space-between 子元素在侧轴先两边贴,再平分剩余空间的部分

5、align-items: 设置侧轴上的子元素的排列方式(单行)
属性值 说明
flex-start 默认值 从上到下
flex-end 从下到上
center 挤在一起居中
stretch 拉伸

6、flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
复合属性语法flex-flow: row wrap;
四、flex布局子项常见属性
1、flex属性,flex属性定义子元素分配父元素剩余的空间,用flex表示占多少份数
.item{
flex:1
}
2、align-self 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目于其他项目的不同排列方式,可以覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
div span:nth-child(1){
align-self: flex-end;
}
3、order属性,定义项目的排列顺序
【前端布局|前端布局 flex布局】项目的默认值为从0开始,数值越小,则可以排得更考前,可以设置为负数

    推荐阅读