<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#overview {
width: 100vw;
height:100vh;
background-color: #201f1f;
display: flex;
justify-content: center;
align-items: center;
}
.container{
width: 400px;
height: 400px;
background-color: #8dd353;
display: flex;
flex-wrap: wrap;
justify-content: start;
/**
* align-items 纵轴方向的对齐方式
*/
align-items: start;
/**
* align-content 多行的时候的对齐方式 flex-start与justify-content:类似
*/
align-content:start;
}
.row{
background-color: #105ae6;
padding:10px;
height: 50px;
text-align: center;
border:2px solid #ccc;
width: 33.333%;
}
.row:nth-child(1){
background-color: #e2390e;
height:100px;
}
</style>
</head>
<body id="overview">
<div class="container">
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
<div class="row">4</div>
<div class="row">5</div>
<div class="row">6</div>
<div class="row">7</div>
<div class="row">8</div>
</div>
</body>
</html>
主要要记住 几个属性
flex 作用与 盒子内容元素
是一维的
align-items 每个元素的align-self 作用于每个元素,可以使元素在交叉轴方向对齐。
justify-content 作用于 元素两端的对齐方式 两端对齐
align-content 作用于多行元素的横轴对齐方式