<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 父级是容器 */
.wrapper{
width: 700px;
height: 700px;
border: 1px solid black;
/* 将父级设置为弹性盒子 */
display: flex;
/* flex-direction:项目的排列方向
row：按行排列
column:按列排列
row-reverse:按行排，右对齐，反序
column-reverse:按列排，下对齐，反序
*/
flex-direction: row;
/* justify-content:项目在水平方向的对齐方式
flex-start:左对齐
flex-end:右对齐
center:居中对齐
space-evenly:所有项目之间间距相等
space-between:每两个子项目之间的间距相等
space-around:每个子项目都有左右相等的外边距
stretch:如果子项目不设置高度或值为auto，高度将充满容器
*/
justify-content: space-around;
/* align-items:垂直方向对齐方式，只针对一根轴线
flex-start:上对齐
flex-end:下对齐
center:居中对齐
baseline:基线对齐
stretch:如果子项目不设置高度或值为auto，高度将充满容器
*/
align-items: center;
}
/* 子级是项目 */
.wrapper div{
width: 200px;
height: 200px;
/* float: left; */
}
.wrapper div:nth-of-type(1){
background-color: red;
}
.wrapper div:nth-of-type(2){
background-color:green;
}
.wrapper div:nth-of-type(3){
background-color:blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div></div>
<div></div>
<div></div>
中国华夏
</div>
</body>
</html>
