AI 助理
备案控制台
开发者社区 云原生 文章 正文

Flex弹性盒子布局实现骰子6点

2022-11-23 106
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flex弹性盒子布局实现骰子6点

概念

Flex 容器（flex container）

Flex 项目（flex item）

水平的主轴（main axis）垂直的交叉轴（cross axis）

主轴的开始位置（与边框的交叉点)main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

容器的属性

作用

可选参数

默认值

flex-direction

主轴的方向

row|row-reverse | column | column-reverse

row

flex-wrap

换行

nowrap | wrap | wrap-reverse

nowrap

flex-flow

<flex-direction> <flex-wrap>

row nowrap

justify-content

主轴对齐方式

flex-start | flex-end | center | space-between | space-around

flex-start

align-items

交叉轴对齐

flex-start | flex-end | center | baseline | stretch

stretch

align-content

多根轴线的对齐方式

flex-start | flex-end | center | space-between | space-around | stretch

stretch


项目的属性

作用

可选参数

默认值

order

排列顺序

<integer>

0

flex-grow

放大比例

<number>

0

flex-shrink

缩小比例

<number>

1

flex-basis

项目占据的主轴空间

<length>

auto

flex

<flex-grow> <flex-shrink> <flex-basis>

0 1 auto

align-self

项目对齐方式

auto | flex-start | flex-end | center | baseline | stretch

auto

1、基础样式

h2{
    text-align: center;
}

.main{
    display: flex;
    flex-wrap: wrap;
    width: 680px;
    justify-content: space-between;
}

.container{
    display: flex;
    width: 320px;
    height: 320px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between;
}

.box{
    width: 90px;
    height: 90px;
    background-color: #EEEEEE;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;            
}

.row{
    display: flex;
    flex-basis: 100%;
}

.item{
    width: 24px;
    height: 24px;
    background-color: #000000;
    margin: 3px;
    border-radius: 50%;
}
    

/*排列方向*/
.flex-direction-column{
     flex-direction: column;
}

/*水平排列*/
.justify-content-center{
    justify-content: center;
}

.justify-content-flex-end{
    justify-content: flex-end;
}

.justify-content-space-between{
    justify-content: space-between;
}
    
/*垂直排列*/
 .align-items-center{
     align-items: center;
 }

 .align-items-flex-end{
     align-items: flex-end;
 }

 .align-items-space-between{
     align-items: space-between;
 }

/*多轴对齐*/
 .align-content-space-between{
    align-content: space-between;
 }

 /*项目排列*/
 .align-self-center{
    align-self: center;
 }

 .align-self-flex-end{
    align-self: flex-end;
 }

2、单项目

d25.1.png


代码如下

<div class="container">


 <div class="box">
 <span class="item"></span>
 </div>
<div class="box justify-content-center">
 <span class="item"></span>
</div>
<div class="box justify-content-flex-end">
 <span class="item"></span>
 </div>
<div class="box align-items-center">
 <span class="item"></span>
 </div>
<div class="box justify-content-center align-items-center">
 <span class="item"></span>
 </div>
<div class="box justify-content-flex-end align-items-center">
 <span class="item"></span>
 </div>
<div class="box align-items-flex-end">
 <span class="item"></span>
 </div>
<div class="box justify-content-center align-items-flex-end">
 <span class="item"></span>
 </div>
<div class="box justify-content-flex-end align-items-flex-end">
 <span class="item"></span>
 </div>
</div>

3、双项目

d25.2.png

<div class="container">
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
    <div class="box">
        <span class="item"></span>
        <span class="item align-self-center"></span>
    </div>
    
    <div class="box justify-content-space-between">
        <span class="item"></span>
        <span class="item align-self-flex-end"></span>
    </div>

    <div class="box justify-content-space-between">
        <span class="item"></span>
        <span class="item"></span>
    </div>

    <div class="box justify-content-space-between align-items-center">
        <span class="item"></span>
        <span class="item"></span>
    </div>  
    <div class="box justify-content-space-between align-items-flex-end">
        <span class="item"></span>
        <span class="item"></span>
    </div>  

    <div class="box justify-content-space-between flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
    <div class="box justify-content-space-between align-items-center flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
    </div>  

    <div class="box justify-content-space-between align-items-flex-end flex-direction-column">
        <span class="item"></span> 
        <span class="item"></span>
    </div> 
    
</div>

4、多项目

d25.3.png


<div class="container">
    <div class="box">
        <span class="item"></span>
        <span class="item align-self-center"></span>
        <span class="item align-self-flex-end"></span>
    </div>
    
    <div class="box justify-content-flex-end align-content-space-between">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
    <div class="box align-content-space-between">
       <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>

        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

    <div class="box align-content-space-between">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

    <div class="box align-content-space-between flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

    <div class="box">
       <div class="row">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>

        <div class="row justify-content-center">
            <span class="item"></span>
        </div>

        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

     <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
</div>

5、骰子6点

d25.4.png


<div class="container">
    <div class="box justify-content-center align-items-center">
        <span class="item"></span>
    </div>
    
    <div class="box justify-content-space-between">
        <span class="item"></span>
        <span class="item align-self-flex-end"></span>
    </div>
    
    <div class="box">
            <span class="item"></span>
            <span class="item align-self-center"></span>
            <span class="item align-self-flex-end"></span>
    </div>
    
    <div class="box align-content-space-between">
        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

    <div class="box">
        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        <div class="row justify-content-center">
            <span class="item"></span>
        </div>

        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

    <div class="box align-content-space-between flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</div>

完成代码：

https://github.com/mouday/LearningNote/blob/master/html/flex-demo.html

其他

防止挤压

flex-shrink: 0

参考

  1. Flex 布局教程：语法篇
  2. Flex 布局教程：实例篇
  3. 30分钟彻底弄懂flex布局
  4. CSS3 弹性盒子(Flex Box)
            </div>
文章标签：
容器
auqbllxiu
目录
相关文章
源码星辰
|
算法 计算机视觉
opencv图像形态学
图像形态学是一种基于数学形态学的图像处理技术，它主要用于分析和修改图像的形状和结构。
源码星辰
161 4
蚝油菜花
|
11月前
|
人工智能 算法 数据挖掘
StoryTeller：字节、上海交大、北大共同推出的全自动长视频描述生成一致系统
StoryTeller是由字节跳动、上海交通大学和北京大学共同推出的全自动长视频描述生成系统。该系统通过音频视觉角色识别技术，结合低级视觉概念和高级剧情信息，生成详细且连贯的视频描述。StoryTeller在MovieQA任务中展现出比现有模型更高的准确率，适用于电影制作、视频内容分析、辅助视障人士等多个应用场景。
蚝油菜花
466 0
StoryTeller：字节、上海交大、北大共同推出的全自动长视频描述生成一致系统
软件求生
|
监控 NoSQL Redis
Redis分区容错秘诀：解密主从模式
Redis主从模式用于提高高可用性、负载均衡和数据备份。主节点处理写入，从节点复制数据并分担读取，实现故障切换和读写分离。配置主从关系后，从节点连接主节点进行全量和增量复制。当主节点故障，从节点可接管服务。然而，主从延迟和数据不一致性是挑战，可通过优化网络、使用Sentinel和Redis Cluster等解决。关注“软件求生”获取更多内容。
软件求生
323 1
Redis分区容错秘诀：解密主从模式
Trouble..
|
机器学习/深度学习 人工智能 自然语言处理
【论文精读】AAAI 2022 - Unified Named Entity Recognition as Word-Word Relation Classification
到目前为止，命名实体识别（NER）已经涉及三种主要类型，包括扁平、重叠（又名嵌套）和不连续NER，它们大多是单独研究的。
Trouble..
434 0
【论文精读】AAAI 2022 - Unified Named Entity Recognition as Word-Word Relation Classification
阿里云万网
|
设计模式 数据库 iOS开发
建站新功能上线，我用5分钟搭好一个网站！
建站新功能上线，我用5分钟搭好一个网站！
阿里云万网
565 3
建站新功能上线，我用5分钟搭好一个网站！
osc_06552749
|
Java 数据库连接 mybatis
MyBatis 是否支持延迟加载？怎么实现？什么时候启用？
MyBatis 是否支持延迟加载？怎么实现？什么时候启用？
osc_06552749
284 0
hoho_12
|
Java Maven 数据安全/隐私保护
Could not transfer artifact from/to Authentication failed for 401 Unauthorized
Could not transfer artifact from/to Authentication failed for 401 Unauthorized
hoho_12
735 0
技术小结
|
Java Apache Maven
如何给Maven管理的普通Java项目指定默认启动类
如何给Maven管理的普通Java项目指定默认启动类
技术小结
485 0
游客knjctmbzcn7l4
|
数据安全/隐私保护 iOS开发 开发者
2022最新xcode打包IPA（完整详细图文）
本文详细讲述iOS的App开发后如何进行证书的创建和项目中如何配置证书及上传到苹果App管理后台后如何新增与更新版本。
游客knjctmbzcn7l4
495 0
程序大视界
|
XML 前端开发 Java
Spring、SpringMVC和SpringBoot看这一篇就够了！
SpringBoot只是Spring本身的扩展，使开发，测试和部署更加方便。
程序大视界
847 0
Spring、SpringMVC和SpringBoot看这一篇就够了！

热门文章

最新文章

  • 1
    网页特殊符号HTML代码大全
  • 2
    什么是Widevine？Widevine DRM详解
  • 3
    Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算
  • 4
    杨老师课堂_Java教程第六篇之引用数据类型_类的运用
  • 5
    Point Grey articles link
  • 6
    培养我们的目标感
  • 7
    IE6中png图片透明方法
  • 8
    A Go library implementing an FST (finite state transducer)——mark下
  • 9
    在网站设计中非常有用的10款在线生成工具
  • 10
    3Animation动画的创建，CCSpeed,CCFollow
  • 1
    《时序数据监控平台优化指南：从查询超时到秒级响应，指标下的存储与检索重构实践》
    17
  • 2
    《API网关性能优化指南：从请求拥堵到毫秒级响应，并发下的架构重构实践》
    18
  • 3
    边缘大型AI模型：协作部署与物联网应用——论文阅读
    37
  • 4
    基于 Cloudflare Workers 构建高性能知识库镜像服务：反向代理与 HTML 动态重写实践
    36
  • 5
    PINN训练新思路：把初始条件和边界约束嵌入网络架构，解决多目标优化难题
    23
  • 6
    基于yolo8的深度学习室内火灾监测识别系统
    33
  • 7
    基于springboot的家校合作管理系统
    31
  • 8
    以Lama Cleaner的AI去水印工具理解人工智能中经常会用到GPU来计算的CUDA是什么？ 优雅草-卓伊凡
    22
  • 9
    PowerShell域内信息收集技术—Powerview用法
    20
  • 10
    VMware Tools 13.0.5.0 发布 - 客户机操作系统无缝交互必备组件
    35

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云免费云服务器:个人用户每月750小时免费