第三课：flex布局
flex布局
优点：简单，界面不容易错乱
缺点：不适合
display:flex 给容器加
flex-direction:元素排布方向 row row-reverse
flex-wrap：换行
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是我的titile</title>
<style>
*{margin: 0;padding: 0;}
.big{
width: 1000px;
height: 500px;
background-color: red;
display: flex;
flex-flow: row wrap;
}
.small{width: 200px;height: 200px;background-color: blue;}
.big2{
width: 1000px;
height: 500px;
background-color: red;
margin-top: 20px;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
<div class="small">4</div>
<div class="small">5</div>
<div class="small">6</div>
</div>
<div class="big2">
<div class="small">1</div>
<div class="small">2</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
