弹性盒模型(display:flex)
在我们做移动端项目的时候,弹性盒模型经常会用到,初学者经常会搞不清它的属性。下面主要了解一下弹性盒子的五个属性。
1. flex-direction:指定弹性子元素在父容器中的位置
- row:左对齐
- row-reverse:右对齐
- column:纵向对齐,即从上向下排列
- column-reverse:反转纵向对齐,即从下向上排列
下面展示效果
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
2. justify-content:内容对齐
- flex-start:左对齐
- flex-end:右对齐
- center:居中
- space-between:平均分布
- space-around:平均分布并且两边有一半的间隔空间
下面展示效果
justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around
3. align-items:纵轴上的对齐方式
- flex-start:左对齐
- flex-end:右对齐
- center:居中
- baseline:基线对齐
- stretch:auto默认
下面展示效果
align-items:flex-start
align-items:flex-end
align-items:center
align-items:baseline
align-items:stretch
4.flex-wrap:子元素换行方式
- nowrap:默认单行
- wrap:多行
- wrap-reverse:翻转多行
- initial
- inherit:继承
下面展示效果
flex-wrap:nowrap
flex-wrap:wrap
flex-wrap:wrap-reverse
5.align-content:用于修改flex-wrap属性,修改各行对齐方式
- flex-start
- flex-end
- center
- space-bewteen
- space-around
- stretch:默认
下面展示效果
align-content:flex-start
align-content:flex-end
align-content:center
align-content:space-bewteen
align-content:space-around
上面五个属性是给弹性盒子设置的属性,那么弹性子元素的属性呢?
- order 属性值为整数,数字越小,越靠前。
- align-self:纵轴
- flex:用于指定弹性子元素之间怎么分配空间。