<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="roww bigview flexw">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
<div class="colonn bigview">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
<div class=" bigview row_space_between">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
<div class=" bigview row_space_around">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
<div class=" bigview colonn_space_between">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
<div class=" bigview colonn_space_around children_div">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
<div class=" bigview roww div_bottom">
<div class="divitem"></div>
<div class="divitem" style="height: 100px;width: 100px;"></div>
</div>
<div class=" bigview flexw ">
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
<div class="divitem"></div>
</div>
<style>
/* 横着排列 */
.bigview{
width: 400px;
height: 400px;
border: red 3px solid;
}
.divitem{
width: 50px;
height: 50px;
background-color: blue;
border: red 3px solid;
}
/* 横着排列 */
.roww{
display: flex;
flex-direction: row;
}
/*竖着排列 */
.colonn{
display: flex;
flex-direction: column;
}
/* 横着均匀分布 左右两边靠边 */
.row_space_between{
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 横着均匀分布，两边轴线有间隙 */
.row_space_around{
display: flex;
flex-direction: row;
justify-content: space-around;
}
/* 子元素竖着均匀分布，上下紧贴边边 */
.colonn_space_between{
display: flex;
justify-content: space-between;
flex-direction: column;
}
/* 子元素竖着均匀分布 上下边上有间隙 */
.colonn_space_around{
display: flex;
justify-content: space-around;
flex-direction: column;
}
/* 子元素左右上下居中 */
.children_div{
justify-content: center;
}
/* 子元素多了之后换行 */
.flexw{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* div盒子大小不一，底部对齐 */
.div_bottom{
align-items:flex-end;
}
/* align-content 两行的话 上下间距一样 相对于父元素居中 */
.align_content_center{
align-content:space-around;
}
</style>
</body>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
