伸缩布局
1.首先给子元素的直接父元素设置伸缩盒子
display:flex;2.当父元素为伸缩盒子时，默认子元素在一行上显示
3.伸缩盒子的特点：
◆如果一个盒子变成为伸缩盒子，那么该盒子就具有了两条轴，一条是主轴，一条是侧轴。主轴的默认方向是水平从左向右，侧轴始终要垂直于主轴。
◆子元素是按照主轴的方向显示的。
设置主轴的方向
/*设置主轴的方向。默认为水平从左向右row*/
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
总结：
1.由于在伸缩盒子中子元素是按照主轴的方向显示的，因此我们改变了主轴的方向，子元素的位置也会发生改变
2.主轴的方向发生改变后，侧轴的方向也会随之发生改变设置子元素在主轴的对齐方式
默认对齐方式
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
总结：
◆通过设置该属性，只是改变了子元素在主轴方向的对齐方式，而元素自己本身的位置并没有改变设置子元素在侧轴的对齐方式
align-items: flex-start;
align-items: flex-end;
align-items: center;
子元素在侧轴的对齐方式
align-items: stretch;
子元素没有设置高度
总结：
◆在伸缩盒子中，子元素可以不用设置高度，如果不设置高度，那么该子元素的高度等于其父元素的高度，所以子元素在侧轴是拉伸的效果设置伸缩盒子是否允许子元素换行
在伸缩盒子中，如果子元素的宽度超出了父元素的宽度，那么子元素不会换行显示。
设置子元素换行显示：
/*设置子元素在父元素中是否换行显示*/
flex-wrap: nowrap;
/*子元素可以换行显示*/
flex-wrap:wrap;
设置子元素换行后的对齐效果
/*设置子元素换行后的对齐效果*/
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: stretch;
总结：
◆该属性设置的前提是必须保证是换行后的元素伸缩盒子中子元素的相关属性
◆flex:设置子元素占父元素剩下宽度的比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
border: 1px solid red;
/*将父元素设置为伸缩盒子*/
display: flex;
/*设置主轴的方向。默认为水平从左向右row*/
/*flex-direction: row;*/
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
/*设置子元素在主轴的对齐方式，默认flex-start*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*设置子元素在侧轴的对齐方式*/
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*align-items: stretch;*/
/*设置子元素在父元素中是否换行显示*/
/*flex-wrap: nowrap;*/
/*子元素可以换行显示*/
flex-wrap:wrap;
/*设置子元素换行后的对齐效果*/
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: center;*/
/*align-content: space-around;*/
/*align-content: space-between;*/
/*align-content: stretch;*/
}
.box>div{
margin: 3px;
}
.one{
flex: 1;
height: 100px;
background-color: #000000;
}
.two{
/*width: 100px;*/
height: 100px;
flex: 1;
background-color: red;
}
.three{
flex: 1;
/*width: 100px;*/
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
◆order:排序
◆不需要改变HTML结构中的位置，就可以实现在页面中调换元素的显示位置
◆order的取值越大，那么该元素在页面中的显示位置就越靠后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
border: 1px solid red;
/*将父元素设置为伸缩盒子*/
display: flex;
/*设置主轴的方向。默认为水平从左向右row*/
/*flex-direction: row;*/
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
/*设置子元素在主轴的对齐方式，默认flex-start*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*设置子元素在侧轴的对齐方式*/
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*align-items: stretch;*/
/*设置子元素在父元素中是否换行显示*/
/*flex-wrap: nowrap;*/
/*子元素可以换行显示*/
flex-wrap:wrap;
/*设置子元素换行后的对齐效果*/
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: center;*/
/*align-content: space-around;*/
/*align-content: space-between;*/
/*align-content: stretch;*/
}
.box>div{
margin: 3px;
}
.one{
/*flex: 1;*/
width: 100px;
order: 1;
height: 100px;
background-color: #000000;
}
.two{
width: 100px;
height: 100px;
/*flex: 1;*/
background-color: red;
order: 2;
}
.three{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
伸缩导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 960px;
height: 60px;
background-color: #ccc;
margin: 100px auto;
border-radius: 5px;
overflow: hidden;
}
.box ul{
display: flex;
}
.box li{
flex: 1;
line-height: 60px;
display: flex;
text-align: center;
}
.box a{
flex: 1;
text-decoration: none;
}
a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
<li>
<a href="#">博客之星</a>
</li>
<li>
<a href="#">VIP专栏</a>
</li>
<li>
<a href="#">下载</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">问答</a>
</li>
<li>
<a href="#">活动</a>
</li>
<li>
<a href="#">更多</a>
</li>
</ul>
</div>
</body>
</html>
