使用HTML+CSS的适配属性完成布局效果

CSS Flex布局实践

最新推荐文章于 2022-10-18 16:42:02 发布

原创最新推荐文章于 2022-10-18 16:42:02 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

本文介绍了一个使用CSS Flex布局实现特定效果的例子。通过设置容器的显示方式为flex，并调整justify-content属性，使得多个相同大小的子元素能够在容器内按特定顺序排列。此示例中，子元素未使用反转排列，展示了如何通过简单的CSS样式达到预期布局。

效果图

<!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: 600px;
            height: 800px;
            background-color: aqua;
            display: flex;
            /* flex-direction:row-reverse; */
            justify-content:flex-end;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box1">1</div>
        <div class="box1">2</div>
        <div class="box1">3</div>
        <div class="box1">4</div>
        <div class="box1">5</div>
        <div class="box1">6</div>
    </div>
</body>
</html>