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;
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 {
80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*给父级盒子添加flex*/
display: flex; /*伸缩布局模式*/
min- 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