css中设置交叉轴内容为拉伸,CSS-弹性布局2-交叉轴

4.5 align-items

该属性定义项目在交叉轴上如何对齐。

属性值

说明

stretch(默认值)

如果项目未设置高度或者设为auto，将占满整个容器高度

baseline

项目的第一行文字的基线对齐

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

源代码

flex-wrap

.wrap{

width: 200px;

display: flex;

flex-direction: row;

flex-wrap: wrap;

height: 200px;

align-items: stretch;

border: 1px solid red;

}

div{

width: 20px;

margin : 5px;

}

.div1{

padding-top: 10px;

background: red;

}

.div2{

background: blue;

}

.div3{

background: yellow;

}

测试文字1

测试文字22

3

stretch运行结果

stretch运行结果

baseline运行结果

baseline运行结果

flex-start运行结果

flex-start运行结果

flex-end运行结果

flex-end运行结果

center运行结果

center运行结果

**4.7 align-content **

该属性定义了多跟轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。

属性值

说明

stretch(默认值)

轴线占满整个交叉轴

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

space-between

与交叉轴两端对齐，轴线之间的间隔平均分布

space-around

每根轴线两侧的间隔都相等。所以轴线之间的间隔比边框的间隔大一倍

源代码：

flex-wrap

.wrap{

width: 200px;

display: flex;

flex-direction: row;

flex-wrap: wrap;

height: 200px;

align-content: stretch;

border: 1px solid red;

}

div{

width: 50px;

margin:5px;

}

.div1{

background: red;

}

.div2{

background: blue;

}

.div3{

background: yellow;

}

.div4{

background: green;

}

.div5{

background: gray;

}

1

2

3

4

5

stretch运行结果：

stretch运行结果

flex-start运行结果：

flex-start运行结果

flex-end运行结果：

flex-end运行结果

center运行结果：

center运行结果

space-between运行结果：

space-between运行结果

space-around运行结果：

space-around运行结果