CSS -- flex布局【超详教程】

flex是flexibl box的缩写，意为“弹性盒”/“伸缩盒”。

flex布局可以简便、完整、响应式地实现各种页面布局，任何一个容器都可以指定为 Flex 布局。

 Flex布局属性

#### 容器属性

- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content

#### 元素属性

- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self

使用方法：对于某个元素只要声明了display: flex;那么这个元素就成为了弹性容器，具有flex弹性布局的特性。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）/ Flex 元素，简称"项目" / "元素"。 

 

注意点: 

1. 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。

2. 每根轴都有起点和终点，这对于元素的对齐非常重要。

3. 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

4. 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

弹性容器的两根轴非常重要，所有属性都是作用于轴的。

flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

**容器属性

^设置主轴排列方式^

  flex-direction属性

用于控制项目排列方向与顺序:

        flex-direction：row(默认) | column | row-reverse | column-reverse

 ^沿主轴的排列方式^

flex-wrap属性

可使得主轴上的元素不换行、换行、反向换行：

flex-warp: nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的元素，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50