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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Allure04-用例失败截图

Allure04-用例失败截图

Allure04-用例失败截图 高清B站视频链接 使用pytest_runtest_makereport钩子函数实现allure报告添加用例失败截图 以下是conftest.py实现内容 #!/usr/bin/env python # -*- coding: utf-8 -*- # 作者&#xff1a;扶摇 import allure import pytest from selenium import webd…
阅读更多...
Linux下进程控制

Linux下进程控制

文章目录 创建进程fork创建进程fork返回值写诗拷贝fork常规用法fork失败的原因 进程终止进程正常终止查看进程退出码_exit函数exit函数exit 和 _exit 的区别return退出 进程等待进程等待的方式wait方法(系统调用)waitpid方法(系统调用) WEXITSTATUS 和 WIFEXITED阻塞等待和非阻…
阅读更多...
powerdesigner导出sql将name放到comment注释上

powerdesigner导出sql将name放到comment注释上

1. 批量设置 2. 脚本 Option Explicit ValidationMode True InteractiveMode im_Batch Dim mdl the current modelget the current active model Set mdl ActiveModel If (mdl Is Nothing) ThenMsgBox"There is no current Model " ElseIf Not mdl.IsKindOf(PdPD…
阅读更多...
互斥、自旋、读写锁的应用场景

互斥、自旋、读写锁的应用场景

互斥、自旋、读写锁的应用场景 锁&#x1f512;1、互斥锁、自旋锁2、读写锁&#xff1a;读写的优先级3、乐观锁和悲观锁总结&#xff1a; 锁&#x1f512; ​ 多线程访问共享资源的生活&#xff0c;避免不了资源竞争而导致错乱的问题&#xff0c;所以我们通常为了解决这一问题…
阅读更多...
string的模拟实现

string的模拟实现

string的模拟实现 msvc和g下的string内存比较成员变量构造函数与析构函数拷贝构造函数赋值拷贝c_str、size和capacity函数以及重载[]、clear、expand_capacity迭代器与遍历reservepush_back、append、insert字符串比较运算符erase<<流提取 >>流插入resizefindsubst…
阅读更多...
SpringSecurity完整认证流程（包含自定义页面和自定义登录逻辑）

SpringSecurity完整认证流程（包含自定义页面和自定义登录逻辑）

认证基本流程图&#xff1a; 1. 用户发起表单登录请求后&#xff0c;首先进入UsernamePasswordAuthenticationFilter ​ 在 UsernamePasswordAuthenticationFilter 中根据用户输入的用户名、密码构建了 UsernamePasswordAuthenticationToken&#xff0c;并将其交给 Authentic…
阅读更多...
减少客户流失并留住长期客户：实用策略与实践分享

减少客户流失并留住长期客户：实用策略与实践分享

一、什么是客户流失&#xff1f; 客户流失是指客户停止付费并离开您的产品/服务。流失率是指在特定时间内离开产品/服务的用户除以用户总数的百分比。 比如&#xff1a; 假设某媒体平台是一个基于订阅的流媒体平台&#xff0c;为用户提供各种电影、电视剧、纪录片等。到二月…
阅读更多...
6个提升Python编程能力的PyCharm插件

6个提升Python编程能力的PyCharm插件

大家好&#xff0c;PyCharm作为一款强大的集成开发环境&#xff0c;本身已经提供了许多功能&#xff0c;但一些插件将进一步扩展和增强PyCharm的能力。通过使用这些插件&#xff0c;大家能够更快速地编写代码、提高代码质量、进行调试和优化&#xff0c;并将开发体验提升到一个…
阅读更多...
【排序算法】二、希尔排序（C/C++）

【排序算法】二、希尔排序（C/C++）

「前言」文章内容是排序算法之希尔排序的讲解。&#xff08;所有文章已经分类好&#xff0c;放心食用&#xff09; 「归属专栏」排序算法 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 希尔排序1.1 原理1.2 代码实现&#xff08;C/C&#xff09;1.3 特性总结 希尔排序 1.1…
阅读更多...
React-组件使用与组件通信

React-组件使用与组件通信

生命周期补充(不常用): 案例&#xff1a; import React, { Component } from reactexport default class App extends Component {state {num : 100,list: []}//获取到的是更新前的props 和 state getSnapshotBeforeUpdate(prevProps,prevState){ //必须搭配componentDidUpd…
阅读更多...
红队打靶练习:DERPNSTINK: 1

红队打靶练习:DERPNSTINK: 1

目录 信息收集 1、arp 2、netdiscover 3、nmap 4、nikto 5、whatweb 目录探测 1、gobuster 2、dirsearch WEB get flag1 robots.txt /php/phpmyadmin /temporary /weblog wordpress wpscan扫描 漏洞发现 提权 系统信息收集 mysql登录 john get flag2 s…
阅读更多...
Orchestrator源码解读2-故障失败发现

Orchestrator源码解读2-故障失败发现

目录 目录 前言 核心流程函数调用路径 GetReplicationAnalysis 故障类型和对应的处理函数 拓扑结构警告类型 与MHA相比 前言 Orchestrator另外一个重要的功能是监控集群&#xff0c;发现故障。根据从复制拓扑本身获得的信息&#xff0c;它可以识别各种故障场景。Orchest…
阅读更多...
Vue2.v-指令

Vue2.v-指令

v-if 在双引号中写判断条件。 <div v-if"score>90">A</div> <div v-else-if"score>80">B</div> <div v-else>C</div>v-on: :冒号后面跟着事件。 为了简化&#xff0c;可以直接用代替v-on:。 事件名“内联语…
阅读更多...
【前端素材】同城服务分类手机APP页面的设计实现

【前端素材】同城服务分类手机APP页面的设计实现

一、需求分析 一个同城服务分类手机页面是一个用于提供同城服务分类信息的移动设备页面。它通常具有以下功能&#xff1a; 地理定位&#xff1a;同城服务分类手机页面可以利用用户的地理定位功能&#xff0c;获取用户当前所在的城市或地区信息&#xff0c;以便提供与用户所在地…
阅读更多...
一、Mybatis 简介

一、Mybatis 简介

本章概要 简介持久层框架对比快速入门&#xff08;基于Mybatis3方式&#xff09; 1.1 简介 https://mybatis.org/mybatis-3/zh/index.html MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁移到了Google Code。随着开发团队转投G…
阅读更多...
12、DolphinScheduler

12、DolphinScheduler

1、DolphinScheduler简介 1.1、 DolphinScheduler概述 Apache DolphinScheduler是一个分布式、易扩展的可视化DAG工作流任务调度平台。致力于解决数据处理流程中错综复杂的依赖关系&#xff0c;使调度系统在数据处理流程中开箱即用。 1.2、 DolphinScheduler核心架构 Dolph…
阅读更多...
UV贴图和展开初学者指南

UV贴图和展开初学者指南

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 介绍 这正是本文的主题——UV贴图——登上舞台的时候。大多数 3D 建…
阅读更多...
基于YOLOv8 + BotSORT实现球员和足球检测与跟踪 (步骤 + 源码)

基于YOLOv8 + BotSORT实现球员和足球检测与跟踪 (步骤 + 源码)

导 读 本文主要介绍基于YOLOv8和BotSORT实现球员和足球检测与跟踪 &#xff0c;并给出步骤和代码。 背景介绍 本文旨在了解 YOLO 架构并在自定义数据集上对其进行训练&#xff0c;然后微调模型以获得更好的结果&#xff0c;并运行推理以了解最有效的方法。 什么是YOLO&#x…
阅读更多...
练习-指针笔试题

练习-指针笔试题

目录 前言一、一维整型数组1.1 题目一1.2 题目二 二、二维整型数组2.1 题目一2.2 题目二2.3 题目三 三、结构体3.1 题目一&#xff08;32位机器运行&#xff09; 四、字符数组4.1 题目一4.2 题目二 总结 前言 本篇文章记录关于C语言指针笔试题的介绍。 一、一维整型数组 1.1 …
阅读更多...
探索人工智能：深度学习、人工智能安全和人工智能

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

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

Copyright @ 2022~2023