代碼
提交代碼
<!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>
運行結果