flex布局
1. 传统布局与flex弹性布局区别
- 传统布局:兼容性好;布局繁琐;局限性,不能在移动端很好的布局
- flex布局:操作简单、布局极为简单,移动端应用广泛;PC端浏览器兼容情况较差;IE11或更低版本,不支持或仅部分支持
- 建议:PC端用传统布局;移动端/不考虑兼容问题的pc端页面用flex布局
2. flex布局原理
flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局
当父盒子设为flex布局以后,子元素的float、clear、vertical-align属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用Flex布局的元素,称为Flex容器(flex container),简称容器,它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称项目。
子容器可以横向排列也可以纵向排列
总结:通过父盒子添加flex属性,来控制子盒子的位置和排列方式
3. 父项常见属性
(1) flex-direction:设置主轴的方向(即项目的排列方式)
-
在flex布局中,分为主轴与侧轴两个方向
-
默认主轴方向是x轴方向,水平向右
-
默认侧轴方向是y轴方向,垂直向下
-
注意:主轴和侧轴是会变化的,子元素是跟着主轴来排列的
属性值
row:默认值 从左到右
row-reverse:从右到左
column:从上到下(若主轴设置为y轴,x轴就是侧轴)
column-reverse:从下到上
(2) justify-content:设置主轴上的子元素排列方式
-
定义了项目在主轴上的对齐方式
-
注意:使用这个属性之前一定要确定好主轴是哪个
属性值
flex-start:默认值从头部开始,如果主轴是x轴,则从左到右
flex-end:从尾部开始排列
center:在主轴居中对齐(如果主轴是x轴则水平居中)
space-around:平分剩余空间
space-between:先两边贴边,再平分剩余空间(重要)
(3)flex-wrap:设置子元素是否换行
-
默认情况下,项目都排在一条线(又称轴线)上
-
默认子元素不换行,若装不开,会缩小子元素的宽度,放到父元素里面
属性值
nowrap:默认值,不换行
wrap:换行
(4) algin-items:设置侧轴上的子元素的排列方式(单行)
-
该属性是控制子项在侧轴(默认是y轴)上的排列方式
-
在子项为单项(单行)的时候使用
属性值
flex-start:默认值 从上到下
flex-end:从下到上
center:挤在一起居中(垂直居中)
stretch:拉伸(子盒子不给高度时,可以呈现出来)
(5) align-content:设置侧轴上的子元素的排列方式(多行)
-
设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果的
属性值
flex-start:在侧轴的头部开始排列
flex-end:在侧轴的尾部开始排列
center:在侧轴中间显示
space-around:子项在侧轴平分剩余空间
space-between:子项在侧轴先分布在两头,再平分剩余空间
stretch:设置子项元素高度平分父元素高度
(6) flex-flow:复合属性
- 是flex-direction和flex-wrap属性的复合属性
- flex-flow: row nowrap;
(7) algin-items和align-content区别
- algin-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
- align-content适用于换行(多行)的情况下,可以设置上对齐、下对齐、居中和拉伸以及平均分配剩余空间等属性值
- 单行找algin-items,多行找align-content
4. 子项常见属性
(1) flex属性:子项目占的份数
- 定义子项目分配父盒子的剩余空间,用flex来表示占多少份数
- 属性值为数字,数字为1时,表示占总份数中的1份,默认是0
(2) algin-self:控制子项自己在侧轴的排列方式
- 此属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
- 默认值为auto,表示继承父元素的align-items属性;如果没有父元素,则等同于stretch
(3) order:定义子项的排列顺序(前后顺序)
- 数值越小,排列越靠前,默认是0
- 注意:和z-index不一样