 |
位置：电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Flex Box实战教程 > 流式布局 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 悬挂式布局 | 下一篇： 九宫格实战 |
|
每行的项目数固定，会自动分行。
CSS代码如下 .parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
代码： <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流式布局</title>
</head>
<body>
<style>
.rongqi{ width:200px; height:200px; background-color:#CCC; display:flex;flex-wrap:wrap;align-content:flex-start;}
.xm{ width:25%; height:50px; background-color:#FFF; border:1px solid red; padding:10px; box-sizing:border-box;}
</style>
<div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
</div>
</body>
</html> |
|
| 上一篇： 悬挂式布局 | 下一篇： 九宫格实战 |
