折行和行间距

叶不休

于 2024-04-27 20:19:00 发布

阅读量378

点赞数 14

分类专栏：前端文章标签： css 前端 vue.js html5 css3 chrome 前端框架

本文链接：https://blog.csdn.net/weixin_58694594/article/details/138256486

版权

前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

本文介绍了CSSFlexbox布局中的align-content属性及其五种可能值（flex-start,flex-end,center,space-around,space-between），展示了如何控制折行后元素在行间的分布。

摘要由CSDN通过智能技术生成

控制折行后行间距

1.默认align-content: flex-start;

2. align-content: flex-end;

3. align-content: center;

居中

4.align-content: space-around;

等距离环绕

5.align-content: space-between;

贴着上下两边

<!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>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
            /* 折行 */

            /* flex-direction: column; */

            align-content: space-around;
            /* 控制折行后行间距 */

            /* 
            1.默认flex-start
            2.flex-end
            3.center
            4.space-between;
            5.space-around */
        }
        .box div{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>11111</div>
        <div>22222</div>
        <div>33333</div>
        <div>44444</div>
        <div>55555</div>
        <div>66666</div>
        <div>77777</div>
        <div>88888</div>
        <div>99999</div>
        <div>aaaaa</div>
        <div>bbbbb</div>
    </div>
</body>
</html>