• flex布局中的align-content属性

    align-content属性起作用的条件:

    • 对父元素设置自由盒属性display:flex;
    • 并且设置排列方式为横向排列flex-direction:row; （默认值）
    • 设置换行，flex-wrap:wrap;

    Demo代码：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content属性</title>
    <style>
        .box {
            width: 200px;
            display: flex;

            /* 
            flex-direction: row;
            flex-wrap: wrap; 
            */
            flex-flow: row wrap;

            /* 
          默认值为:stretch 
          align-content:可以取的值有 flex-start,
          flex-end,center,space-around,space-between,stretch
          */
            align-content: stretch;


            height: 300px;
            background-color: grey;
        }

        .box1 {
            height: 30px;
            width: 100px;
            background-color: orange;
        }

        .box2 {
            height: 50px;
            width: 200px;
            background-color: red;
        }

        .box3 {
            height: 30px;
            width: 100px;
            background-color: #08a9b5;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    效果：

    align-content: stretch;

    在这里插入图片描述

    align-content: flex-start;

    在这里插入图片描述

    align-content: flex-end;

    在这里插入图片描述

    align-content: center;

    在这里插入图片描述

    align-content: space-around;

    在这里插入图片描述

    align-content:space-between;

    在这里插入图片描述

    参考文章：https://blog.csdn.net/qq_40323256/article/details/102817242?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165589587016782395328090%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=165589587016782395328090&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-102817242-null-null.142v20rank_v33,157v15new_3&utm_term=align-content&spm=1018.2226.3001.4187

  • 相关阅读:
    【MDP】①二次规划问题MATLAB求解器quadprog
    让开发回归简单模式-基类封装
    VMware虚拟机如何设置网络
    JAVA 对象整体去重+按照对象内某个属性去重
    科技类PPT制作总结
    MySQL---聚合函数
    解决uniapp修改内置组件样式，在微信中不生效问题
    java毕业设计软件工程专业教辅平台课程子系统（附源码、数据库）
    JavaWeb初学
    原子操作工具类
  • 原文地址：https://blog.csdn.net/asacmxjc/article/details/125416659