当前位置：网站首页>flex布局中的align-content属性

flex布局中的align-content属性

2022-06-28 12:55:00 【HHppGo】

`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]所创，转载请带上原文链接，感谢
https://blog.csdn.net/asacmxjc/article/details/125416659