简介
- Flex弹性布局
- CSS3弹性盒（Flexilble Box或flexbox）是一种布局方式，常用与当页面需要适应不同的屏幕大小以及设备类型是能够确保元素拥有恰当的行为
- 作用
- 能够更加高效方便地控制元素的对齐，排列
- 无论元素的尺寸是固定高度的还是动态的，都可以自动计算布局内元素的尺寸
- 控制元素在页面内的布局方向
- 按照不同的DOM所指定排序方式对屏幕上的元素重新排列
- 好处
- 可以让子元素排列在一行
- 使子元素的高度一致
一，Flex布局语法
1.1，display: flex
- 创建一个html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100%; height: 600px; border: 1px solid black; } .box>div{ border: 1px solid black; } </style> </head> <body> <div class="box"> <div>第一个子元素</div> <div>第二个子元素</div> <div>第三个子元素</div> </div> </body> </html>
- 这是一个没有任何描述的样子
- 原来想要移动内容都需要浮动，现在我们在盒子里添加display: flex属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100%; height: 600px; border: 1px solid black; display: flex; } .box>div{ border: 1px solid black; } </style> </head> <body> <div class="box"> <div>第一个子元素</div> <div>第二个子元素</div> <div>第三个子元素</div> </div> </body> </html>
- 现在添加display: flex内容自动浮动，但是我们没有做float浮动，也没有做边框塌陷处理
- display: flex属性写的有两个地方：
第一个父写在容器
第二个是子元素里
结论
就这一行就能让子元素并列排在一行，并且元素高度一样！！！
二，Flex属性
- 容器属性
- 设置给父元素的属性
- 项目属性
- 设置给子元素的属性
三，容器属性
| 容器属性 | 说明 |
| flex-direction | 决定主轴的方向（即项目的排列方向） |
| flex-wrap | 定义如果在一条轴线排不下，如何换行 |
| flex-flow | 复合属性：是flex-direction和flex-wrap属性的简写形式 |
| justify-content | 定义项目在主轴上的对齐方式 |
| align-items | 定义项目在纵轴上的对齐方式 |
| align-content | 定义多根轴线的对齐方式 |
3.1，flex-direction
- 决定主轴的方向（即项目的排列方向）
- row：横向从左到右排列（左对齐），默认的排列方式
- row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
- column：纵向排列
- column-reverse：反转纵向排列，从后王前排，最后一项排在上面
3.2，flex-direction：row；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100%; height: 600px; border: 1px solid black; display: flex; flex-direction:row; } .box>div{ border: 1px solid black; } </style> </head> <body> <div class="box"> <div>第一个子元素</div> <div>第二个子元素</div> <div>第三个子元素</div> </div> </body> </html>
横向从左到右排列（左对齐），默认的排列方式
3.3，flex-direction：row-reverse；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100%; height: 600px; border: 1px solid black; display: flex; flex-direction:row-reverse; } .box>div{ border: 1px solid black; } </style> </head> <body> <div class="box"> <div>第一个子元素</div> <div>第二个子元素</div> <div>第三个子元素</div> </div> </body> </html>
row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
3.4，flex-direction：column；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100%; height: 600px; border: 1px solid black; display: flex; flex-direction:column; } .box>div{ border: 1px solid black; } </style> </head> <body> <div class="box"> <div>第一个子元素</div> <div>第二个子元素</div> <div>第三个子元素</div> </div> </body> </html>
纵向排列
3.5，flex-direction：column-reverse；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100%; height: 600px; border: 1px solid black; display: flex; flex-direction:column-reverse; } .box>div{ border: 1px solid black; } </style> </head> <body> <div class="box"> <div>第一个子元素</div> <div>第二个子元素</div> <div>第三个子元素</div> </div> </body> </html>
反转纵向排列，从后王前排，最后一项排在上面
