1：弹性布局：（例子）
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* parent为弹性容器\ */ .parent{ width: 800px; height: 800px; border: 1px solid #ccc; margin: 0 auto; display: flex; /* 设置主轴方向 row:从左到右 column：从上到下 */ flex-direction: column; /* 设置主轴内容分布 flex-start:向主轴开始位置靠拢（默认） center:向主轴中心靠拢 flex-end：向主轴结束位置靠拢 space-around:平均分布，两边间距是中间的一半 space-between：平均分布，两边没有间距 space-evenly：两边有间距，两边的间距跟中间一样 */ justify-content:space-evenly; /* 设置侧轴的内容分布 center:向侧轴中心靠拢 flex-end：向侧轴结束位置靠拢 stretch:拉伸（默认），如果设置高度，拉伸无效*/ align-items: center; } /* child为弹性子元素 */ .child{ width:200px; height:200px; background-color: ; } .c1{ background-color: skyblue; } .c2{ background-color: orange; } .c3{ background-color: purple; } </style> </head> <body> <div class="parent"> <div class="child c1">1</div> <div class="child c2">2</div> <div class="child c3">3</div> </div> </body> </html> 布局分布 `<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ display: flex; } /* 剩余空间分布设置 flex:1;占据一份 flex：2；占据两份 如此推论 */ .left{ flex: 1; background-color: #87CEEB; } .main{ background-color: aqua; flex: 2; .ad{ width: 200px; background: #DA70D6; } </style> </head> <body> <!-- 侧边栏是主要内容一半 广告栏固定是200px 弹性布局剩余空间分布设置 --> <div class="left"> <h1> 侧边栏</h1> </div> <div class="main"> <h1>主要内容</h1> </div> <div class="ad"> <h1>有你的世界在哪里？</h1> </div> </body> </html>