js:flex弹性布局

目录

代码:

[1、 flex-direction](#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; */

相关推荐
Json_1817901448016 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟18 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光22 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用22 分钟前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网39 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
Dola_Pan39 分钟前
C语言:数组转换指针的时机
c语言·开发语言·算法
ExiFengs39 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj12345678941 分钟前
JDK1.8新增特性
java·开发语言
木子020442 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing44 分钟前
React核心功能详解(一)
前端·react.js·前端框架