弹性布局
弹性容器
/* 设置为弹性容器 */
display: flex;
弹性子元素
/* child元素为弹性子元素 ，直接子元素的子元素就不再是弹性子元素*/
.child{
width: 200px;
height: 300px;
/* margin: 0px auto;可以使主轴元素平均分布 */
设置了display：flex的弹性容器的直接子元素即为弹性子元素
弹性主轴
/* 设置主轴方向
row是默认设置即行。多个元素按比例压缩放置在容器中不会换行，
row-reverse:从右到左
column是从上到下即列 */
flex-direction: row;
/* 设置主轴的内容分布
flex-start默认向主轴的开始位置靠拢：
center主轴元素居中即向主轴的中心位置靠拢
flex-end向结束靠拢
space-around：平均分布两边有间距是中间的一半
space-between：平均分布主轴没有间距（或者在child元素里面用margin：auto也可以使主轴元素平均分布*/
justify-content: space-around;
设置侧轴方向
/* 设置侧轴的内容分布
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 ;
}
弹性布局空间分布
/* <!-- 侧边栏是主要内容的一半，广告栏固定200px
弹性布局剩余空间分布设置 --> */
/* 剩余空间分布设置
flex:1就是占据1份*/
.left{
background: springgreen;
flex: 1;
}
.add{
width: 200px;
background: teal;
}
.main{
background: turquoise;
flex: 2;
}
子元素排列
/* 子元素排序：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;
}
以下是完整代码：
<!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">
/* display:flex，这里parent元素即为弹性容器 */
.parent{
width: 1000px;
height: 1000px;
border: 1px solid bisque;
margin: 0px auto;
/* 设置为弹性容器 */
display: flex;
/* 设置主轴方向
row是默认设置即行。多个元素按比例压缩放置在容器中不会换行，
row-reverse:从右到左
column是从上到下即列 */
flex-direction: row;
/* 设置主轴的内容分布
flex-start默认向主轴的开始位置靠拢：
center主轴元素居中即向主轴的中心位置靠拢
flex-end向结束靠拢
space-around：平均分布两边有间距是中间的一半
space-between：平均分布主轴没有间距（或者在child元素里面用margin：auto也可以使主轴元素平均分布*/
justify-content: space-around;
/* 设置侧轴的内容分布
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 ;
}
/* child元素为弹性子元素 ，直接子元素的子元素就不再是弹性子元素*/
.child{
width: 200px;
height: 300px;
/* margin: 0px auto;可以使主轴元素平均分布 */
}
.c1{
background: salmon;
order: 3;
}
.c2{
background: springgreen;
order: 1;
}
.c3{
background: yellow;
}
</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 c1">
1
</div>
<div class="child c2">
2
</div>
<div class="child c3">
3
</div>
<div class="child c1">
1
</div>
<div class="child c2">
2
</div>
<div class="child c3">
3
</div>
<div class="child c1">
1
</div>
<div class="child c2">
2
</div>
<div class="child c3">
3
</div>
<div class="child c1">
1
</div>
<div class="child c2">
2
</div>
<div class="child c3">
3
</div>
</div>
</body>
</html>
弹性空间布局
<!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>
子元素排列
<!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>