从上往下，从左往右

最新推荐文章于 2021-07-16 11:56:09 发布

HH_KELE

最新推荐文章于 2021-07-16 11:56:09 发布

阅读量363

点赞数

本文链接：https://blog.csdn.net/HH_KELE/article/details/104337998

版权

<html> 
<head> 
<meta charset="utf-8"/> 
<title>从上往下，从左往右</title> 
<style> 
.container {
    display:flex;
    flex-flow:column wrap;
    height:100%;
	max-width: 120px;
    background:#ccc;
}
.area {
    width:100px;
    height:100px;
    background:#444;
    margin: 10px;
}
</style> 
</head> 
<body> 
<div class="container">
    <div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
    <div class="area">area6</div>
	
	<div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
	<div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
    <div class="area">area6</div>
	
	<div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
	<div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
    <div class="area">area6</div>
	
	<div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
	<div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
    <div class="area">area6</div>
	
	<div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
</div>
</body> 
</html>