# flex

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

### flex 使用

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

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


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

### 基本概念

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

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

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

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

### 容器的属性

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