4.5 align-items
該屬性定義項目在交叉軸上如何對齊。
| 屬性值 | 說明 |
|---|---|
| stretch（預設值） | 如果項目未設定高度或者設為auto，将占滿整個容器高度 |
| baseline | 項目的第一行文字的基線對齊 |
| flex-start | 交叉軸的起點對齊 |
| flex-end | 交叉軸的終點對齊 |
| center | 交叉軸的中點對齊 |
源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">測試文字1</div>
<div class="div2">測試文字22</div>
<div class="div3">3</div>
</div>
</body>
</html>
stretch運作結果
baseline運作結果
flex-start運作結果
flex-end運作結果
center運作結果
**4.7 align-content **
該屬性定義了多跟軸線的對齊方式。如果項目隻有一根軸線，則該屬性不起作用。
| stretch(預設值) | 軸線占滿整個交叉軸 |
| space-between | 與交叉軸兩端對齊，軸線之間的間隔平均分布 |
| space-around | 每根軸線兩側的間隔都相等。是以軸線之間的間隔比邊框的間隔大一倍 |
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</div>
</body>
</html>
stretch運作結果：
flex-start運作結果：
flex-end運作結果：
center運作結果：
space-between運作結果：
space-between運作結果
space-around運作結果：
space-around運作結果
![Docker：安裝Docker Compose[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)