基本介绍
伸缩盒布局也叫弹性盒布局,是一种新的布局方式,可以简便、完整、响应式地实现各种页面布局;flex布局可以使元素具有弹性,让元素可以跟随页面的大小改变而改变;
伸缩盒布局的组成部分
主轴
弹性元素的排列方向称为主轴
交叉轴
与主轴垂直方向的称为侧轴
弹性容器
要使用弹性盒布局,必须先把一个元素设置为弹性容器;
弹性容器的属性
flex-direction
指定容器中弹性元素的排列方式;
可选值:
row:默认值,弹性元素在弹性容器中水平排列(从左往右),此时主轴:左->右,交叉轴:上->下
row-reverse:弹性元素在弹性容器中反向水平排列(从右往左),此时主轴:右->左,交叉轴:下->上
column:弹性元素在弹性容器中垂直排列(从上往下),此时主轴:上->下,交叉轴:左->右
column-reverse:弹性元素在弹性容器中反向垂直排列(从下往上),此时主轴:下->上,交叉轴:右->左
flex-wrap
设置弹性元素是否在弹性容器中自动换行
可选值:
nowrap:默认值,元素不会自动换行;
wrap:元素沿着交叉轴方向自动换行
wrap-reverse:元素沿着辅轴反方向换行
flex-content
如何分配主轴上的空白空间(主轴上的元素如何分配)
可选值:
flex-start:元素沿着主轴起边排列;
flex-end:元素沿着主轴终边排列;
center:元素剧中排列;
space-around:空白分布到元素两侧;
space-between:空白均匀分布到元素间,最左最右的元素都紧贴容器
space-evenly:空白分布到元素的单侧,元素间的间距以及最左与最右的元素与容器的间距都一样;
align-items
如何分配交叉轴上的空白空间;
可选值:
stretch:默认值,如果项目没设置高度,或高度为auto,则占满整个容器;
flex-start:元素沿着交叉轴轴起边排列;
flex-end:元素沿着交叉轴终边排列;
center:居中对齐;
baseline:基线对齐;
align-content
控制多行弹性元素的对齐方式,如果弹性元素只有一行或者一列则不会起作用;
可选值:
stretch:默认值,如果项目没设置高度,或高度为auto,则占满整个容器;
flex-start :元素沿着主轴起边排列;
flex-end:元素沿着主轴终边排列;
center:居中对齐;
space-around:项目之间间距为上下两端项目与容器间距两倍;
space-between:上下两侧项目紧贴容器;
space-evenly:项目之间间距与项目到容器之间间距相等;
弹性元素
弹性容器的直接子元素才是弹性元素(弹性项目)
弹性元素也可以嵌套设置为弹性容器;
弹性元素的属性
order
用于决定项目排列顺序
可选值:数值,0为默认值;数值越小,弹性元素排列越向前;
flex-grow
指定弹性元素的伸展系数
当父元素有多空间时,子元素会按照比例进行分配;
默认值:0;
flex-shrink
指定弹性元素的收缩系数
当父元素的空间不足以容纳所有的子元素时,子元素会按照比例进行分配;
默认值:1,会自动等比例伸缩;
flow-basis
指定的是弹性元素在主轴上的基础长度;
如果主轴是横向的,指定的就是元素的宽;
如果主轴是纵向的,指定的就是元素的高;
默认:auto:参考元素自身的宽度和高度;
flex
可以设置弹性元素的伸展系数、收缩系数、基础长度;
默认值:0 ,1 ,auto
align-self
表示继承父容器的align-items属性;
用于让个别项目拥有与其他弹性元素不同的对齐方式;
可选值与弹性容器中的align-items属性的值一样;