flex布局
1. 媒体查询
```css
body{
display: flex;
}
div{
width: 100px;
margin: 20px;
height: 100px;
background-color: palevioletred;
}
@media(max-width:500px){
body{
display: flex;
flex-direction: column;
}
div:nth-child(n+6){
display: none;
}
}
```## flex 布局
### 概念：弹性盒子、子元素
- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
### 概念：主轴和侧轴
- 弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。
- 主轴（X轴）：flex容器的主轴，默认是水平方向，从左向右
- 侧轴（Y轴）：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向
## 弹性盒子
- 定义：使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，父容器里的子元素们，会遵循弹性布局。
### flex-direction 属性：用于设置盒子中**子元素**的排列方向
| 属性值 | 描述 |
|:-------------|:-------------|
| row | 从左到右水平排列子元素（默认值） |
|column|从上到下垂直排列子元素|
| row-reverse |从右向左排列子元素 |
|column-reverse|从下到上垂直排列子元素|
```css
section:nth-child(1) ul{
overflow: hidden; /* 清除浮动 */
}
section:nth-child(1) ul li{
float: left;
}
/* 设置伸缩盒子*/
section:nth-child(2) ul{
display: flex;
}
section:nth-child(3) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向*/
flex-direction: row;
}
section:nth-child(4) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向 :水平翻转*/
flex-direction: row-reverse;
}
```
### `flex-wrap`：控制子元素溢出时的换行处理。
1. 竖直水平对齐
```css
justify-content:center;
align-items:center;
height:100px;
```
2. flex：1 1 auto: 表示元素可以增长和缩小以适应容器的大小，其初始大小由内容决定
- 这个属性的值分别对应了这三个属性：
- flex-grow: 增长的比例是相等的。按照这个比例分配多余的空间。
- flex-shrink: 缩小的比例是相等的。按照这个比例缩小以适应容器。
- flex-basis: 这个值表示在分配多余空间之前，元素的默认大小。auto 表示元素的初始大小由其内容或宽度/高度属性决定。
## 弹性元素
### justify-content 属性
- `justify-content: flex-start;` 设置子元素在**主轴上的排列方式**。属性值是：
- `flex-start` 从主轴的起点对齐（默认值）
- `flex-end` 从主轴的终点对齐
- `center` 居中对齐
- `space-around` 在父盒子里平分
- `space-between` 两端对齐 平分
### align-items 属性
`align-items`：设置子元素在**侧轴上的对齐方式**。属性值是：
- `flex-start` 从侧轴开始的方向对齐
- `flex-end` 从侧轴结束的方向对齐
- `baseline` 基线 默认同flex-start
- `center` 中间对齐
- `stretch` 拉伸
### `flex`属性：设置子盒子的权重
```html
伸缩比例:flex
- 1
- 2
- 3
伸缩比例:flex
- 1
- 2
- 3
```## 色子的代码
```html
Document
```