day03

弹性布局：

display: flex;

弹性盒子：就是弹性容器的最近一级子元素

特点：

     1.默认宽度由内容所撑开，默认的高度和父元素一样高；
     2.弹性盒子没有块级元素，行内块元素，行内元素之分，统统叫做弹性盒子，弹性盒子可以设置宽高;
     3.弹性盒子默认不会换行，会沿着主轴方向一行显示；
     4.要注意弹性盒子的概念
    

主轴方向的对齐方式，也是给弹性容器添加

    /* jc  flex-start: 从左边开始显示，默认值*/
    justify-content: flex-start;

    /* flex-end：从右边开始显示 */
    justify-content: flex-end;

    /* jcc center：在主轴上居中显示 */
    justify-content: center;

    /* jcsad space-around:将空白空间均分之后，环绕在弹性盒子的两侧---第一个和最后一个弹性盒子与弹性容器之间的距离是弹性盒子与弹性盒子之间的距离的1/2 */
    justify-content: space-around;

    /* jcsb space-between：空白空间会均分，然后存在于弹性盒子与弹性盒子之间，第一个和最后一个弹性盒子与弹性容器没有距离*/
    justify-content: space-between;

    /* space-evenly:弹性盒子和弹性盒子之间的距离等于第一个和最后一个弹性盒子与弹性容器之间的距离 */
    justify-content: space-evenly;

侧轴控制的是垂直方向的对齐方式

    /* 默认值 */
    align-items: flex-start;

    /* flex-end:结束的地方，下面显示 */
    align-items: flex-end;

    /* center：垂直居中 aic */
    align-items: center;

    /* stretch：拉伸(默认值)到弹性盒子与弹性容器高度一样 */
    align-items: stretch;

伸缩比：flex 给弹性盒子添加

1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配

2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度

  /* df 变成弹性容器 */
    display: flex;
    /* jcc 水平居中 */
    justify-content: center;
    /* aic 垂直居中 */
    align-items: center;

改变主轴方向为垂直 fd

     flex-direction: column;

这个值作用：主轴方向变为垂直，侧轴方向变为水平

注意点：现在主轴和侧轴仅仅只是方向调换了而已，主轴依然还是用jc改变对齐方式，侧轴还是用ai改变对齐方式

让弹性盒子换行显示 fwp

    flex-wrap: wrap;

控制多行的侧轴对齐方式

align-content属性出现是有前提条件的：必须要先设置flex-wrap: wrap;

align-content取值和jc一样的

    控制单行的侧轴排列方式
      align-items flex-start flex-end center sh
    */