弹性布局：
1设置弹性容器
<style type="text/css"> /* display:flex，这里parent元素即为弹性容器 */ .parent{ width: 1000px; height: 1000px; border: 1px solid bisque; margin: 0px auto; /* 设置为弹性容器 */ display: flex;
2弹性子元素
/* child元素为弹性子元素 ，直接子元素的子元素就不再是弹性子元素*/ .child{ width: 200px; height: 300px; /* margin: 0px auto;可以使主轴元素平均分布 */ }
3弹性主轴
/* 设置主轴方向 row是默认设置即行。多个元素按比例压缩放置在容器中不会换行， row-reverse:从右到左 column是从上到下即列 */ flex-direction: row; /* 设置主轴的内容分布 flex-start默认向主轴的开始位置靠拢： center主轴元素居中即向主轴的中心位置靠拢 flex-end向结束靠拢 space-around：平均分布两边有间距是中间的一半 space-between：平均分布主轴没有间距（或者在child元素里面用margin：auto也可以使主轴元素平均分布*/ justify-content: space-around;
4侧轴
/* 设置侧轴的内容分布 flex-start向侧轴的开始位置靠拢： center侧轴元素居中即向主轴的中心位置靠拢 flex-end向结束靠拢 stretch拉伸默认值（设置高度后拉伸无效）*/ align-items: center; /* 设置换行 flex-wrap nowrap默认不换行 wrap换行 */ flex-wrap: wrap; /* 设置侧轴多行的分布align-comtent flex-start:多行内容往侧轴的开端靠拢 flex-end：多行的内容往侧轴结束段靠拢 center：居中 space-between:两边无间距 space-around:平均分布两边有间居，是中间间距的一半 space-evenly:平均分布所有间距一致*/ align-content:flex-start ; }
5弹性布局换行
/* 设置换行 flex-wrap nowrap默认不换行 wrap换行 */ flex-wrap: wrap;
弹性布局空间分布
完整代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body{ display: flex; } /* <!-- 侧边栏是主要内容的一半，广告栏固定200px 弹性布局剩余空间分布设置 --> */ /* 剩余空间分布设置 flex:1就是占据1份*/ .left{ background: springgreen; flex: 1; } .add{ width: 200px; background: teal; } .main{ background: turquoise; flex: 2; } </style></head><body> <div class="left"> <h1> 侧边栏 </h1> </div> <div class="main"> <h1>主要内容</h1> </div> <div class="add"> <h1>广告</h1> </div></body></html>
3弹性布局子元素排列
代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .parent{ width: 900px; height: 600px; border:1px solid salmon ; display: flex; } .child{ width: 100px; height: 100px; } /* 子元素排序：order:设置在子元素上按照标明顺序排序 */ /* 设置子元素侧轴排布 align-self: center;单独设置居中 flex-start:靠近侧轴开端 flex-end：靠近侧轴结束端 strect：拉伸*/ .c1{ background: sandybrown; order: 4; } .c2{ background: springgreen; align-self: center; } .c3{ background: tan; } .c4{ background: teal; } </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 class="child c4">4</div> </div></body></html>
