1. 伸缩布局应用:
伸缩布局应用 主轴： Flex容器的主轴用来配置Flex项目，默认是水平方向 侧轴： 与主轴垂直的轴称为侧轴，默认还是垂直方向 方向： 默认是主轴从左向右， 侧轴默认是从上到下 主轴和侧轴并不是固定不变的 通过flex-direction可以互换 min-width 设置px 到达设置的这个值就不在缩放了 max-width 跟上面这个相反 flex 可以放在每个盒子里面自由调整需要给盒子添加display: flex;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*给父级盒子添加flex*/
display: flex; /*伸缩布局模式*/
}
section div {
height: 100%;
flex: 1; /*每个子盒子占的份数*/
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
}
section div:nth-child(3) {
background-color: pink;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
2. 伸缩盒子设置固定宽度
section div:nth-child(1) {
background-color: pink;
width: 300px;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 1;
}
section div:nth-child(3) {
background-color: pink;
flex: 2;
}
伸缩的时候2和3可以伸缩 1不会变
3.伸缩布局的排列方式
flex-direction: colomn; 列布局
flex-direction: colomn；行布局
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*给父级盒子添加flex*/
display: flex; /*伸缩布局模式*/
min-width: 500px;
flex-direction: column;
}
协程布局案列：
案例之协程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
min-width: 320px;
max-width: 540px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
}
header img {
width: 100%;
height: 100%;
}
nav {
padding: 5px;
}
.row {
height: 90px;
width: 100%;
background-color: #ff697a;
border-radius: 8px;
display: flex;
margin-bottom: 5px;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
.row3 {
flex: 1;
border-left: 1px solid #fff;
}
row div:first-child {
}
.hotel {
display: flex;
flex-direction: column;
}
.hotel a {
flex: 1;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 45px;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0, .3)
}
.hotel a:first-child {
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<header>
<img src="image/ctrip.jpg" alt="">
</header>
<nav>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div>
<div class="row">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div>
</nav>
</body>
</html>
4.调整主轴对齐
justify-content 调整主轴对齐 值 描述 flex-start 让子元素从父元素的开头排序 flex-end 位于容器的结尾 center 位于容器的中心 space-between 左右贴近父盒子 中间分布空白距离 space-around 相当于给每个盒子添加了每个盒子的margin
5. 调整垂直对齐
align-items 调整垂直对齐 值 描述 stretch 让子元素的高度拉伸适应父容器（前提是子元素不给高度） center 垂直居中 flex-start 垂直对齐开始位置 flex-end 垂直对齐结束位置
6. 控制是否换行
nowrap: 不换行 相当于强制一行显示 默认是这个 wrap 自动换行 wrap-reverse
7. 多行调整垂直对齐
align-content堆栈 针对flex里面多轴的情况下，align-items是针对一行的 必须对父亲设置display: flex; flex-direction： row; 方式为横向排列 以及flex-wrap: wrap; strech center flex-start flex-end space-between space-around 属性作用跟align-items的一样 order控制子盒子的前后顺序 数值越小越往前 可以写负数 默认是0