说明：
本属性适用于：多行的弹性盒模型容器
当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <‘ justify-content ‘> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果
实例:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>align-content_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
<style>
h1 {
font: bold 20px/1.5 georgia, simsun, sans-serif;
}
.box {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-direction: wrap;
width: 200px;
height: 200px;
margin: 0;
padding: 0;
border-radius: 5px;
list-style: none;
background-color: #eee;
}
.box li {
margin: 5px;
padding: 10px;
border-radius: 5px;
background: #aaa;
text-align: center;
}
#box {
-webkit-align-content: flex-start;
align-content: flex-start;
}
#box2 {
-webkit-align-content: flex-end;
align-content: flex-end;
}
#box3 {
-webkit-align-content: center;
align-content: center;
}
#box4 {
-webkit-align-content: space-between;
align-content: space-between;
}
#box5 {
-webkit-align-content: space-around;
align-content: space-around;
}
#box6 {
-webkit-align-content: strecth;
align-content: strecth;
}
</style>
</head>
<body>
<h1>align-content示例：</h1>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>
时间： 2025-01-01 10:45:12