BootStrap布局结构Flex各种布局1、左右结构
<div class="d-flex flex-row" >
<div region="west"class="west" >
西
</div>
<div region="center"class="center flex-fill">
中
</div>
</div>
<div class="d-flex flex-row" >
<div region="center"class="center flex-fill">
中
</div>
<div region="east"class="east" >
东
</div>
</div>
2、上下结构
<div class="d-flex flex-column" >
<div region="north"class="north" >
北
</div>
<div region="center"class="center flex-fill">
中
</div>
</div>
<div class="d-flex flex-column" > <div region="center"class="center flex-fill">
中
</div>
<div region="south"class="south" >
南
</div>
</div>
3、上中下
<div class="d-flex flex-column" >
<div region="north"class="north" >
北
</div>
<div region="center"class="center flex-fill">
中
</div>
<div region="south"class="south" >
南
</div>
</div>
4、左中右
<div class="d-flex flex-row" >
<div region="west"class="west" >
西
</div>
<div region="center"class="center flex-fill">
中
</div>
<div region="east"class="east" >
东
</div>
</div>
5、组合嵌套
<div class="d-flex flex-row" > <div region="west"class="west" >
西
</div>
<div region="center"class="center flex-fill">
<div class="d-flex flex-column flex-fill" >
<div region="north"class="north" >
北
</div>
<div region="center"class="center flex-fill">
中
</div>
</div>
</div>
</div>
<div region="center"class="center flex-fill">
<div class="d-flex flex-column flex-fill" >
<div region="center"class="center flex-fill">
中
</div>
<div region="south"class="south" >
南
</div>
</div>
</div>
<div region="east"class="east" >
东
</div>
</div>
<div class="d-flex flex-row" > <div region="center"class="center flex-fill">
<div class="d-flex flex-column flex-fill" >
<div region="north"class="north" >
flex布局详细讲解北
</div>
<div region="center"class="center flex-fill">
中
</div>
<div region="south"class="south" >
南
</div>
</div>
</div>
<div region="east"class="east" >
东
</div>
</div>
<div region="west"class="west" >
西
</div>
<div region="center"class="center flex-fill">
<div class="d-flex flex-column flex-fill" > <div region="north"class="north" >
北
</div>
<div region="center"class="center flex-fill">
中
</div>
<div region="south"class="south" >
南
</div>
</div>
</div>
</div>
<div class="d-flex flex-column" >
<div region="north"class="north" >
北
</div>
<div region="center"class="center flex-fill d-flex flex-column">
<div class="d-flex flex-row flex-fill" >
<div region="west"class="west" >
西
</div>
<div region="center"class="center flex-fill">
中
</div>
<div region="east"class="east" >
东
</div>
</div>
</div>
<div region="south"class="south" >
南
</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。