04-弹性盒子换行

最新推荐文章于 2024-05-11 15:43:26 发布

秋枫 ~

最新推荐文章于 2024-05-11 15:43:26 发布

阅读量574

点赞数

分类专栏： Flex布局文章标签： css

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/127318751

版权

Flex布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用few-warp实现弹性盒子多行排列效果

弹性盒子换行显示：flex-wrap: wrap;
调整对齐方式：align-content
取值与justify-content基本相同

属性值	作用
flex-start	`默认值`，起点开始依次排列
flex-end	终点开始依次排列
`space-around`	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
`space-between`	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子两侧
`space-evenly`	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
`center`	沿主轴依次排列

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            height: 500px;
            border: 1px solid black;
            display: flex;
            /* 弹性盒子换行 */
            flex-wrap: wrap;

            align-content: space-around;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>