CSS弹性盒子模型

    <!-- 

# 用于学习css弹性盒子模型

    - 是一种一维的布局模型.给flexbox的子元素之间提供了强大的空间分布和对齐能力
        - display:flex 设置为弹性盒子
    - flexbox内flex元素的默认属性
        - 元素排列为一行 (flex-direction 属性的初始值是 row)。
        - 元素从主轴的起始线开始。
        - 元素不会在主维度方向拉伸，但是可以缩小。
        - 元素被拉伸来填充交叉轴大小。
        - flex-basis 属性为 auto。
        - flex-wrap 属性为 nowrap。
    - flexbox的两根轴线
        - 主轴
            - flex-direction: row; 主轴的伸缩方向
        - 交叉轴垂直于主轴
        - flexbox的特性是沿着主轴或者交叉轴对齐之中的元素

    - 起始线和终止线的概念
        - 

    - Flex容器
        - 文档中采用了flexbox 的区域就叫做flex容器. 把容器的display设置为flex或者inline-flex.里面的元素称之为flex元素

    - flex-warp简写属性
        - flex-flow => Formal syntat:<flex-direction>||<flex-wrap>;

    - flex元素上的属性
        - flex-basis与flex-shrink,flex-grow就是改变了布局空白(available space)的行为
            -  默认行为是flexbox有盈余,留在后面不做处理.
        - 上面三种元素的简写:flex

    - 元素间的对齐和空间分配
        - flexbox的一个关键特性就是能够设置flex元素沿主轴或者交叉轴的对齐方式,以及他们的空间分配
            - align-items 可以使得元素在交叉轴方向对齐.默认值是stretch
                - value: stretch/flex-start/flex-end/center
            - justify-content: 用来设置主轴的对齐方式.

    -->

    <!-- 

    # 各种属性解释

    - display:flex;  设置容器为flex容器,容器内元素内flex元素
    - flex-direction:; 设置主轴的方向
    - flex-basis  指定了flex元素在主轴上的大小 (设置在flex元素上面)
        - 默认值为0，不是auto，如果取值为auto的话，它的值就等于flex-items的width (到这里还不明白flex-items是什么)
    - flex-wrap 如果元素大小超出,元素换行方式 (设置在flex容器上面)
        - flex-direction与flex-wrap可连写为 flex-flow => Formal syntat:<flex-direction>||<flex-wrap>;

    - flex-grow 如果flexbox的宽度有剩余,flexbox_element的分取方式. (设置在flex元素上面)(flex_element_want_to_grow) [负值无效]

    - flex-shrink 如果flexbox的宽度不满足flexbox_element的大小,子元素的分取方式.(设置在flex元素上面)(flex_element_want_to_shrink) [负值无效]

    - flex: flex-grow flex-shrink flex-basis ; [简写方式]

    - align-items:; 设置flex元素沿交叉轴对齐方式
            - 可取值:stretch/flex-start/flex-end/center
            - stretch:flex元素会被默认拉伸到最高元素的高度.=>(实际上最高的元素定义了flex元素的高度)
            -
    - justify-content:; 属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start
        - 浏览器支持情况不如意

    - order:;
            - 定义了flex元素的先后顺序
     -->

  /*

        ## 弹性盒子解释
            - CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行

        ## 弹性黑子布局概念
        - 块级布局更侧重于垂直方向、行内布局更侧重于水平方向.弹性盒子布局算法是方向无关的
            - 弹性盒子布局主要适用于应用程序的组件及小规模的布局
            - 而（新兴的）栅格布局则针对大规模的布局

        ## 弹性盒子相关词汇

        ## 定义弹性盒子
            - display:flex;
            - display:inline-flex;

        ## 弹性盒子须知

        ## 弹性盒子相关属性
            - 多栏布局模块的 column-* 属性对弹性项目无效。
            - float 与 clear 对弹性项目无效。使用 float 将使元素的 display 属性计为block。
            - vertical-align 对弹性项目的对齐无效。 (vertical-align=>用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。)

        */

原文地址：https://www.cnblogs.com/gtscool/p/11722115.html