关于flex布局的一些简单用法
效果（下图）
实现代码：
<!--html-->
<div class="wrap">
<div class="content">这是子盒子</div>
</div> //css
.wrap {
display: flex;
width: 300px;
height: 300px;
background-color: #ccc;
justify-content: center;//子盒子位于现在的位置
//justify-content: flex-start;子盒子位于现在的位置 的左边
//justify-content: flex-end;子盒子位于现在的位置 的右边
}
.content {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: orange;
}
效果（如下图）
<!--html-->
<div class="wrap">
<div class="content">这是子盒子</div>
</div> //css
.wrap {
display: flex;
width: 300px;
height: 300px;
background-color: #ccc;
}
.content {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: orange;
align-self: center;//位于上图中现在的位置
//align-self: flex-start;位于上图中现在的位置 的上方
//align-self: flex-end;位于上图中现在的位置 的下方
}
//用于父元素
justify-content: center | flex-start | flex-end;// 中 左 右 三个位置 //用于子元素
align-self: center | flex-start | flex-end;// 中 上 下 三个位置 //两个属性相互结合，就可以做到很多布局
转化成flex的元素的子元素默认是排在一行的
flex-wrap:wrap（换行-在下方）| nowrap（换行-在上方）| none （默认-不换行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*css*/
.wrap{
width:600px;
height:300px;
display:flex;
background-color: #ccc;
}
.wrap div{
width:25%;
height: 150px;
box-sizing: border-box;
line-height: 150px;
text-align: center;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
上面代码的效果图（默认不换行）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*css*/
.wrap{
width:600px;
height:300px;
display:flex;
background-color: #ccc;
flex-wrap: wrap;
}
.wrap div{
width:25%;
height: 150px;
box-sizing: border-box;
line-height: 150px;
text-align: center;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
上面代码的效果图（换行-在下方）
以后有在了解的再补上