css display flew 伸縮盒模型
阿新 • • 發佈：2017-12-02
-a 模型 pat 垂直居中 direct play spa tween 底部
父級容器屬
<!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 伸縮盒模型