小言_互联网的博客

flex布局中的align-content属性

2022-06-27 07:43 361人阅读  评论(0)

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


转载：https://blog.csdn.net/asacmxjc/article/details/125416659
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场