一、等分：平均分布。在容器里面平均分配空间，需要设置项目的自动缩放。
section{
display:-webkit-flex;
display: flex;
}
article,aside {
flex: 1;
border:1px solid red;
}
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>H5标准页面</title> <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" /> </head> <body> <section> <article>… </article> <aside>… </aside> </section> <section> <article>… </article> <aside>… </aside> <aside>… </aside> </section> <section> <article>… </article> <aside>… </aside> <aside>… </aside> <aside>… </aside> </section> </body> </html
二、百分比布局：某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
section{ display:-webkit-flex; display: flex; } article,aside{border:1px solid red;} .Grid-cell { flex: 1; } .Grid-cell.u-full { flex: 0 0 100%; } .Grid-cell.u-1of2 { flex: 0 0 50%; } .Grid-cell.u-1of3 { flex: 0 0 33.3333%; } .Grid-cell.u-1of4 { flex: 0 0 25%; }
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>H5标准页面</title> <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" /> </head> <body> <section > <article class="Grid-cell u-1of2 "> 1/2 </article> <aside class="Grid-cell"> auto </aside> <aside class="Grid-cell"> auto </aside> </section> <section> <articla class="Grid-cell" > auto </article> <aside class="Grid-cell u-1of3" > 1/3 </aside> </section> <section> <aside class="Grid-cell u-1of4" > 1/4 </aside> <article class="Grid-cell" > auto </article> <aside class="Grid-cell u-1of3" > 1/3 </aside> </section> </body> </html>
原文：https://www.cnblogs.com/jiunie/p/11338684.html