Flex弹性布局

Flex 布局语法教程-详情：https://www.runoob.com/w3cnote/flex-grammar.html

一、将父元素设置为Flex容器
    dispaly:flex;

二、父容器属性
    1.flex-direction #定义排序方向
        {
            row #从左到右排序
            row-reverse #从右到左排序
            column #从上到下排序
            column-reverse #从下到上排序
        }
    2.flex-wrap #定义是否换行
        {
            nowrap # 不换行
            wrap #换行
            wrap-reverse #换行，第一行在下方
        }
    3.flex-flow #flex-direction 和 flex-wrap 的组合
    4.justify-content #定义水平方向对齐方式
        {
            flex-start #默认左对齐
            flex-end #右对齐
            center #居中
            space-between #两端对齐，项目之间的间隔相等。
            space-around #每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。
        }
    5.align-items #定义垂直方向对齐方式
        {
            flex-start #上对齐
            flex-end #下对齐
            center #中心对齐
            baseline #第一行文字基线对齐
            stretch #（默认值）如果未设置高度或设为auto，将占满整个容器的高度。
        }
    6.align-content #多行内容垂直对齐方式
        {
            flex-start #上对齐
            flex-end #下对齐
            center #多行中心对齐
            space-between #轴线之间间隔平均分布
            space-around #轴线两侧间隔相等
            stretch # (默认值) 拉伸占满整个垂直方向
        }

三、子元素属性
    1.order #定义排序位置，默认值为0，值越小越靠前
    2.flex-grow #定义放大比例，默认值为0：如纯在剩余值也不放大
    3.flex-shrink #定义缩小比例，默认值为1：空间不足将缩小
    4.flex-basis #定义初始大小，默认值为auto，即表示初始大小
        {
            <length> #大小值
            auto #根据内容大小确定
        }
    5.flex #flex-grow,flex-shrink,flex-basis的缩写，默认值0 1 auto,后面两个可选。
    6.align-self #自定义对齐方式
        {
            auto #由父元素对齐
            flex-start #上对其
            flex-end #下对齐
            center #中心
            baseline #基线对齐
            stretch #占满垂直区域
        }