骰子的flex布局

最新推荐文章于 2024-07-29 15:37:55 发布
最新推荐文章于 2024-07-29 15:37:55 发布
阅读量141 收藏 2
点赞数
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44718039/article/details/125417652
版权

一、一个项目

①左上角

/样式
<style>
        /* * {
            margin: 0;
            padding: 0;
        } */

        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
    </style>

///结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

 ②第一行的中间

<style>
        /* * {
            margin: 0;
            padding: 0;
        } */

        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;

            /* 将项目放在容器水平主轴的中间 */
            justify-content: center;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
    </style>


/结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

 ③当前项目在第一行的尾部

 <style>
    
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;

            /* 将项目放在容器水平主轴的尾部 */
            justify-content: flex-end;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
 </style>

结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

 ④当前项目放在第二行的第一个

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;

            /* 将项目放在容器垂直主轴的中间 */
            align-items: center;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
</style>

/结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

 ⑥正中间（垂直水平居中）

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将项目放在容器正中间*/
            justify-content: center;
            align-items: center;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
</style>

//结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

 ⑥第二行的最后

 <style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将项目放在容器中间一行的最后一个*/
            justify-content: flex-end;
            align-items: center;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
  </style>

//结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

⑦第三行的第一个位置

 

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将项目放在容器第三行的第一个*/
            align-items: flex-end;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
</style>

//结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

 ⑧当前项目放在第三行的第二个

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将项目放在容器第三行的第二个*/
            justify-content: center;
            align-items: flex-end;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
</style>

结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

效果展示：

⑨第三行的最后一个

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将项目放在容器第三行的最后一个*/
            justify-content: flex-end;
            align-items: flex-end;
        }

        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
 </style>

/结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item"></div>
    </div>
</body>

 效果展示：

 二、两个项目

①第一行的左右两边各一个

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将两个项目放在第一行的左右两边*/
            justify-content: space-between;
        }

        .item1,
        .item2 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
 </style>

/结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
</body>

效果展示：

② 放在第二列的首尾

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将两个项目放在第二列的上下各一个*/
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
        .item1,
        .item2 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
  </style>

//结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
</body>

效果展示：

③放在第三列的首尾两个位置

<style>
        .container {
            width: 100px;
            height: 130px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /* 将两个项目放在第三列的上下各一个*/
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
        }

        .item1,
        .item2 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }
 </style>

///结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
</body>

 效果展示：

④ 预期效果展示：

 实现（align-self）

<style>
        .container {
            width: 100px;
            height: 100px;
            background-color: white;
            border: 1px solid black;
            display: flex;
        }

        .item1,
        .item2 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: black;
        }

        /* 为第二个项目单独设置交叉轴的排列方式 */
        .item2 {
            align-self: center;
        }
 </style>

/结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
</body>

效果展示：

⑤ 预期效果

实现

<style>
        .container {
            width: 100px;
            height: 100px;
            background-color: white;
            border: 1px solid black;
            display: flex;

            /*   变动1   */
            justify-content: space-between;
        }

        .item1,
        .item2 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: black;
        }

        /*   变动2   */
        .item2 {
            align-self: flex-end;
        }
 </style>

/结构
<body>
    <!-- 一个点在左上角 -->
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
</body>

 效果展示：

 三、三项目

①主对角线上三个

 .container {
            width: 100px;
            height: 100px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /*   变动1   */
            justify-content: space-around;
        }

        .item1,
        .item2,
        .item3 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: black;
        }

        /*   变动2   */
        .item2 {
            align-self: center;
        }

        /*   变动3  */
        .item3 {
            align-self: flex-end;
        }
 </style>

/结构
<body>
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>

效果展示：

四、四项目

①预期效果展示

 实现：

<style>
        .container {
            width: 90px;
            height: 90px;
            background-color: white;
            border: 1px solid black;
            display: flex;
            /*   变动1   */
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: space-between;
        }

        .item1,
        .item2,
        .item3,
        .item4 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: black;
        }

        /* 变动2 */
        .item4 {
            align-self: flex-end;
        }
    </style>

/结构
<body>
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
    </div>
</body>

效果展示：

 ②预期效果展示

 实现：

<style>
        /* 首先两个box交叉轴方向放置,且两个box中间有间距 */
        .container {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: flex;
            /* 交叉轴放置 */
            flex-direction: column;
            /* 中间有间距 */
            align-content: space-around;
        }

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

        /* 给每个box设置弹性布局 */
        .box1,
        .box2 {
            display: flex;
            width: 100px;
            height: 45px;
            justify-content: space-around;
        }
    </style>

/结构
<body>
    <div class="container">
        <div class="box1">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box2">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

效果展示：

五、六项目 

①第一行和第三行各三个

<style>
        /* 首先两个box交叉轴方向放置,且两个box中间有间距 */
        .container {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            display: flex;
            /* 交叉轴放置 */
            flex-direction: column;
            /* 中间有间距 */
            align-content: space-around;
        }

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

        /* 给每个box设置弹性布局 */
        .box1,
        .box2 {
            display: flex;
            width: 150px;
            height: 75px;
            justify-content: space-around;
            align-items: center;
        }
    </style>

///结构
<body>
    <div class="container">
        <div class="box1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box2">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

效果展示：

②第一列和第三列各三个

<style>
        /* 首先两个box交叉轴方向放置,且两个box中间有间距 */
        .container {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            display: flex;
            /* 中间有间距 */
            align-content: space-around;
        }

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

        /* 给每个box设置弹性布局 */
        .box1,
        .box2 {
            display: flex;
            width: 75px;
            height: 150px;
            flex-direction: column;
            justify-content: space-around;

        }
        .item {
            align-self: center;
        }
    </style>

///结构
<body>
    <div class="container">
        <div class="box1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box2">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

 效果展示：

 ③麻将的五饼

<style>
        /* 首先两个box交叉轴方向放置,且两个box中间有间距 */
        .container {
            width: 180px;
            height: 180px;
            border: 1px solid black;
            display: flex;
            flex-direction: column;
            align-content: space-around;
        }

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

        /* 给每个box设置弹性布局 */
        .box1,
        .box2,
        .box3 {
            display: flex;
            width: 180px;
            height: 60px;
            justify-content: space-around;
        }

        .item {
            align-self: center;
        }
    </style>

/结构
<body>
    <div class="container">
        <div class="box1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box2">
            <div class="item"></div>
        </div>
        <div class="box3">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

效果展示：

六、九项目 

九饼

<style>
        /* 首先两个box交叉轴方向放置,且两个box中间有间距 */
        .container {
            width: 180px;
            height: 180px;
            border: 1px solid black;
            display: flex;
            flex-direction: column;
            align-content: space-around;
        }

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

        /* 给每个box设置弹性布局 */
        .box1,
        .box2,
        .box3 {
            display: flex;
            width: 180px;
            height: 60px;
            justify-content: space-around;
        }

        .item {
            align-self: center;
        }
 </style>

/结构
<body>
    <div class="container">
        <div class="box1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box2">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box3">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

效果展示：

 

淡颜Amo~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex布局斜对角对齐的实现方法
zjwxyy1994的博客
05-18 1085
父级设置justify-content:为space-between;第一个子级设置align-self为flex-end;第二个子级align-self为flex-start;代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
flex布局学习
Zachery Wu
11-16 407
个人对于flex布局的理解：通过对某个容器中横纵两条轴上元素的分布的变化，实现的布局。也可以设置容器内元素的具体属性实现针对于某个元素的调整。 基础的属性还是要在使用中才能掌握，而且阮一峰老师对于flex的基本属性解释的非常详细，我就不再列举了。下面是针对于一些实例进行的代码的分析。
Flex布局：实例篇
06-04 1277
本文参考《阮一峰 Flex 布局 实例篇》 注：代码稍有改动，原文的宽度刚好够放三个点，有时候，第二个点并未居中，但看起来似乎是居中的，容易引起歧义. 本文 demo 源码 一、骰子布局 骰子的一面，最多可以放置9个点下面，就来看看Flex如何实现，从一个点到九个点的布局。 如果不加说明，demo 中的HTML一律如下 <div class="box"> <span ...
CSS day12 移动端布局练习
qq_34620296的博客
09-13 736
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
如何实现一个对角线布局
02-27 1642
实现对角线布局有三种方式： SVG（参见 Erik Kennedy 的文章） CSS clip-path（参见 Sebastiano Guerriero 或 Kilian Valkhof 的文章） CSS 转换 本文讲述如何使用 CSS 转换（对应 transform 属性）实现对角线布局效果。 一、HTML 结构 ... 复制代码加一点基本的 CSS 样式： .diagonal-box...
flex布局(骰子布局)
weixin_54420874的博客
02-23 2162
1、应该都知道使用VS来敲写页面的第一步就是新建文件夹，(也可以建文件夹：这是指只有html没有css与js才可以的)。然后，可以在VS中打开文件夹，也可以直接把文件夹拖进去(这有两种方法，任意一种就行了、建议你直接拖进去，因为方便)。 2、这次的页面是一个骰子布局(也叫flex布局)，大家应该都知道骰子是什么，就有六个面一个面对应一个数字，但面是一样的，只是上边的圆点不相同。也就是从一到六，“一”就一个圆点，“二”就两个圆点。以此类推。这次我们就只敲一个面，就是“二”那一面。 3、这就是进来后的效果了
Flex布局--骰子布局
m0_63318949的博客
03-10 2482
flex实现骰子布局
flex布局小案例——制作骰子
super码力的博客
11-08 4797
制作点数一到六的骰子，看了这篇还不会制作骰子，欢迎私信！制作骰子首先需要学会flex的基础原理
移动web开发实例flex布局案例源码
02-16
在现代Web开发中，Flex布局（Flexible Box Layout）已经成为创建响应式、动态和灵活的用户界面的首选方法，尤其在移动设备上。本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并...
css3以及flex布局配合画骰子dice.html
05-17
css3以及flex布局配合画骰子
flex 页面布局教程
03-09
flex 页面布局教程 详细介绍了页面的各个组件
CSS3的Flexbox骰子布局的实现及问题讲解
09-24
CSS3的Flexbox骰子布局是一种利用弹性盒模型（Flexbox）来创建具有六面，每面可显示不同数量点的布局方式。这种布局方法可以模拟真实的骰子，其中每个面的点数代表其特定的值。在本文中，我们将探讨如何通过Flexbox...
Flex布局——色子的小案例
zxy9602的博客
11-12 736
制作色子，即制作相对应的1-6的几个点 1、运用知识点 a、容器——container b、项目——item 代码示例： > 2、主要采用上述两个的属性值进行编辑 例如：flex-direction方向——row、column、row-reverse、column-reverse jusitfy-content:center——水平居中 flex-wrap：wra
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 824
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1025
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 606
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 285
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 240
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
electron 主进程和渲染进程
最新发布
qq_21087199的博客
07-29 212
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
用flex布局制作骰子
07-27
使用flex布局制作骰子可以通过以下步骤实现： 1. 首先，设置一个容器元素，比如ul标签，作为骰子的外部容器。设置宽度、高度、背景颜色等样式属性，同时使用flex布局设置justify-content为space-around，flex-wrap...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值