flex 弹性布局

flex 弹性布局:

        可以让盒子并排显示，

        也可以让行内元素转换为行内块元素。

        使用：在父盒子上添加属性  display:flex

        flex 布局， 使用时要注意 主轴和侧轴的设置，一般情况 默认的主轴为X轴的方向，侧轴为y轴方向。

   flex容器 （flex container）

    所有子元素自动成为 flex项目（flex item）  简称项目

    子元素可横向排列 也可纵向排列

    原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

    通常使用在移动端

    pc端会有兼容性的问题，不同浏览器 不同版本会有不同程度兼容性问题

  父元素的属性：

    1.flex-direction  ： 设置主轴方向，默认主轴方向为x轴方向，也可设置y轴为主轴。

    row（X轴）(默认的值)        row-reverse（X轴倒序排列）       column （Y轴）                     column-reverse（Y轴倒序排列）

    2.justify-content :    设置主轴上子元素的排列方式 , 使用前先确定好主轴方向。

    flex-start  （从左上角排列）      flex-end（从后面排列）       center （中心排列）                       space-around （左右相同的边距排列）      space-between（两边顶边排列）（常用）

    3.flex-wrap ：    设置子元素是否换行， 布局中默认不换行。

    nowrap（不换行）         wrap（换行）

    4.align-items ：     设置侧轴上的子元素排列方式（单行）。

    flex-start           flex-end            center              stretch（伸展，填充父元素盒子的高度，宽度不变）（使用时 子项目不设置高度，使用较少）

    5.align-content ：   设置侧轴上的子元素排列方式（多行），有换行时使用。

    flex-start                flex-end               center                space-around                 space-between        stretch

    6.flex-flow：        复合属性，相当于同时设置了 flex-direction 和 flex-wrap。

    子元素的属性

        flex：        子项目占的份数，定义子项目分配剩余空间，用flex来表示占多少份。

        flex ：       拥有3个值。

        子项目所在剩余空间中 占的份数。

        align-self  ：        控制子项目在侧轴的排列方式。

        flex-start                flex-end             center              stretch

        order:      定义子项目的排列顺序（前后顺序），默认为0，数值越小 排列越靠前。