<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:
0;
padding:
0;
list-style:
none;
}
body {
background-color:
#999999;
}
section {
width:
800px;
margin:
30px auto;
}
ul {
background-color:
white;
border:
1px solid #000;
overflow:
hidden;
}
li {
width:
150px;
height:
150px;
background-color:
pink;
margin:
10px;
}
section:
nth-child(
1)
ul li {
float:
left;
}
section:
nth-child(
2)
ul {
display:
flex;
justify-content:
flex-end;
flex-wrap:
wrap;
}
</style>
</head>
<body>
<section>
<h3>正常布局</h3>
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
</ul>
</section>
<section>
<h3>伸缩布局,justify-content: flex-end;
行内结束位置对齐</h3>
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>1
</li>
<li>2
</li>
<li>3
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>1
</li>
<li>2
</li>
<li>3
</li>
</ul>
</section>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-663510.html
