当前位置: 首页> 房产> 家装 > js:flex弹性布局

js:flex弹性布局

时间:2025/7/11 8:38:30来源:https://blog.csdn.net/LanJieZhiFu/article/details/139351388 浏览次数:0次

目录

代码:

1、 flex-direction

2、flex-wrap

3、justify-content

4、align-items

5、align-content


代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex弹性布局测试</title><style>.containner{background-color: aqua;display: flex;flex-direction: row;height: 40rem;}.item{width: 40rem;font-size: 4rem;}</style>
</head>
<body><div class="containner"><div class="item" style="background-color: red;">1</div><div class="item" style="background-color: yellow;">2</div><div class="item" style="background-color: green;">3</div><div class="item" style="background-color: indigo;">4</div><div class="item" style="background-color: blue;">5</div><div class="item" style="background-color: salmon;">6</div></div></body>
</html>

给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; */

关键字:js:flex弹性布局

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: