flex布局中的align-content属性

HHppGo

已于 2022-06-23 10:50:32 修改

阅读量2.5k

点赞数 7

分类专栏：移动Web开发文章标签： flex布局 align-content属性

于 2022-06-22 21:41:45 首次发布

本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。

本文链接：https://blog.csdn.net/asacmxjc/article/details/125416659

版权

移动Web开发专栏收录该内容

17 篇文章 1 订阅

订阅专栏

`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>

效果：

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-2_allsobaiduend~default-2-102817242-null-null.142^v20rank_v33,157^v15new_3&utm_term=align-content&spm=1018.2226.3001.4187

HHppGo

关注

7
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
4
评论
flex布局中的align-content属性

align-content属性起作用的条件是：1.对父元素设置自由盒属性：display:flex.......; align-content:可以取的值有 flex-start, flex-end,center,space-around,stretch
复制链接

扫一扫