flex布局设置最后一行居左对齐

最新推荐文章于 2024-09-29 17:01:34 发布

笑问客从何处来

最新推荐文章于 2024-09-29 17:01:34 发布

阅读量1.4k

点赞数

分类专栏： web前端文章标签： css html html5 flex

本文链接：https://blog.csdn.net/Y_one/article/details/105117768

版权

web前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文介绍了如何利用CSS的flex布局特性，通过调整margin属性，实现元素容器中最后一行元素居左对齐的效果。通过示例代码和实际效果图，详细展示了具体实现步骤。

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

用margin属性隔开，话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 1000px;
            border: 1px solid #CCCCCC;
            margin:  0 auto;
        }
        .box-list{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: wrap;
        }
        ul.box-list>li{
            width: 200px;
            height: 250px;
            border: 1px solid red;
            border-radius: 10px;
            list-style: none;
            margin-left: 39px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="box-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>
</body>
</html>