flex的align-content、align-items的介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 800px;
border:2px solid red;
/* 将该元素设置为弹性容器 */
display: flex;
/* 设置弹性元素在主轴上的排列方向*/
flex-direction: row;
/* 设置字体大小 */
font-size: 30px;
/* 设置文字对齐方式 */
text-align: center;
/* 设置弹性元素是否换行 */
flex-wrap: wrap;
/* align-items 元素在辅轴当前行上如何对齐（行与行之间）
stretch 默认值 将元素拉伸为与当前行高相同的高度
flex-start 元素不会拉伸，沿辅轴当前行的起边对齐
flex-end 元素不会拉伸，沿辅轴当前行的终边对齐
center 元素不会拉伸，沿辅轴当前行居中对齐
baseline 元素不会拉伸，第一行*/
/* align-items:baseline; */
/* 只有在 flex-wrap:wrap 时才起作用
align-content:辅轴方向上空白空间的分布（辅轴整个方向）
flex-start 元素在辅轴方向沿辅轴起边排列
flex-end 元素在辅轴方向沿辅轴终边排列
center 元素在辅轴方向上居中排列
space-around 空白分布到元素两侧
space-evenly 空白分布到元素的单侧
space-between空白分布到元素间 */
align-content: center ;
justify-content: center;
}
.box div{
background-color: chartreuse;
width: 300px;
/* 块元素的高度被line-height撑开 */
line-height: 300px;
/* 设置弹性元素的伸缩系数为1 */
/* flex-grow: 1; */
flex-shrink: 0;
}
.box div:nth-child(2){
background-color: coral;
align-self: stretch;
font-size: 20px;
}
.box div:nth-child(3){
background-color: darkgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
