弹性布局

弹性布局: 弹性布局是不同于流式布局的另一种布局方式
流式布局,元素从左向右，从上向下排列，如果要自定义标签位置，一般用position float display 但是流式布局中一些复杂的布局实现比较麻烦标签的水平和垂直居中2009年国际标准组织W3C提出了弹性布局 flex 的概念，实现很多复杂的布局

  <main>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </main>
    <style>
    main{
        width: 400px;
        height: 400px;
        border: solid 10px red;
        margin: auto;
        /*弹性布局一定要给父标签设置之后 main标签就会成为弹性布局的
        容器，这个容器中的子标签按照弹性布局排列，而main标签本身不发生
        改变*/
        display: flex;
        /* 特点: 一个弹性布局容器一般有两个轴，水平轴也叫主轴，垂直轴也叫
        交叉轴 标签的排列方向轴，可以改变主轴方向*/
        /* 设置组织方向 子标签的排列方向*/
        /* row 表示行 主轴水平，从左向右 */
        flex-direction: row;
        /* 反向行 主轴水平 从右向左 */
        flex-direction: row-reverse;
        /* column 表示列 主轴垂直，从上向下 */
        flex-direction: column;
          /* column 表示列 主轴垂直，从下向上 */
        flex-direction: column-reverse;

        /* 弹性布局中的换行 */
        /* nowrap 默认不换行  所有子标签排列成一行 空间不够子标签会被压缩
         当子标签中没有空白空间，可能会溢出弹性容器*/
        flex-wrap: nowrap;
        /* wrap 自动换行: 保持子标签的宽度不变，如果放不下自动换下一行
        子标签如果不设置高度，默认高度 1 / 行数  子标签设置高度
        会按设置高度为准，高度不会被压缩可能溢出*/
        flex-wrap: nowrap;
        /* wrap-reverse 反向换行，第一行在最下，最后一行在上 */
        flex-wrap: wrap-reverse;
        /* 3. 垂直排列方式  在交叉轴方向上居中 高度不会被拉伸*/
        align-items: center;
        /* stretch 默认值，伸展，默认标签高度等于这一行高度 */
        align-items: stretch;
        /* 交叉轴开始位置 */
        align-items: flex-start;
        /* 交叉轴结束位置 */
        align-items: flex-end;
         /* baseline 第一行文字基线对齐 */
         align-items: baseline;

         /*主轴方向的排列方式*/
         /* flex-start 起始点 主轴方向左对齐*/
         justify-content: flex-start;
        /* flex-start  靠向主轴结束点方向*/
         justify-content: flex-end;
         /* 在主轴方向居中 */
         justify-content: center;
         /* space-between 把所有的空白空间平分在每两个标签之间 */
         justify-content: space-between;
         /* space-around  把所有空白空间平分放在每个标签两侧 */
          justify-content: space-around;

          /* 多个交叉轴的排列，弹性布局在换行的前提下会有多个主轴和交叉轴
          这个样式只针对多行起效 */
          /* stretch 默认值延伸 多行分割总高度 */
          /* 靠向交叉轴的开始方向  (默认靠上)*/
          align-content:flex-start;
          /* 靠向交叉轴的结束方向 (默认靠下)*/
          align-content: flex-end;
          /* 多行在交叉轴方向居中 */
          align-content: center;
          /* 把所有的空白空间平分放在每两行之间 */
          align-content: space-around;
          /* 把所有的空白空间平分放在每一行上下两侧 */
          align-content: space-between;

          /*注意:
          1. 弹性布局要对父标签设置，对子标签起效
          2. 弹性布局中依然能用postion定位来调节标签位置
          3. 弹性布局中不能使用float 浮动定位 
          4. 弹性布局中不在区分块标签行标签，所有都一样
          5.弹性布局只针对第一级子标签起效，子标签的子标签无效(不能继承)
          */

          /* 让弹性布局中的标签水平垂直居中 */
          justify-content: center;
          align-items: center;

    }
    div{
        border: 1px solid black;
        width: 100px;
    }
    </style>

弹性布局中的项目
body>
弹性布局中，给父标签设置弹性布局，父标签叫弹性容器 flex contener,
容器中的子标签叫弹性项目 flex item
弹性布局主要对父标签设置，弹性项目布局都是相同的

 <main>
    <div>112</div>
    <div>55</div>
    <div>44</div>
    <div>78</div>
</main>
 main{
    width: 80%;
    height: 400px;
    border: 1px solid rebeccapurple;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
div{
    border: solid 1px blue;
    /*一下几个属性可以单独修改弹性布局中的项目*/
    /* 1. order 可以重新对弹性项目排序，默认0 
    如果order值相同，则按照默认循序排列
    把某个项目的order 增大会往后排，项目是按照order从小到大排列
    */
    order:0;
    /* 当所有项目占不完主轴空间，回留有空白区域时，各个项目瓜分空白区域
    的比列 0 表示不瓜分空白 1 表示: 1:1瓜分  默认是0*/
    flex-grow:1;
    /* flex-shrink 当主轴空间放不下所有项目时，项目的宽度会被压缩
    这个样式每个项目被压缩的比列 0表示不压缩  默认值是1*/
    flex-shrink: 1;
    /* 在项目瓜分空白或被压缩之前的宽度替代width */
    flex-basis: 150px;
    /* align-self作用和align-items类似，都是设置项目在交叉
    轴方向上的对齐方式，区别是align-items是对父标签
    设置，作用的是所有子标签项目，而align-self是对子标签设置
    作用这个项目自身 */
    align-self:center;

    
}