- A+
所属分类：Web前端
布局小米移动端页面结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } body{ display:flex; flex-direction: column; height:100vh; } header{ height:60px; background:lightblue; } main{ height:100px; background:pink; flex-grow:1; } footer{ height:60px; background:#ddd; } </style> </head> <body> <header></header> <main></main> <footer></footer> </body> </html>
元素动态缩小的处理技巧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } article{ display:flex; } article div{ background:lightblue; border:1px solid lightblue; padding:10px; background-clip:content-box; width:120px; height:120px; } /* flex-shrink 空间不足时的缩小比例，设置为0表示不缩小 */ article div:nth-child(1){ flex-shrink:0; } article div:nth-child(2){ flex-shrink:1; } article div:nth-child(3){ flex-shrink:2; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> </article> </body> </html>
主轴的基准尺寸的定义：
flex-basis 指定了 flex 元素在主轴方向上的初始大小
如果flex-direction是row，则主轴的基准尺寸可覆盖width；
如果flex-direction是column，则主轴的基准尺寸可覆盖height；
作用可以参考这篇：https://juejin.im/post/6844904152238129165
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } article{ display:flex; } article div{ background:lightblue; border:1px solid lightblue; padding:10px; background-clip:content-box; width:120px; height:120px; flex-basis:100px; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> </article> </body> </html>
弹性元素组规则和定义：
flex-grow+flex-shrink+flex-basis可简写为flex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } article{ display:flex; } article div{ background:lightblue; border:1px solid lightblue; padding:10px; background-clip:content-box; width:120px; height:120px; flex-grow:1; flex-shrink:2; flex-basis:100px; /* 简写形式 */ flex:1 2 100px; /* 都不缩放的情况下，会溢出 */ flex:1 0 150px; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> </article> </body> </html>
也可以单独进行调整：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } article{ display:flex; } article div{ background:lightblue; border:1px solid lightblue; padding:10px; background-clip:content-box; width:120px; height:120px; } article div:nth-child(1){ flex: 1 0 150px; } article div:nth-child(2){ flex: 1 2 150px; } article div:nth-child(3){ flex: 1 1 150px; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> </article> </body> </html>
控制弹性元素的排序：
数字越大越往后，可负数，越负越往前
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } article{ display:flex; } article div{ background:lightblue; border:1px solid lightblue; padding:10px; background-clip:content-box; width:120px; height:120px; } article div:nth-child(1){ order:2; } article div:nth-child(2){ order:3; } article div:nth-child(3){ order:-1; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> </article> </body> </html>
弹性元素排序实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } article{ display:flex; flex-direction:column; height:100vh; } article section{ background:lightblue; border:1px solid lightblue; padding:10px; background-clip:content-box; flex:1 0 100px; text-align:center; display:flex; flex-direction:column; } article section div{ flex:1; display:flex; flex-direction:column; justify-content:center; } article section span{ padding:10px; background:pink; cursor:pointer; } </style> </head> <body> <article> <section> <div>项目1</div> <span onclick="up(this)">up</span> </section> <section> <div>项目2</div> <span onclick="up(this)">up</span> </section> <section> <div>项目3</div> <span onclick="up(this)">up</span> </section> </article> <script> function up(el){ let order = getComputedStyle(el.parentElement,null).order; el.parentElement.style.order = order*1 - 1; // 点击up让元素的order-1 console.log(order); } </script> </body> </html>
弹性布局操作文本节点：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } article{ display:flex; height:100vh; justify-content:space-between; align-items:center; } </style> </head> <body> <article> 这是文本 <div>这是div</div> 这是文本 </article> </body> </html>
多级菜单的弹性布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } body{ height:100vh; display:flex; flex-direction:column; } header{ height:60px; background:pink; } main{ flex:1; background:lightblue; } footer{ height:50px; background:#ddd; border-top:1px solid #eee; display:flex; justify-content:space-between; } footer section{ flex:1; border-right:1px solid #eee; display:flex; flex-direction:column-reverse; } footer section:last-child{ border-right:none; } footer section h4{ flex:0 0 50px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; } footer section ul{ display:flex; flex-direction:column; border:1px solid #eee; margin-bottom:5px; text-align:center; } footer section ul li{ height:50px; line-height:50px; border-bottom:1px solid #eee; cursor:pointer; background:#ddd; } footer section ul li:last-child{ border-bottom:none; } </style> </head> <body> <header></header> <main></main> <footer> <section> <h4>教程</h4> <ul> <li>html</li> <li>css</li> <li>js</li> </ul> </section> <section> <h4>直播</h4> </section> <section> <h4>软件</h4> </section> </footer> </body> </html>
使用margin自动撑满空间的技巧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } nav{ width:1200px; height:60px; background:#ddd; box-shadow:0 0 0 rgba(0,0,0,.2); margin:0 auto; display:flex; } ul{ list-style:none; display:flex; align-items:center; } ul:first-of-type{ /* 上下两句可以起到相同的效果 */ margin-right:auto; /* flex:1; */ } ul:first-of-type>li{ margin:0 50px; } ul:nth-of-type(2) li{ border-radius:50%; width:30px; height:30px; background:pink; } </style> </head> <body> <nav> <ul> <li>li</li> <li>li</li> <li>li</li> </ul> <ul> <li></li> </ul> </nav> </body> </html>
DIV块右bai侧留空自动取得margin-right: auto
