当前位置：首页 > Web开发 > 正文

CSS伸缩布局

2024-03-31 Web开发

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>

View Code

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>

View Code

4.调整主轴对齐

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/42690.html

CSS伸缩布局

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢