js：flex弹性布局

目录

代码：

1、flex-direction

2、flex-wrap

3、justify-content

4、align-items

5、align-content

代码：

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    
    

给 item 设置一个宽度 原因是默认宽度太小

1、flex-direction

 .containner{

            background-color: aqua;

            display: flex;

            flex-direction: row;

            height: 40rem;

        }

设置轴线：横轴 不轴内逆转

其他属性：

                                                   /* 1、设置横轴 / 纵轴  如果加 reverse 就是轴内逆转 */
            /* 设置横轴 */
            flex-direction: row;
            /* 设置纵轴 */
            /* flex-direction: column;*/
            /* 设置横轴逆转 */
            /* flex-direction: row-reverse; */
            /* 设置纵轴逆转 */
            /* flex-direction: column-reverse; */

flex-direction: row-reverse; 横轴逆转

2、flex-wrap

换行 / 列 是否轴外逆转

  .containner{
            background-color: aqua;
            display: flex;
            flex-direction: row-reverse;
            height: 40rem;
            flex-wrap: wrap;
        }

换行

其他属性：

  /**2、是否换行 / 列 是否轴外逆转 /

            /* flex-wrap: wrap;  */

            /** 换行 且纵向逆转 */

            /* flex-wrap: wrap-reverse;  */

3、justify-content

第一轴如何排列（假设：设置的轴称为第一轴）

  .containner{
            background-color: aqua;
            display: flex;
            flex-direction: row;
            height: 40rem;
            flex-wrap: wrap;
            justify-content: center;
        }

中心对称排

其他属性：

                                              /* 3. 轴线方向的对称方式 如中心对称 */
            justify-content: center;
            /* 起点对其 */
            /* justify-content: flex-start; */
            /*  终点对齐 */
            /* justify-content: flex-end; */
                                                    /* 轴线方向的排列方式 有间隔 */
            /* 两端中点对齐  两端间隔占 0 中间间隔 1 */
            /* justify-content: space-between; */
            /* 区别两边间隔占 0.5 中间间隔占 1  */
            /* justify-content: space-around; */
            /* 所有间隔相等 */
            /* justify-content: space-evenly; */

4、align-items

第二轴是否拉伸以及如何排列 默认是拉伸   /* align-items: stretch; */

保持间距相等

    .containner{
            background-color: aqua;
            display: flex;
            flex-direction: row;
            height: 40rem;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

其他属性：

                                                         /* 4. 另一方向的对齐方式  默认是拉伸 */
            /* align-items: center; */
            /* 不拉伸 中间对齐 */
            /* align-items: stretch; */
            /* 默认的拉伸 */
            /* align-items: flex-start; */
            /* align-items: flex-end; */

ps: 相当于 justify-content 中间隔方式

 /* justify-content: space-between; */

            /* 区别两边间隔占 0.5 中间间隔占 1  */

            /* justify-content: space-around; */

            /* 所有间隔相等 */

            /* justify-content: space-evenly; */

5、align-content

如何对齐

     .containner{
            background-color: aqua;
            display: flex;
            flex-direction: row;
            height: 40rem;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            align-content: center;
        }

靠中间对称

其他属性：

                                                   /* 5. 多个轴线 出现换行时 */
            /* align-content: center; */
            /* align-content: flex-start; */
            /* 纵向不拉伸 */
        }

ps：相当于 justify-content 中对齐方式

 justify-content: center;

            /* 起点对其 */

            /* justify-content: flex-start; */

            /*  终点对齐 */

            /* justify-content: flex-end; */