1、左右结构

讯享网

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="width: 140px;"> 西 </div> <div region="center" class="center flex-fill"> 中 </div> </div> 

讯享网<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="center" class="center flex-fill"> 中 </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> 

2、上下结构

<div class="d-flex flex-column" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill"> 中 </div> </div> 

讯享网<div class="d-flex flex-column" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="center" class="center flex-fill"> 中 </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> 

3、上中下

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill"> 中 </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> 

4、左中右

讯享网<div class="d-flex flex-row" style=" height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="width: 140px;"> 西 </div> <div region="center" class="center flex-fill"> 中 </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> 

5、组合嵌套

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="width: 140px;"> 西 </div> <div region="center" class="center flex-fill"> <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill"> 中 </div> </div> </div> </div> 

讯享网<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="center" class="center flex-fill"> <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;"> <div region="center" class="center flex-fill"> 中 </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> 

<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="center" class="center flex-fill"> <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill"> 中 </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> 

讯享网<div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="width: 140px;"> 西 </div> <div region="center" class="center flex-fill"> <div class="d-flex flex-column flex-fill" style="border:1px solid blue;height: 100%;"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill"> 中 </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> </div> </div> 

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill d-flex flex-column"> <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue"> <div region="west" class="west" style="width: 140px;"> 西 </div> <div region="center" class="center flex-fill"> 中 </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> 

讯享网<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6"> <div region="center" class="center flex-fill d-flex flex-column"> <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue"> <div region="west" class="west" style="width: 140px;"> 西 </div> <div region="center" class="center flex-fill"> 中 </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> 

<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill d-flex flex-column"> <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue"> <div region="west" class="west" style="width: 140px;"> 西 </div> <div region="center" class="center flex-fill"> 中 </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> </div> </div> 

讯享网<div class="d-flex flex-column" style=" height: 400px;border:2px solid #ae00e6"> <div region="north" class="north" style="height: 80px;"> 北 </div> <div region="center" class="center flex-fill d-flex flex-column"> <div class="d-flex flex-row flex-fill" style=" height: 100%;border:1px solid blue"> <div region="center" class="center flex-fill"> 中 </div> <div region="east" class="east" style="width: 140px;"> 东 </div> </div> </div> <div region="south" class="south" style="height: 80px;"> 南 </div> </div> 

原文链接：