day17-弹性盒布局

<!--

    一:弹性盒的概念

    1.容器:设置了弹性盒属性的父级盒子

    2.项目:在容器里面的子级元素

    3.作用:控制项目在容器里面的排列位置

    二:弹性盒的设置

    1.属性:display(显示)

    2.属性值:flex(弹性的)

    3.弹性盒的基本特点

        - 元素设置了弹性盒属性,就会有主轴和侧轴的概念

        - 弹性盒中默认的主轴方向是X轴,所有的项目都会沿着主轴排列(主侧轴是对应关系)

        - 弹性盒中不考虑元素类型,所有的标签都可以直接添加宽高大小

        - 居中方式:给子级元素设置 margin:auto 即可

    三:关于弹性盒使用的注意点

    1.盒模型、定位、浮动、位移这些属性能用吗? 暂时把浮动属性忘记

    2.是否会脱离文档流呢? 不会

    3.在弹性盒不需要清除浮动也不会出现高度塌陷的bug

 -->

    添加在容器上的属性

    一:改变主轴的排列方向:默认的主轴是X轴

    1.属性:flex-direction

    2.属性值

        - row 行、默认主轴是X轴,侧轴是Y轴

        - column 列、默认主轴是Y轴,侧轴是X轴

    二:设置主轴上的排列方式

    1.属性:justify-content

    2.属性值

        - fl