概述:弹性盒是CSS3中新增的一种布局模式,也称为Flexbox。它提供了一种更加灵活的方式来布局和排列元素,特别适用于响应式设计和移动端开发。使用弹性盒可以轻松地实现元素的对齐、分布、排序和伸缩等操作,而不需要使用传统的浮动、定位和表格布局等方式。弹性盒模型包括容器和项目两个部分,容器定义了弹性盒的基本属性和行为,而项目则是弹性盒中的每个元素。弹性盒的属性有很多,例如flex-direction、justify-content、align-items等,可以通过这些属性来控制弹性盒的布局和样式。
容器属性:
1.flex-direction:定义了主轴的方向(即弹性盒的排列方向),取值有四个:row(默认值,主轴为水平方向,起点在左端)、row-reverse(主轴为水平方向,起点在右端)、column(主轴为垂直方向,起点在上沿)、column-reverse(主轴为垂直方向,起点在下沿)。
属性:
- row:主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
2.flex-wrap:定义了弹性盒子元素在父容器中是否换行,取值有三个:nowrap(默认值,不换行)、wrap(换行,第一行在上方)、wrap-reverse(换行,第一行在下方)。
属性:
- nowrap:不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
3.justify-content:定义了弹性盒子元素在主轴上的对齐方式,取值有五个:flex-start(默认值,左对齐)、flex-end(右对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)、space-around(每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框之间的间隔大一倍)。
属性:
- flex-start:左对齐。
- flex-end:右对齐。
- center:居中对齐。
- space-between:两端对齐,项目之间的间隔相等。
- space-around:每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框之间的间隔大一倍。
4.align-items:定义了弹性盒子元素在交叉轴上的对齐方式,取值有五个:stretch(默认值,如果项目未设置高度或设为auto,将占满整个容器的高度)、flex-start(交叉轴的起点对齐)、flex-end(交叉轴的终点对齐)、center(交叉轴的中点对齐)、baseline(项目的第一行文字的基线对齐)。
属性:
- stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline:项目的第一行文字的基线对齐。
5.align-content:定义了多根轴线的对齐方式,如果只有一根轴线,则该属性不起作用。取值有六个:stretch(默认值,轴线占满整个交叉轴)、flex-start(与交叉轴的起点对齐)、flex-end(与交叉轴的终点对齐)、center(与交叉轴的中点对齐)、space-between(与交叉轴两端对齐,轴线之间的间隔平均分布)、space-around(每根轴线两侧的间隔相等,所以轴线之间的间隔比轴线与边框之间的间隔大一倍)。
属性:
- stretch:轴线占满整个交叉轴。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔相等,所以轴线之间的间隔比轴线与边框之间的间隔大一倍。
子元素属性:
1.order: 定义了弹性盒子元素的排列顺序,数值越小,排列越靠前,默认为0。
属性:
- 数值:定义了弹性盒子元素的排列顺序,数值越小,排列越靠前,默认为0。
2.flex-grow: 定义了弹性盒子元素的放大比例,即当剩余空间有多余时,弹性盒子元素按照flex-grow的比例分配,默认值为0,即不放大。
属性:
- 数值:定义了弹性盒子元素的放大比例,即当剩余空间有多余时,弹性盒子元素按照flex-grow的比例分配,默认值为0,即不放大。
3.flex-shrink: 定义了弹性盒子元素的缩小比例,即当空间不足时,弹性盒子元素按照flex-shrink的比例缩小,默认值为1,即可缩小。
属性:
- 数值:定义了弹性盒子元素的缩小比例,即当空间不足时,弹性盒子元素按照flex-shrink的比例缩小,默认值为1,即可缩小。
4.flex-basis: 定义了弹性盒子元素在主轴方向上的初始大小,默认值为auto,即由元素的内容决定。
属性:
- auto:由元素的内容决定。
- 数值:定义了弹性盒子元素在主轴方向上的初始大小。
5.flex: 是flex-grow、flex-shrink和flex-basis的缩写,用于设置弹性盒子元素的伸缩属性。
属性:
- flex-grow:定义了弹性盒子元素的放大比例。
- flex-shrink:定义了弹性盒子元素的缩小比例。
- flex-basis:定义了弹性盒子元素在主轴方向上的初始大小。
6.align-self: 定义了弹性盒子元素在交叉轴上的对齐方式,取值与align-items相同,但它只作用于单个元素,而不是整个容器。如果该元素的父容器设置了align-items属性,则align-self会被覆盖。
属性:
- auto:继承父元素的align-items属性。
- stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline:项目的第一行文字的基线对齐。