代码
提交代码
<!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>
.demo{
display: flex;
}
.item{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #ccc;
border-right: 1px solid #fff;
}
.item:first-child{
height: 120px;
}
.item:nth-of-type(3){
height: 160px;
}
.demo-2{
align-items: center;
}
.demo-3{
align-items:flex-start;
}
.demo-4{
align-items:flex-end;
}
.demo-5{
align-items:baseline;
}
</style>
</head>
<body>
<p>
stretch 默认值。元素被拉伸以适应容器。
</p>
<div class="demo demo-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<p>
center 项目位于容器的中心。
</p>
<div class="demo demo-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<p>
flex-start 项目位于容器的头部。
</p>
<div class="demo demo-3">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<p> flex-end 项目位于容器的低部。</p>
<div class="demo demo-4">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<p>baseline 元素位于容器的基线上。默认情况和 flex-star 一样。</p>
<div class="demo demo-5">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
运行结果