父级容器属
<!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；子级大小等于盒子大小 -------父级样式生效