父级容器属
<!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；子级大小等于盒子大小 -------父级样式生效
每个子级的属性
css display flew 伸缩盒模型
原文地址：http://www.cnblogs.com/aqigogogo/p/7953769.html