- 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>
使用弹性盒模型布局底部菜单栏：
<!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>
改变弹性元素方向：
<!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>
控制弹性元素溢出换行处理：
<!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>
统一设置元素的排列方式与换行：
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>
交叉轴元素的多种排列方式：
【单行情况下】
<!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>
水平垂直居中：
<!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>
多行元素在交叉轴的排列方式：
<!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>
弹性元素交叉轴控制：
【针对单一元素】
<!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>
元素可用空间分配：
<!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>
