Flex布局实现三点色子

最新推荐文章于 2023-02-15 16:51:43 发布

爱划水de鲸鱼哥～

最新推荐文章于 2023-02-15 16:51:43 发布

阅读量636

点赞数

分类专栏： CSS专栏文章标签： flex css html

本文链接：https://blog.csdn.net/m0_47901007/article/details/119032944

版权

CSS专栏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Flex布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

Flex基础知识

flex-direction属性：决定主轴的方向

flex-wrap属性：决定是否换行

justify-content属性：项目在主轴上的对齐方式

align-items属性：项目在交叉轴上如何对齐

align-content属性：多根轴线的对齐方式

align-self属性：单个项目有与其他项目不一样的对齐方式

实现三点色子

在这里插入图片描述

<!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>Flex布局实现三点色子</title>
    <style>
        div{
            /* 使用Flex布局 */
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            /* 垂直排列 */
            flex-direction:column;
            width: 150px;
            height: 150px;
            border-radius: 10px;
            background-color: #ccc;
            
        }
        .item{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #000;
        }
        .item:nth-child(2){
            /* 第二项居中对齐 */
            align-self: center;
        }
        .item:nth-child(3){
             /* 第三项结尾对齐 */
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

爱划水de鲸鱼哥～

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flex布局实现三点色子

Flex布局原理通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。Flex基础知识flex-direction属性：决定主轴的方向row（默认值）：主轴为水平方向，起点在左端;row-reverse：主轴为水平方向，起点在右端;column：主轴为垂直方向，起点在上沿;column-reverse：主轴为垂直方向，起点在下沿;flex-wrap属性：决定是否换行nowrap（默认）：不换行；wrap：换行，第一行在上；wrap-reverse：换行，第一行在下方；j
复制链接

扫一扫