移动web第四天侧轴对齐方式属性：align-items: （设置元素上下的位置给父元素）属性值： 1.flex

侧轴对齐方式

属性：align-items: （设置元素上下的位置给父元素）

属性值：

1.flex-star 上对齐

2.flex-end 下对齐

3.center 垂直居中

居中center 不用加flex

.box {
        margin: 100px auto;
        width: 600px;
        height: 600px;
        background: orange; 

        /* 两个都是给父元素添加 */
        display: flex;

        /*撤轴对齐（设置元素 上下的位置） align-items: 
        1.flex-start 上对齐
        2.flex-end 下对齐
        3 center 垂直居中 
        */
        align-items: center;
      }

侧轴对齐方式当多行时

属性：align-content

属性值：flex-(start/end)

space-（between/around/evenly）

center

居中center 不用加flex

 div {
            margin: 100px auto;
            width: 600px;
            height: 600px;
            background-color: pink;

            /* 设置flex盒子 */
            display: flex;
            flex-wrap:wrap;

            /* 设置侧轴对齐方式-多行时 
                align-content:
     	
               1. flex-（start/end）
     		   2.space-（between/around/evenly）
  			   3.center*/
            align-content: end;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: red;
        }

注意点：

**当侧轴单行必须用单行的对齐属性，多行时用多行的对齐属性；不然会导致效果怪异 **

修改主轴方向

属性 flex-direction

属性值： 1 row 默认值水平方向对齐顺序是左到右少用

2 row-reverse 对齐顺序是从右到左

3 column 对齐顺序是修改成上到下

4 column-reverse 对齐顺序是从下到上

.box {
        margin: 100px auto;
        width: 600px;
        height: 600px;
        background: orange; 
        display: flex;


        /* 修改主轴的方向 属性 flex-direction
        属性值： 1 row 默认值 水平方向 对齐 顺序是 左到右 少用
                2 row-reverse 对齐 顺序是 从右到左 
                3 column 对齐 顺序是 修改成上到下 
                4 column-reverse 对齐 顺序是 从下到上 */

        /* 修改主轴方向 */
        flex-direction: column;

        /* 主轴改为上到下，对齐方式 */
        justify-content: space-around ;
        
      }

子项中的flex属性

flex 设置子元素宽自动填满父元素，这样再加元素也能平均分父元素的宽

属性值 1 默认占一份宽所以我设置第二个盒子占两份宽如下

align-self设置子项本身在侧轴的对齐方式

属性值： flex-satrt/end/center

.box span {
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: pink;
        border: 1px solid #fff;

        /* 设置子元素宽自动填满父元素，这样再加元素也能平均分父元素的宽  
        属性值 1 默认占一份宽 所以我设置第二个盒子占两份宽如下*/
        flex: 1;

        /* 设置子项本身在侧轴的对齐方式 */
        align-self: flex-end;

      }

知识拓展

span:nth-child(2) {
          flex: 2;
          /* 如果想让第二个SPAN文字居中对齐
          不用管宽高 直接把SPAN当成父盒子 设置如下 */
          display: flex;
          justify-content: center;
          align-items: center;
      }

注意点：当修改主轴方向，属性的内容会调换

当主轴改为 column,主轴是Y轴

主轴jc属性就应用在了Y轴

副轴是X轴，副轴ai/ac属性应用在X轴

1.子项默认高度被内容撑开宽度等于父项

2.flex：1 变成设置子项的高度

3.align-seft 变成设置子项在侧轴上的对齐（这个时候侧轴是水平轴）

案例思路

flex：1 和换行不能一起用有换行优先使用换行

明白flex默认情况，子元素不会换行内容撑爹撑思路必须由大体,到细致.从结构到样式最后插图

灵活运用转换主轴，在不同需求上

思路总结：

也就是关于flex的应用配合HTML结构，我认为这至关重要。需要FLEX的元素需要加给父盒子DF，所以关键在于DIV的嵌套关系。有些是需要Y轴主轴，然后里面有小盒子需要X轴的flex

移动web第四天