js：flex弹性布局

张春  论坛元老 | 2024-6-22 12:54:36 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1019|帖子 1019|积分 3057

目次
代码：
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{
  3.             background-color: aqua;
  5.             display: flex;
  7.             flex-direction: row;
  9.             height: 40rem;
  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、是否换行/列 是否轴外逆转/
  3.             /* flex-wrap: wrap;  */
  5.             /**换行 且纵向逆转*/
  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; */
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张春

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表