flex布局(3)

九、骰子

*{margin:0;padding: 0;box-sizing: border-box;
}
.flex{display: flex;flex-flow: row wrap;justify-content: space-between;align-items: center;align-content: space-between;padding:20px;
}
.touzi{width: 120px;height: 120px;background-color: aliceblue;border: 1px solid #000;border-radius: 5px;padding: 10px;margin: 10px;
}
.touzi  .dot{width: 30px;height: 30px;background-color: #000;border-radius: 50%;
}

9.1 各个方位的一个点

    <div class="flex"><div class="touzi"><div class="dot"></div></div></div>
9.1.1 左上
.one-left-top{display: flex;
}
<div class="touzi one-left-top"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.2 上中
  1. 默认row方向,项目在主轴上居中对齐来实现
.one-center-top{display: flex;justify-content: center;
}
<div class="touzi one-center-top"><div class="dot"></div>
</div>
  1. 方向设为column,项目在交叉轴上居中来实现
.one-center-top{display: flex;flex-direction: column;align-items: center;
}
<div class="touzi one-center-top"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.3 上右
  1. 主轴方向设为row-reverse方向来实现
.one-right-top{display: flex;flex-direction: row-reverse;
}
<div class="touzi one-right-top"><div class="dot"></div>
</div>
  1. 默认row方向,项目在主轴上的排列设为flex-end来实现
.one-right-top{display: flex;justify-content: flex-end;
}
<div class="touzi one-right-top"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.4 左中
  1. 默认主轴方向row,项目在交叉轴上对齐方式是center来实现
.one-left-center{display: flex;align-items: center;
}
<div class="touzi one-left-center"><div class="dot"></div>
</div>
  1. 主轴方向设为column,项目在主轴上的排列为center来实现
.one-left-center{display: flex;flex-direction: column;justify-content: center;
}
<div class="touzi one-left-center"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.5 正中

默认主轴方向row项目在主轴和交叉轴上对齐方式都是center
(主轴方向任意因为只有一个只要在两条轴上方向都是center就好)

.one-center{display: flex;justify-content: center;align-items: center;
}
<div class="touzi one-center"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.6 右中
  1. 默认主轴方向row,项目在主轴上排列为flex-end,项目在交叉轴上排列为center
    效果上只有一个项目的时候
    flex-direction:row-reverse=flex-direction:row;justify-content: flex-end;
.one-right-center{display: flex;justify-content: flex-end;align-items: center;
}
<div class="touzi one-right-center"><div class="dot"></div>
</div>
  1. 主轴方向为column,项目在交叉轴上方向为flex-end,项目在主轴方向上排列为center
.one-right-center{flex-direction: column;justify-content: center;align-items: flex-end;
}
<div class="touzi one-right-center"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.7 左下
  1. 默认主轴方向为row,项目在交叉轴上排列为flex-end来实现
.one-left-bottom{display: flex;align-items: flex-end;
}
<div class="touzi one-left-bottom"><div class="dot"></div>
</div>
  1. 主轴方向为column,项目在主轴column上排列方式为flex-end
    一个项目的情况下flex-direction:column-reverse = flex-direction:column;justify-content:flex-end;
.one-left-bottom{display: flex;flex-direction:column;justify-content:flex-end;
}
<div class="touzi one-left-bottom"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.8 下中
  1. 默认主轴方向为row,项目在主轴上排列方向为center,在交叉轴上排列方向为flex-end
.one-center-bottom{display: flex;align-items: flex-end;justify-content: center;
}
<div class="touzi one-center-bottom"><div class="dot"></div>
</div>
  1. 主轴方向设为column-reverse,项目在交叉轴上排列在中间
.one-center-bottom{display: flex;flex-direction: column-reverse;align-items: center;
}
<div class="touzi one-center-bottom"><div class="dot"></div>
</div>

在这里插入图片描述

9.1.9 下右
  1. 默认主轴方向row,项目在主轴上和交叉轴上都是flex-end
.one-right-bottom{display: flex;justify-content: flex-end;align-items: flex-end;
}
<div class="touzi one-right-bottom"><div class="dot"></div>
</div>
  1. 主轴方向为column-reverse,项目在交叉轴上排列为flex-end
.one-right-bottom{display: flex;flex-direction: column-reverse;align-items: flex-end;
}
<div class="touzi one-right-bottom"><div class="dot"></div>
</div>

在这里插入图片描述

9.2 两个点的排列

    <div class="flex"><div class="touzi"><div class="dot"></div><div class="dot"></div></div></div>
9.2.1 上两端

默认主轴方向row,项目在主轴上的排列space-between(两端对齐)

.two-top{display: flex;justify-content: space-between;
}
<div class="touzi two-top"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.2 中两端

默认主轴方向row,项目在主轴上的排列spsce-between(两端对齐),项目在交叉轴上排列center

.two-center-h{display: flex;justify-content: space-between;align-items:center
}
<div class="touzi two-top-h"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.3 下两端

默认主轴方向row,项目在主轴上的排列spsce-between(两端对齐),项目在交叉轴上排列flex-end

.two-bottom{display: flex;justify-content: space-between;align-items: flex-end;
}
<div class="touzi two-bottom"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.4 左二

主轴方向column,项目在主轴上的排列spsce-between(两端对齐)

.two-left{display: flex;flex-direction: column;justify-content: space-between;
}
<div class="touzi two-left"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.5 中二

主轴方向为column,主轴上项目排列为space-between,在交叉轴上居中center

.two-center-s{display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
<div class="touzi two-center-s"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.6 右二

主轴方向为column,主轴上项目排列为space-between,在交叉轴上flex-end

.two-right{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
}
<div class="touzi two-right"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.6 对角线两端

默认主轴方向为row,主轴上项目排列为space-between
然后再最后一个项目上设置自己独立的对齐方式flex-end

.two-diagonal{display: flex;justify-content: space-between;
}
.two-diagonal .dot:last-child{align-self: flex-end;
}
<div class="touzi two-diagonal"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.2.7 对角线上两个

默认主轴方向为row,主轴上项目排列为space-between
然后再最后一个项目上设置自己独立的对齐方式flex-end

.two-diagonal{display: flex;
}
.two-diagonal .dot:last-child{align-self: center;
}
<div class="touzi two-diagonal"><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.3 三个点的排列

    <div class="flex"><div class="touzi"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div>
9.3.1 上三、横中三、下三、左三、竖中三、右三都跟两点相同不再赘述

在这里插入图片描述

9.3.2 对角线三个
.three-diagonal{display: flex;
}
.three-diagonal .dot:nth-child(2){align-self: center;
}
.three-diagonal .dot:last-child{align-self: flex-end;
}
<div class="touzi three-diagonal"><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

9.4 四个点的排列

.four-ends{display: flex;flex-wrap: wrap;align-content: space-between;
}
.dots-box{flex-basis: 100%;display: flex;justify-content: space-between;
}
<div class="touzi four-ends"><div class="dots-box"><div class="dot"></div><div class="dot"></div></div><div class="dots-box"><div class="dot"></div><div class="dot"></div></div>
</div>

在这里插入图片描述

9.5 五个点的排列

.five-dots{display: flex;flex-wrap: wrap;align-content: space-between;
}
.dots-box{flex-basis: 100%;display: flex;justify-content: space-between;
}
.five-dots .dots-box:nth-child(2){flex-basis: 100%;display: flex;justify-content: center;
}
<div class="touzi five-dots"><div class="dots-box"><div class="dot"></div><div class="dot"></div></div><div class="dots-box"><div class="dot"></div></div><div class="dots-box"><div class="dot"></div><div class="dot"></div></div>
</div>

在这里插入图片描述

9.6 六个点的排列

9.6.1 在四个点的基础上做改动,css代码一样就是看分两个盒子还是三个盒子仅此而已

在这里插入图片描述

9.6.2 不分盒子直接实现
  1. 两排横三
.six-dots-row {display: flex;flex-wrap: wrap;align-content: space-between;
}
<div class="touzi six-dots-row"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>
  1. 两排竖三
.six-dots-column {display: flex;flex-direction: column;flex-wrap: wrap;align-content: space-between;justify-content: space-between;
}
<div class="touzi six-dots-column"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

tips
3. 七个点和五个点的是一样的
4. 八个点的和六个点一样的

9.7 九个点

.nine-dots{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;align-content: space-between;
}
<div class="touzi nine-dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/609471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基础数据结构之顺序表练习

1.给你一个整型数组 nums ,在数组中找出由三个数组成的最大乘积,并输出这个乘积。 示例 1: 输入:nums = [1,2,3] 输出:6 示例 2: 输入:nums = [1,2,3,4] 输出:24 示例 3: 输入:nums = [-1,-2,-3] 输出:-6 提示: 3 <= nums.length <= 104 -1000 <= nums[i]…

Java网络爬虫--HttpClient

目录标题 技术介绍有什么优点&#xff1f;怎么在项目中引入&#xff1f; 请求URLEntityUtils 类GET请求带参数的GET请求POST请求 总结 技术介绍 HttpClient 是 Apache Jakarta Common 下的子项目&#xff0c;用来提供高效的、功能丰富的、支持 HTTP 协议的客户端编程工具包。相…

开启Android学习之旅-6-实战答题App

不经过实战&#xff0c;看再多理论&#xff0c;都是只放在笔记里&#xff0c;活学活用才是硬道理。同时开发应用需要循序渐进&#xff0c;一口气规划300个功能&#xff0c;400张表&#xff0c;会严重打击自己的自信。这里根据所学的&#xff0c;开发一个答题App。 题库需求分析…

QML 模型视图

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 对于 GUI 应用程序来说,我们通常需要格式化数据并进行显示,而 QML 提供了一种很便利的显示方式 - Model-View-Delegate(简称:MVD)。该模式是 Model-View-Controller(简称:MVC)的一种变体,常被用于分…

HackTheBox - Medium - Linux - Awkward

Awkward Awkward 是一款中等难度的机器&#xff0c;它突出显示了不会导致 RCE 的代码注入漏洞&#xff0c;而是 SSRF、LFI 和任意文件写入/追加漏洞。此外&#xff0c;该框还涉及通过不良的密码做法&#xff08;例如密码重用&#xff09;以及以纯文本形式存储密码来绕过身份验…

vue列表渲染-v-for指令,vue事件处理,数据双向绑定,表单控制

es6对象语法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"./js/vue.js"></script> </head> <body></body> <script&…

【Spring Boot 3】【数据源】自定义JPA多数据源

【Spring Boot 3】【数据源】自定义JPA多数据源 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总…

力扣:18.四数之和

一、做题链接&#xff1a;18. 四数之和 - 力扣&#xff08;LeetCode&#xff09; 二、题目分析 1.做这一道题之前本博主建议先看上一篇《三数之和》 2.题目分析 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重…

C++自增运算符与类型转换

C中的自增和自减运算符分别是"“和”–"。这些运算符可以用于递增或递减一个变量的值。 自增运算符 () int x 5; x; // 这等同于 x x 1; // 现在 x 的值为 6自减运算符 (–) int y 10; y--; // 这等同于 y y - 1; // 现在 y 的值为 9这些运算符可以前置或后置…

计算机毕业设计 基于SpringBoot的项目申报系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

程序媛的mac修炼手册-- 终端(terminal)常用命令

「终端&#xff08;terminal&#xff09;」相当于macOS的一个 App &#xff0c;它的特殊之处是&#xff0c;它是管理其它App的App&#xff0c;操作主要通过命令行界面 (CLI) 。 相比于我们日常熟悉的用户界面&#xff08;User Interface&#xff0c;UI&#xff09;&#xff0c…

Redis 主从、哨兵和分片集群简单介绍

Redis 主从集群架构 单节点 redis 并发能力有上限&#xff0c;要进一步提高 redis 并发能力&#xff0c;就要搭建主从集群&#xff0c;实现读写分离 主从同步原理 Replicaition id&#xff1a;每台 master 机器都一个 repl_id&#xff0c;是数据集的表示&#xff0c;若 salv…

软件测试|如何在Pycharm中配置文件头部信息

简介 PyCharm是一款功能强大的Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;在开发过程中&#xff0c;我们经常需要在代码文件的开头添加固定的文件说明信息&#xff0c;例如版权声明、作者信息、创建日期等。手动添加这些信息可能会很繁琐&#xff0c;但是PyCh…

[Vulnhub靶机] DriftingBlues: 5

[Vulnhub靶机] DriftingBlues: 5靶机渗透思路及方法&#xff08;个人分享&#xff09; 靶机下载地址&#xff1a; https://download.vulnhub.com/driftingblues/driftingblues5_vh.ova 靶机地址&#xff1a;192.168.67.24 攻击机地址&#xff1a;192.168.67.3 一、信息收集 …

探索人工智能:深度学习、人工智能安全和人工智能

深度学习是人工智能的一种重要技术&#xff0c;它模拟了人类大脑神经网络的工作原理&#xff0c;通过建立多层次的神经元网络来实现对数据的分析和处理。这种技术的引入使得人工智能的发展进入到了一个新的阶段。 现如今&#xff0c;深度学习在各个领域都有着广泛的应用。例如…

Java设计模式-访问者模式

访问者模式 一、概述二、结构三、案例实现四、优缺点五、使用场景六、扩展 一、概述 定义&#xff1a; 封装一些作用于某种数据结构中的各元素的操作&#xff0c;它可以在不改变这个数据结构的前提下定义作用于这些元素的新的操作。 二、结构 访问者模式包含以下主要角色: …

Echarts——使用graphic组件在一个option内同时设置两个饼图的背景图

使用echarts的graphic原生图形元素组件&#xff0c;为两个饼图设置对应背景。 <template><div id"app"><div class"charts" ref"charts"></div></div> </template><script> import * as echarts from…

贪心的歌手(100%用例)C卷 (JavaPythonC++Node.jsC语言)

一个歌手准备从A城去B城参加演出。 (1)按照合同,他必须在T天内赶到. (2)歌手途径N座城市 (3)歌手不能往回走 (4)每两座城市之间需要的天数都可以提前获知 (5)歌手在每座城市都可以在路边卖唱赚钱。经过调研,歌手提前获知了每座城市卖唱的收入预期: 如果在一座城市…

Spring面试整理-Spring注解

Spring框架提供了许多注解,用以简化配置和实现各种功能。这些注解主要分为几个类别:核心、数据访问、Web开发、调度和事务管理、测试等。下面是一些常用的Spring注解: 核心注解@Component: 用于类定义上,表明该类将被Spring容器作为组件管理。@Service: 用于标注服务层的组…

龙芯+RT-Thread+LVGL实战笔记(28)——电子琴准备工作

【写在前面】临近期末,笔者工作繁忙,因此本系列教程的更新频率有所放缓,还望订阅本专栏的朋友理解,请勿催更。笔者在此也简要声明几点: 有些硬件模块笔者并没有,如LED点阵、压力传感模块、RFID模块等,因此这些模块的相关任务暂时无法给出经过验证的代码。其实,教程进行…