【无标题】弹性盒子复习

<!--

   1.什么是弹性盒？

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

    主要提供一种更加有效的方式：对子元素进行排列、对齐，以及空白空间的分配

   

   2. 设置弹性盒：

    display:flex;

    display:inline-flex;

    3.基本概念：

    弹性容器：父盒子  

    项目：弹性子元素   子元素

    主轴：默认主轴为x轴，水平方向向右，起点在左端

    侧轴： y轴，垂直方向，方向向下，起点在上端

    主轴不一定是x，还可以是y

    弹性盒默认只有一行

 

    4.设置主轴方向

    flex-direction:row;  水平  起点在左端

    flex-direction:row-reverse;  水平  起点在右端

    flex-direction:column;  垂直  起点在顶端

    flex-direction:column-reverse;  垂直  起点在末端

 

    5.设置弹性子元素在主轴上的对齐方式

    justify-content:flex-start;   顶端(左端)对齐

    justify-content:flex-end;  末端(右端)对齐

    justify-content:center;   居中对齐

    justify-content:space-between;  两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等；

    justify-content:space-around;  四周对齐，子元素和弹性容器两端有空白空间，项目之间也有空白空间，但是项目之间的空白空间是子元素和弹性容器两端的空白空间2倍

    justify-content:space-evenly;  平均对齐  子元素和弹性容器两端有空白空间，项目之间也有空白空间，且 空白空间都相等

 

    6.设置弹性子元素在侧轴上的对齐方式

    align-items:stretch;  默认值 如果弹性子元素没有高度或高度为auto，将占满整个容器的高度

    align-items:flex-start;  顶端对齐

    align-items:flex-end;  末端对齐

    align-items:center;  居中对齐

    align-items:baseline;  基线对齐

 

   -->