# flex

flex 意为弹性盒子，用来为盒模型提供最大的灵活性

### flex 使用

任何一个元素都能被指定为flex 容器

```
display:flex  选中元素为块级元素时

display:inline-flex    选中元素为内联元素时
```

### 基本概念

通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“

容器默认存在两个轴，水平主轴和垂直的交叉轴

水平主轴的起点叫做 main start   结束位置叫做 main end

垂直交叉轴的起点叫做 cross start  结束位置叫做  cross end



注： 容器的主轴和侧轴是由 flex-direction 确定的 默认主轴是水平（row） 

当 flex-direction 的值为column时  主轴为竖直  侧轴为水平

![image-20210222165013291](\4.flex.assets\image-20210222165013291.png)



![image-20210120143705542](\4.flex.assets\image-20210120143705542.png)





### 容器的属性

- flex-direction  声明容器使用的轴是水平的还是垂直的
  - row 水平（起点在左）
  - column 垂直 （起点在上）
  - row-reverse 水平（起点在右）
  - column-reverse 垂直（起点在下）

- justify-content 声明排列的方式
  - center  居中
  - space-around   每个项目两侧的间隔相等  项目到边框有间距
  - space-between 两端对齐  项目之间的间隔都相等
- align-items 定义项目在交叉轴上的排列方式
  - center  居中
  - flex-start 交叉轴起点对齐（拓展）
  - flex-end 交叉轴终点对齐
  - baseline 第一行文字的基线对齐
  - stretch  默认占满整个容器的高度

![image-20210120113341512](\4.flex.assets\image-20210120113341512.png)

```
<!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>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;  //声明容器为弹性盒子 
            flex-direction: row; //声明排列的方向为水平和竖直
            align-items: center;//垂直排列方式
            justify-content: center； //水平排列方式
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
```



#### justify-content

##### center:  水平居中

![image-20210120114326831](\4.flex.assets\image-20210120114326831.png)

```
.box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;
            flex-direction: row;
            justify-content: center;
        }
```



##### space-around 每个项目两侧的间隔相等  项目到边框有间距

![image-20210120114504619](\csspress\4.flex.assets\image-20210120114504619.png)

```
.box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;
            flex-direction: row;
            justify-content: space-around;
        }
```



##### space-between  两端对齐  项目之间的间隔都相等

![image-20210120114721023](\4.flex.assets\image-20210120114721023.png)



```
.box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;
            flex-direction: row;
            justify-content: space-between;
        }
```



#### align-items

定义侧轴的项目对齐方式

作业1：

![image-20210120134940595](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120134940595.png)

作业2：

实现flex-内容宽度等分

作业3：

左右布局，一侧定宽一侧自适应填满

作业4：

未知高度上下左右居中

作业6：

![image-20210120135351730](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135351730.png)

作业7：

![image-20210120135442183](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135442183.png)

作业8

![image-20210120135503448](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135503448.png)