CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

  • 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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

元素动态缩小的处理技巧:

<!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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

主轴的基准尺寸的定义:

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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

弹性元素组规则和定义:

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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

也可以单独进行调整:

<!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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

控制弹性元素的排序:

数字越大越往后,可负数,越负越往前

<!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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

弹性元素排序实例:

<!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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

弹性布局操作文本节点:

<!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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

多级菜单的弹性布局:

<!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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

 

使用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>

CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

 

DIV块右bai侧留空自动取得margin-right: auto