百分比布局：某個網格的寬度為固定的百分比，其余網格平均分配剩余的空間。
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>