用flex实现筛子的三点布局

最新推荐文章于 2024-03-08 15:53:14 发布

原创最新推荐文章于 2024-03-08 15:53:14 发布 · 565 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用CSS flexbox实现特定布局的例子。通过定义一个包含三个圆形元素的盒子，并利用flex属性来调整这些元素的位置，展示了如何使元素在水平方向上均匀分布、居中对齐及底部对齐。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border: 2px solid #ccc;
            border-radius: 10px;
        }

        .item {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }

        .item:nth-child(2) {
            align-self: center;
        }

        .item:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
       
       <div class="box">
	      <div class="item"></div>
	       <div class="item"></div>
	       <div class="item"></div>
       <div>
</body>
</html>

https://blog.youkuaiyun.com/weixin_43837268/article/details/90812483