1、CSS3的flex布局
| flex布局 | 基础知识 |
display:flex |
元素变成一个flex容器 |
| 容器内部的元素 | 叫做flex元素或者flex项目(flex-item)，默认不换行，高度占100% |
| 优点 | 比浮动布局更简洁，更易于维护 |
2、flex-direction属性（设置元素是横向还是纵向的 ）
3、justify-content属性（设置容器水平对齐）
justify-content属性 |
设置元素(flex-item)左右对齐 |
flex-start(默认值) |
左对齐 |
flex-end |
右对齐 |
center |
居中 |
space-between |
两端对齐，间隔相等 |
space-around |
两端对齐，间隔相等，最两边有间隔 |
4、align-items属性（设置元素垂直对齐）
align-item属性 |
设置元素高度是否占满 |
stretch(延伸)（默认值） |
如果元素没有设置高度，将占满整个容器 |
flex-start |
交叉轴（y轴）的起点对齐 |
flex-end |
交叉轴（y轴）的终点对齐 |
center |
交叉轴（y轴）的中点对齐 |
5、flex-grow属性（放大元素比例，默认为0）
/* 5、flex-grow属性:定义元素放大比例，默认值为0，空间充足时，为1时等比例补全 */ flex-grow: 0; /* 5.1、元素占比为3 */ flex-grow: 3;
6、flex-shrink属性（缩小元素比例）
/* 6、flex-shrink属性：缩小元素比例 */ /* 如果项目宽度大于容器，不会溢出，会等比例缩放 */ flex-shrink: 2;
7、aligin-self属性（跟align-item属性一样，设置【单个元素】垂直对齐）
/* 7、多个样式：flex:flex-grow、flex-shrink、flex-basis(auto) */ flex: 2; /* 8、align-self属性跟algin-item属性是一样的 */ align-self: center;
8、实例（通过flex布局实现元素水平垂直居中）
- 8.1效果：
8.2源代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0px; margin: 0px; } body, html { height: 100%; } .container { background-color: antiquewhite; height: 100%; display: flex; /* 水平居中 */ justify-content: center; /* 垂直居中 */ align-items: center; } .box { width: 100px; height: 100px; background-color: blueviolet; /* 单个垂直居中 */ align-self: center; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html>
9、实例（通过flex布局实现元素底部对齐）
- 9.1、效果：
9.2、源代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0px; margin: 0px; } .container { background-color: antiquewhite; width: 100%; height: 70px; position: absolute; bottom: 0px; display: flex; justify-content: center; align-items: center; } .content { flex-grow: 1; } .container .content img { height: 30px; } </style> </head> <body> <div class="container"> <div class="content"> <img src="image/cart-dash-fill.svg" alt=""> </div> <div class="content"> <img src="image/chat-square-dots-fill.svg" alt=""> </div> <div class="content"> <img src="image/cloud-minus-fill.svg" alt=""> </div> <div class="content"> <img src="image/envelope.svg" alt=""> </div> <div class="content"> <img src="image/facebook.svg" alt=""> </div> </div> </body> </html>
10、flex布局笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 将元素设置为display:flex;元素会变成一个flex容器 容器内部的元素为flex元素或者叫flex项目(flex-item),默认不独立成行 主轴：main axis 交叉轴：cross axis */ * { padding: 0px; margin: 0px; } .container { width: 200px; height: 200px; border: 1px solid black; /* 1、flex布局：弹性布局、弹性盒子布局 元素(flex-item)，默认不换行，高度占100% */ display: flex; /* 2、flex-direction属性：设置元素水平垂直方向 row(默认值)：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 */ flex-direction: row; /* 3、justify-content属性：设置元素水平对齐 flex-start（默认）:左对齐 flex-end:右对齐 center:居中 space-between:两端对齐，项目之间有间隔 space-around:两端对齐，项目之间、最两边都有间隔 */ justify-content: space-between; /* 4、algin-item属性：设置元素垂直对齐 stretch(延伸)（默认值） 如果元素没有设置高度，将占满整个容器 flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：交叉轴的中点对齐 */ align-items: center; } .item { width: 100px; border: 1px solid black; /* 5、flex-grow属性:定义元素放大比例，默认值为0，空间充足时，为1时等比例补全 */ flex-grow: 1; } .item2 { /* 5.1、元素占比为3 */ flex-grow: 3; /* 6、flex-shrink属性：缩小元素比例 */ /* 如果项目宽度大于容器，不会溢出，会等比例缩放 */ flex-shrink: 2; /* 7、多个样式：flex:flex-grow、flex-shrink、flex-basis(auto) */ flex: 2; /* 8、align-self属性跟algin-item属性是一样的 */ align-self: center; } </style> </head> <body> <div class="container"> <div class="item">item1</div> <div class="item item2">item2</div> <div class="item">item3</div> </div> </body> </html>
