<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #eee;
font-size: 22px;
}
h3 {
margin: 10px;
font-weight: normal;
}
section {
width: 1000px;
margin: 0 auto;
}
ul {
background-color: #fff;
border: 1px solid #ccc;
height: 700px;
}
ul li {
width: 200px;
height: 200px;
background-color: pink;
margin: 10px;
}
section:nth-child(1) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
/* align-content 是基于 flex-wrap: wrap; 才可以使用的属性 */
align-content: flex-start;
}
section:nth-child(2) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
/* align-content 是基于 flex-wrap: wrap; 才可以使用的属性 */
align-content: flex-end;
}
section:nth-child(3) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
align-items: flex-end;
}
section:nth-child(4) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
/* align-content 是基于 flex-wrap: wrap; 才可以使用的属性 */
align-content: center;
}
section:nth-child(5) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
/* align-content 是基于 flex-wrap: wrap; 才可以使用的属性 */
align-content: space-around;
}
section:nth-child(6) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
/* align-content 是基于 flex-wrap: wrap; 才可以使用的属性 */
align-content: space-between;
}
section:nth-child(7) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
/* align-content 是基于 flex-wrap: wrap; 才可以使用的属性 */
align-content: stretch;
}
.stretch li {
height: auto;
}
section:nth-child(8) ul {
display: flex;
/* 这个换行是必须的，align-content 才会生效 */
flex-wrap: wrap;
/* align-content 是基于 flex-wrap: wrap; 才可以使用的属性 */
align-content: stretch;
}
</style>
</head>
<body>
<section>
<h3>align-content: flex-start;</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<section>
<h3>align-content: flex-end;</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<section>
<h3>align-items: flex-end; 可以比较一下上面 align-content: flex-end; 的效果，会发现行两者间距一个属于弹性间距一个会按着css设置间距来，两者的其他属性也是这样 </h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<section>
<h3>align-content: center;</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<section>
<h3>align-content: space-around; 平均分摊空间，以这两行举例，行高一样，间距一样，中间行间距高，是因为有第一行的底部跟第二行的顶部间距</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<section>
<h3>align-content: space-between; 两端对齐</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<section>
<h3>align-content: stretch; 拉伸</h3>
<ul class="stretch">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<section>
<h3>align-content: stretch; 拉伸, 高度不设置 auto 状态下的样子</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
</body>
</html>
