CSS3 對父級容器的設(shè)置 3.align—items
align-items設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式，語法如下：
align-items : flex-start | flex- end | center | baseline J stretch
align-items屬性的值可以是以下幾種：
?flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住諒行的側(cè)軸起始邊界。
?flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
?center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度。
?baseline：如果彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與flex-start等效。其他情況下，孩值將參與基線對齊。
?stretch：如果指走側(cè)軸大小的屬性值為auto,則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照min/max-width/height屬性的限制。
下面通過實例來理解alignHtems屬性各個值之間的區(qū)別。
【例題】使用align-items屬性
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 1200px;
height: 500px;
border:5px red solid;
display:flex;
justify-content: space-around;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
}
.content{
width: 100px;
height: 100px;
background: lightpink;
color:#fff;
font-size: 50px;
text-align: center;
line-height: 100px;
}
.c1{
height: 100px;
}
.c2{
height: 150px;
}
.c3{
height: 200px;
}
.c4{
height: 250px;
}
.c5{
height: 300px;
}
</style>
</head>
<body>
<div>
<div class="content c1">1</div>
<div class="content c2">2</div>
<div class="content c3">3</div>
<div class="content c4">4</div>
<div class="content c5">5</div>
</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號 
點擊加載更多評論>>