• js：flex弹性布局

    目录

    代码：

    1、 flex-direction

    2、flex-wrap

    3、justify-content

    4、align-items

    5、align-content

    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>flex弹性布局测试</title>
    7.     <style>
    8.         .containner{
    9.             background-color: aqua;
    10.             display: flex;
    11.             flex-direction: row;
    12.             height: 40rem;
    13.         }
    14.         .item{
    15.             width: 40rem;
    16.             font-size: 4rem;
    17.         }
    18.     </style>
    19. </head>
    20. <body>
    21.     <div class="containner">
    22.         <div class="item" style="background-color: red;">1</div>
    23.         <div class="item" style="background-color: yellow;">2</div>
    24.         <div class="item" style="background-color: green;">3</div>
    25.         <div class="item" style="background-color: indigo;">4</div>
    26.         <div class="item" style="background-color: blue;">5</div>
    27.         <div class="item" style="background-color: salmon;">6</div>
    28.     </div>
    29.     
    30. </body>
    31. </html>

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

    1、 flex-direction

    1.  .containner{
    2.  
    3.             background-color: aqua;
    4.  
    5.             display: flex;
    6.  
    7.             flex-direction: row;
    8.  
    9.             height: 40rem;
    10.  
    11.         }

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

    其他属性：

    1.                                                    /* 1、设置横轴/纵轴  如果加reverse 就是轴内逆转*/
    2.             /*设置横轴*/
    3.             flex-direction: row;
    4.             /* 设置纵轴*/
    5.             /* flex-direction: column;*/
    6.             /* 设置横轴逆转 */
    7.             /* flex-direction: row-reverse; */
    8.             /* 设置纵轴逆转 */
    9.             /* flex-direction: column-reverse; */

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

    2、flex-wrap

    换行/列 是否轴外逆转

    1.   .containner{
    2.             background-color: aqua;
    3.             display: flex;
    4.             flex-direction: row-reverse;
    5.             height: 40rem;
    6.             flex-wrap: wrap;
    7.         }

    换行

    其他属性：

    1.   /**2、是否换行/列 是否轴外逆转/
    2.  
    3.             /* flex-wrap: wrap;  */
    4.  
    5.             /**换行 且纵向逆转*/
    6.  
    7.             /* flex-wrap: wrap-reverse;  */

    3、justify-content

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

    1.   .containner{
    2.             background-color: aqua;
    3.             display: flex;
    4.             flex-direction: row;
    5.             height: 40rem;
    6.             flex-wrap: wrap;
    7.             justify-content: center;
    8.         }

    中心对称排

    其他属性：

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

    4、align-items

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

    保持间距相等

    1.     .containner{
    2.             background-color: aqua;
    3.             display: flex;
    4.             flex-direction: row;
    5.             height: 40rem;
    6.             flex-wrap: wrap;
    7.             justify-content: center;
    8.             align-items: center;
    9.         }

    其他属性：

    1.                                                          /* 4. 另一方向的对齐方式  默认是拉伸*/
    2.             /* align-items: center; */
    3.             /* 不拉伸 中间对齐 */
    4.             /* align-items: stretch; */
    5.             /* 默认的拉伸 */
    6.             /* align-items: flex-start; */
    7.             /* 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

    如何对齐

    1.      .containner{
    2.             background-color: aqua;
    3.             display: flex;
    4.             flex-direction: row;
    5.             height: 40rem;
    6.             flex-wrap: wrap;
    7.             justify-content: center;
    8.             align-items: center;
    9.             align-content: center;
    10.         }

    靠中间对称

    其他属性：

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

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

     justify-content: center;

                /* 起点对其 */

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

                /*  终点对齐*/

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

  • 相关阅读:
    9月25日学习记录
    阿里巴巴资深架构师深度解析微服务架构设计之SpringCloud+Dubbo
    thinkphp5 注入 反序列化写文件 phar反序列化
    虚拟环境创建、配置及激活
    pytorch打印模型信息——torchinfo
    Qt 项目实战 | 音乐播放器
    【微机原理笔记】第 6 章 - 输入输出和中断技术
    一个计算行列坐标的应用
    智能可观测性如何赋能智能汽车主机厂
    【视频图像篇】FastStone Capture屏幕直尺功能设置
  • 原文地址：https://blog.csdn.net/LanJieZhiFu/article/details/139351388