CSS3 FLEX 弹性盒模型让布局飞起来 -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;         }         main{             width:100%;             height:100vh;             display:flex;         }         nav{             width:80px;             background:pink;         }         article{             background:lightblue;             flex:1;         }     </style> </head> <body>     <main>         <nav></nav>         <article></article>     </main> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             display:flex;             height:100vh;             flex-direction:column;         }         main{             background:pink;             flex:1;         }         footer{             height:60px;             background:#ddd;             display:flex;             justify-content: space-evenly;         }         footer div{             flex:1;             text-align:center;             line-height:60px;             color:#555;         }         footer div:nth-of-type(n+2){             border-left:1px solid #ccc;         }     </style> </head> <body>     <main></main>     <footer>         <div>item</div>         <div>item</div>         <div>item</div>         <div>item</div>     </footer> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             border:1px solid pink;             width:100%;             display:flex;             flex-direction:row;             flex-direction:row-reverse;             flex-direction:column;             flex-direction:column-reverse;                      }         /* article下的所有子元素 */         article *{             width:100px;             height:100px;             background:lightblue;             margin:5px;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>     </article> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             border:1px solid pink;             width:100%;             display:flex;             flex-direction:row;             flex-wrap:wrap;             flex-wrap:wrap-reverse;                      }         /* article下的所有子元素 */         article *{             width:140px;             height:140px;             background:lightblue;             margin:5px;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>     </article> </body> </html>

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

 

 

统一设置元素的排列方式与换行:

flex-direction + flex-wrap = flex-flow

<!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{             border:1px solid pink;             width:100%;             display:flex;             flex-flow:row wrap;                      }         /* article下的所有子元素 */         article *{             width:140px;             height:140px;             background:lightblue;             margin:5px;         }     </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{             border:1px solid pink;             width:100%;             display:flex;             /* 主轴开始 */             justify-content:flex-start;             /* 主轴结束 */             justify-content:flex-end;             /* 整体居中 */             justify-content:center;             /* 左右两边距离相等 */             justify-content:space-around;             /* 左右靠边,中间平分 */             justify-content:space-between;             /* 完全平分 */             justify-content: space-evenly;                      }         /* article下的所有子元素 */         article *{             width:80px;             height:80px;             background:lightblue;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>     </article> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             border:1px solid pink;             width:100%;             height:100vh;             display:flex;             /* 交叉轴开始 */             align-items:flex-start;             /* 交叉轴结束 */             align-items:flex-end;             /* 交叉轴居中 */             align-items:center;             /* 交叉轴拉伸,当direcrion为row时,需要元素不设置高度;当direction为column时,需要元素不设置宽度 */             align-items:stretch;                      }         /* article下的所有子元素 */         article *{             width:80px;             /* height:80px; */             background:lightblue;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>     </article> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             border:1px solid pink;             width:100%;             height:100vh;             display:flex;             justify-content: center;             align-items:center;                      }         /* article下的所有子元素 */         article *{             width:80px;             height:80px;             background:lightblue;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>     </article> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             border:1px solid pink;             width:100%;             height:100vh;             display:flex;             flex-wrap:wrap;             align-content: flex-start;             align-content: flex-end;             align-content: center;             align-content: space-around;             align-content: space-between;             align-content: space-evenly;                      }         /* article下的所有子元素 */         article *{             width:120px;             height:120px;             background:lightblue;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>         <div>4</div>         <div>5</div>     </article> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             border:1px solid pink;             width:100%;             height:100vh;             display:flex;                      }         /* article下的所有子元素 */         article *{             width:120px;             height:120px;             background:lightblue;         }         article :first-child{             align-self:stretch;             height:auto;         }         article :nth-child(2){             align-self:center;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>     </article> </body> </html>

CSS3 FLEX 弹性盒模型让布局飞起来 -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{             border:1px solid pink;             width:100%;             height:100vh;             display:flex;                      }         /* article下的所有子元素 */         article *{             width:80px;             height:80px;             background:lightblue;             padding:10px;             background-clip:content-box;             border:1px solid lightblue;         }         article :first-child{             /* 不平分,默认的宽度 */             flex-grow:0;         }         article :nth-child(2){             flex-grow:2;         }         article :nth-child(3){             flex-grow:3;         }     </style> </head> <body>     <article>         <div>1</div>         <div>2</div>         <div>3</div>     </article> </body> </html>

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