代码语言：javascript复制
<!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 type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
display: flex;
/*
1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项
2.在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的
默认的取值: flex-wrap 不换行
wrap: 放不下就换行 而不是等比压缩
wrap-reverse: 放不下就换行 , 以行为单位进行反转
*/
/*flex-wrap: nowrap;/*默认的,不换行。*/
flex-wrap: wrap;/*放不下就换行 而不是等比压缩*/
/*flex-wrap: wrap-reverse;/*放不下就换行 , 以行为单位进行反转*/
/*在伸缩容器中有一个叫做align-content的属性, 是专门用于设置换行之后的对齐方式的
注意点: 只有伸缩项发生了换行这个属性才有效*/
/*align-content: flex-start;/*换行之后和侧轴的起点对齐, 一行接一行*/
/*align-content: flex-end;/* 换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作*/
/*align-content: center;/*换行之后和侧轴的中点对齐*/
/* align-content: space-between;/*换行之后在侧轴上两端对齐*/
/*align-content: space-around;/*换行之后在侧轴上环绕对齐*/
align-content: stretch;/*以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴*/
}
ul>li{
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background: red;
}
ul>li:nth-child(2){
background: green;
}
ul>li:nth-child(3){
background: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
