移动web-day04-延续Flex布局

今日重点: Flex布局

1. 使用 flex-direction 改变元素排列方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

属性值 作用
row 行, 水平(默认值)
column * 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上

改变主轴方向为垂直方向 fd
        flex-direction: column;
          把主轴方向变成了垂直方向，还是用jc控制主轴方向的对齐方式
          把侧轴方向变成了水平方向，还是用ai控制侧轴方向的对齐方式
        
          注意：主轴和侧轴仅仅只是调换了方向而已 

2. 弹性盒子换行
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
➢ 取值与justify-content基本相同

      .box {
        /* 添加弹性盒子 */
        display: flex;
        /*  弹性盒子换行 flex-wrap: wrap;
        其高度被默认拉伸,然后高度被均分  */
        flex-wrap: wrap;

        /* align-content: ; 取值和jc是一样的
          针对多行弹性盒子的侧轴设置的
          出现的前提是 必须先换行,  flex-wrap:wrap;

          align-items 针对于单行弹性盒子的侧轴对齐方式  */
          
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-around; */
        /* align-content: space-between; */

        /* 需要手动输入.没有提示 */
        /* align-content: space-evenly; */
        
        width: 1000px;
        height: 600px;
        background: orange;
      }

--------------今日分享主要是做一个flex布局的小案例,然后不断的去精炼内容
然后了解一些拓展的小知识
望明天更好,加油!