简单来说,当给父框添加{display: flex;}属性,就可以把父框变成弹性盒子的容器了
先明白一个概念:主轴和交叉轴
主轴是根据 flex-direction 的属性值来确定的。当值为column时,主轴是垂直方向的。当值为row时,主轴是水平方向的。那么交叉轴就是垂直于主轴的那条线。
弹性盒子的属性分为容器属性和子项目属性。容器属性是来控制整体样式,加给容器里边的。子项目属性是来调整单个元素的样式。
容器属性
1. flex-direction属性:决定主轴的方向(即项目的排列方向);
- row(默认值):主轴为水平方向,起点在左端;
- row-reverse:主轴为水平方向,起点在右端;
- column:主轴为垂直方向,起点在上沿;
- column-reverse:主轴为垂直方向,起点在下沿。
2. flex-wrap属性:规定如果一条轴线排不下,如何换行;
- nowrap(默认):不换行;
- wrap:换行,第一行在上方;
- wrap-reverse:换行,第一行在下方。
3. flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row/nowrap;
4. justify-content属性:定义了项目在主轴上的对齐方式;
- flex-start(默认值):左对齐;
- flex-end:右对齐;
- center: 居中;
- space-between:两端对齐,项目之间的间隔都相等;
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5. align-items属性:定义项目在交叉轴上如何对齐;
- flex-start:交叉轴的起点对齐;
- flex-end:交叉轴的终点对齐;
- center:与交叉轴的中点对齐;
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布;
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍;
- stretch(默认值):轴线占满整个交叉轴。
6. align-content属性:定义了多根轴线的对齐方式;
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。