弹性盒子模型，块标签横向排列
.div_parent{
width: 600px;
height: 300px;
border: 1px solid red;
}
.div_parent>div{
width: 100px;
height: 100px;
}
.div_son1{
background-color: palevioletred;
}
.div_son2{
background-color: aqua;
}
.div_son3{
background-color: aquamarine;
}
.row{
display: flex;/*设置为弹性盒子模型*/
flex-direction: row;/*在一行显示，从左到右*/
flex-wrap: wrap;/*设置是否换行，默认不换行，不换行会自动缩小盒子*/
}
.reverse_row{
display: flex;
flex-direction: row-reverse;/*在一行显示，从右到左*/
}
.column{
display: flex;
flex-direction: column;/*在一列显示，从上到下*/
flex-wrap: wrap;
}
.reverse_column{
display: flex;
flex-direction: column-reverse;/*在一列显示，从下到上*/
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index1.css"/>
</head>
<body>
<div class="div_parent row">
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
</div>
<div class="div_parent reverse_row">
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
</div>
<div class="div_parent column">
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
</div>
<div class="div_parent reverse_column">
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
</div>
</body>
</html>
弹性盒子模型内的布局
.div_parent{
width: 600px;
height: 300px;
border: 1px solid red;
}
.div_parent>div{
width: 100px;
height: 100px;
}
.div_son1{
background-color: palevioletred;
align-self: flex-end;/*对单个盒子做对齐方式*/
order: 3;
flex-grow: 2;
}
div.div_son2{
background-color: aqua;
width: 200px;
align-self: center;
order: 2;
}
.div_son3{
background-color: aquamarine;
order: 1;
flex-grow: 1;/*如果容器有剩余空间，用flex-frow可以对盒子进行放大，数字指的是放大的比例*/
}
.row{
display: flex;/*设置为弹性盒子模型*/
flex-direction: row;/*在一行显示，从左到右*/
flex-wrap: wrap;/*设置是否换行，默认不换行，不换行会自动缩小盒子*/
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
justify-content: space-between;/*对整体做对齐方式*/
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index2.css"/>
</head>
<body>
<div class="div_parent row">
<div class="div_son1">1</div>
<div class="div_son2">2</div>
<div class="div_son3">3</div>
</div>
</body>
</html>
