弹性盒知识点

一、弹性盒的概念

弹性盒是css3新增的一种布局模式

    引入弹性盒布局模型的目的：是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配。

    设置弹性盒：给父元素设置

    display:flex;  设置为块级弹性盒  独立成行

    display:inline-flex;  设置行内快弹性盒

    注意：弹性盒默认只有一行，弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

    父元素设置弹性盒之后，里面的弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

    将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

    1.弹性容器：父盒子

    2.弹性子元素(项目)：子元素

    3.主轴(x轴)：默认主轴为水平方向x，起点在左端，终点在右端，水平向右

    4.侧轴(交叉轴  y轴)：默认侧轴为垂直方向y，起点在上端，终点在下端，水平向下

注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外 一边就是侧轴

二、设置主轴方向：

   flex-direction: row;  默认值 主轴方向为水平，起点在左端

   flex-direction: row-reverse;  主轴方向为水平，起点在右端

   flex-direction: column;  默认值 主轴方向为垂直，起点在顶端

  flex-direction: column-reverse;  主轴方向为垂直，起点在下端

三、justify-content (主轴方向上的对齐方式）

1.默认值，主轴顶端(左端)对齐

      justify-content: flex-start;

      2. 末端(右端)对齐

      justify-content: flex-end;

      3. 居中对齐

      justify-content: center;

      4. 两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。

      justify-content: space-between;

      5. 四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。

      justify-content: space-around;

      6. 平均对齐 弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等*/

      justify-content: space-evenly;

四、align-items(侧轴方向上的对齐方式)

     1.默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度

     align-items: stretch;

     2.子元素在侧轴顶端对齐

     align-items: flex-start;

    3.子元素在侧轴末端对齐

    align-items: flex-end;

    4.子元素在侧轴中间对齐

    align-items: center;

    5.子元素在第一行文字的基线对齐

align-items: baseline;

五、弹性盒实现水平居中对齐

1.设置弹性盒

      display: flex;

    2.主轴对齐方式  居中

      justify-content: center;

    3.侧轴对齐方式  居中

      align-items: center;