关于用flex弹性盒子修饰网页
一.flex盒子的概念：
1.容器与项目：在网页中采用flex布局的元素称为flex容器，该容器的内部元素称为flex项目；通过 display： flex 可以将元素强制转换为 Flex 容器。
2.在flex容器中有两根轴（主轴，交叉轴），主轴由水平从左往右，交叉轴垂直于主轴。
3.flex容器的对齐方式由justify-content 主轴对齐，以及align-items 和 align-content 交叉轴对齐。
二.flex盒子的实验：
1.flex-wrap：wrap项目可以被压缩至适应容器的宽度，如果不想换行的话可以在wrap的前面加上no（flex-wrap：nowrap）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的弹性布局</title> <style> .div1{ display: flex; border: 2px solid #a00; padding: 10px; height: 100px; flex-wrap: wrap } .div2{ background-color: #33c4d4; border: 3px solid rgb(46, 102, 213); width: 80px; height: 40px; color: white; text-align: center; } </style> </head> <body> <div class="div1"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> </body> </html>2.justify-content：(flex-start(左对齐)/center(居中对齐)/flex-end(右对齐))主轴对齐，项目靠主轴的左对齐，居中对齐，右对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的弹性布局</title> <style> .div1{ display: flex; border: 2px solid #a00; padding: 10px; height: 100px; } .div2{ background-color: #33c4d4; border: 3px solid rgb(46, 102, 213); width: 80px; height: 40px; color: white; text-align: center; } </style> </head> <body> <div class="div1" style="justify-content: flex-start;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> <div class="div1" style="justify-content: flex-end;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> <div class="div1" style="justify-content: center"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> </body> </html>主轴除了这三种对齐以外还有三种分别是：
space-evenly（项目之间以及项目与容器边缘的间距完全相等）
space-between（项目之间间距相等，但首尾项目紧贴容器边缘）
space-around（项目两侧的外边距相等（项目之间间距是边缘间距的2倍））
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的弹性布局</title> <style> .div1{ display: flex; border: 2px solid #a00; padding: 10px; height: 100px; } .div2{ background-color: #33c4d4; border: 3px solid rgb(46, 102, 213); width: 80px; height: 40px; color: white; text-align: center; } </style> </head> <body> <div class="div1" style="justify-content: space-evenly;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> <div class="div1" style="justify-content: space-between;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> <div class="div1" style="justify-content: space-around;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> </body> </html>3.align-content:：（flex-start(顶部对齐)/center(居中对齐)/flex-end(底部对齐))交叉轴对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的弹性布局</title> <style> .div1{ display: flex; border: 2px solid #a00; padding: 10px; width: 500px; height: 200px; flex-wrap: wrap } .div2{ background-color: #33c4d4; border: 3px solid rgb(46, 102, 213); width: 120px; height: 40px; color: white; text-align: center; } </style> </head> <body> <div class="div1" style="align-content: flex-start;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> <div class="div1" style="align-content: center;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> <div class="div1" style="align-content: flex-end;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> </body> </html>对于交叉轴对齐，它还有两种对齐方式：
align-content：space-between(行与行之间间距相等，第一行靠顶，最后一行靠底)
align-content: space-around(行上下都有相等间距，整体与容器边缘也有间距)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的弹性布局</title> <style> .div1{ display: flex; border: 2px solid #a00; padding: 10px; width: 500px; height: 200px; flex-wrap: wrap } .div2{ background-color: #33c4d4; border: 3px solid rgb(46, 102, 213); width: 120px; height: 40px; color: white; text-align: center; } </style> </head> <body> <div class="div1" style="align-content: space-between;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> <div class="div1" style="align-content: space-around;"> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> <div class="div2">盒子1</div> <div class="div2">盒子2</div> <div class="div2">盒子3</div> </div> </body> </html>