CSS--Flex布局

1 Flex布局介绍

CSS弹性盒子布局是CSS的模块之一，定义了一种针对用户界面设计而优化的CSS盒子模型。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒子模型提供最大的灵活性。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。任何一个容器都可以指定为Flex布局  

# eg: 
    .box{
      display: flex;
    }

# 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2 两根轴线

当使用flex布局时，首先想到的是两根轴线:主轴和交叉轴，flexbox的所有属性都跟这两根轴线有关。
    
主轴(main axis)   : 由flex-direction定义
交叉轴(cross axis) : 或称为副轴，垂直于主轴。

3 容器的属性

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

属性参数具体

https://www.runoob.com/w3cnote/flex-grammar.html
https://zhuanlan.zhihu.com/p/393849980