1.flex布局原理
- flex意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局
- 为父盒子设置flex布局后,子元素的flot、clear 和 vertical-align 属性将失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
- 采用flex布局的元素,称为flex容器,简称“容器”。它所有的子元素自动成为容器成员,称为flex项目,简称“项目”
2.父项属性
2.1flex-direction
-
作用:设置主轴方向
-
主轴与侧轴
-
主轴默认为x轴,水平向右
-
侧轴默认为y轴,水平向下
-
主轴可更改,子元素是跟随主轴排列的
-
属性值
-
属性值 说明 row(默认值) 从左到右 row-reverse 从右到左(翻转) column 从上到下 column-reverse 从下到上
-
2.2justify-content
-
作用:设置主轴上的子元素排列方式
-
属性值
-
属性值 说明 flex-start(默认值) 从头部开始,如果主轴是x轴,则从左到右(贴着左边对齐) flex-end 从尾部开始排列(贴着右边对齐) center 在主轴居中对齐 space-around 平分剩余空间(每个盒子左右边距相等,边上间距小于盒子间的边距) space-evenly 真平分剩余空间 space-between 先两边贴边,再平分剩余空间(重要)
-
2.3flex-warp
-
作用:设置子元素是否换行
-
默认情况下,子元素都排在一条轴线上,flex布局中默认是不换行的
-
属性值
-
属性值 说明 nowrap(默认值) 不换行 warp 换行
-
2.4align-items
-
作用:设置侧轴(默认y轴)上的子元素排列方式(单行)
-
在子项为单行时使用
-
属性值
-
属性值 说明 flex-start 从上到下 flex-end 从下到上 center 垂直居中 stretch(默认值) 拉伸 -
拉伸:子盒子有高度时不生效。无高度时,子盒子高度拉伸到和父盒子一样
-
2.5align-content
-
作用:设置侧轴(默认y轴)上的子元素的排列方式(多行)
-
只能用于子项出现换行的情况,即多行。单行下没有效果
-
属性值
-
属性值 说明 flex-start(默认值) 在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around 子项在侧轴,平分剩余空间(子项margin值相等) space-evenly 子项在侧轴,真平分剩余空间 space-between 子项在侧轴,先分布在两头,再平分剩余空间 stretch 设置子项元素高度平分父项高度
-
2.6flex-flow
- 作用:复合属性,相当于同时设置了 flex-direction 和 flex-warp
- 例:
flex-flow:row warp
3.子项属性
3.1felx
-
作用:定义子项分配剩余空间,用flex来表示占多少份数
-
例:
flex:1
,表示占剩余空间的一份
3.2align-self
-
作用:控制单个子项自己在侧轴上的排列方式
-
允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性
-
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
-
例:
-
span:nth-child(2) { /* 设置自己在侧轴上的排列方式 */ align-self"flex-end; }
-
3.3order
- 作用:属性自定义项目的排列顺序
- 数值越小,排列越靠前,默认值为0
- 注意:和z-index不一样