父级容器属
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <style>
/**
父级的几个属性
flex-direction ——》 属性决定主轴的方向（横着还是竖着） row | row-reverse | column | column-reverse;
flex-wrap-》 一行排不下是否换行 nowrap | wrap（换行 第一行在上） | wrap-reverse（换行第一行在下）;
flex-flow -》上面两个属性的集合
justify-content-》 属性定义了项目在主轴（x轴）上的对齐方式。
flex-start(左端对齐) |
flex-end（右端对齐） |
center（居中对齐） |
space-between （ 每一排 左右盒子紧挨边界盒子们间距相等）|
space-around;（ 每一排 每个盒子左右两侧间距恒等）
align-items-》 属性定义项目在交叉轴(Y轴)上如何对齐。
flex-start （顶部对齐 注意 ：如 flex-wrap：column-reverse，则底部对齐）|------------------------
flex-end （底部对齐）|
center | (上下居中)
baseline （文字基线对齐）|
stretch （盒子高变为父级宽，设置了敢赌除外）;
align-content -》属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(适用于非一条x垂直对齐方式)
flex-start （顶部对齐）|
flex-end 底部对齐|
center 垂直居中|
space-between垂直居中（上下紧挨着顶与低） |
space-around 垂直对齐 上下间距相等 |
stretch;轴线占满整个交叉轴。(每行下间距相等 首行顶部挨顶) */
* {
margin:0;
padding: 0;
list-style: none;
}
.wrap{
width: 100%;
height: 800px;
background-color: #fcfccc;
}
ul{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: baseline;
height: 800px;
align-content:stretch; }
li{
flex-grow: 1;
margin: 3px;
background-color: red;
text-align: center;
min-width: 300px;
max-width: 500px;
} </style>
</head>
<body> <div class="wrap">
<ul>
<li>01</li>
<li>01</li>
<li>01</li>
<li>01</li><li>01</li>
<li>01</li>
<li>01</li>
<li>01</li><li>01</li>
<li>01</li>
<li>01</li>
<li>01</li>
<li>01</li>
<li>01</li>
<li style="height: 100px;padding-top: 30px">02</li>
<li>03</li>
<!--<li>04</li>-->
<!--<li>05</li>-->
<!--<li>07</li>--> </ul>
</div>
</body>
</html>
注意： 当父级 display:flew ;子级无 display :flew-grow：1；子级大小等于盒子大小 -------父级样式生效