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

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

2022-12-10 112
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
taobaomakemyownlife-13860
|
消息中间件 Java 中间件
定时任务的六种策略
这篇文章，我们聊聊实现定时任务的六种策略。
taobaomakemyownlife-13860
429 0
遇事问春风乄
|
消息中间件 存储 网络协议
【消息队列开发】 背景知识与需求分析
【消息队列开发】 背景知识与需求分析
遇事问春风乄
119 0
吃豆子的恐龙
|
分布式计算 Java
Java8流式操作——最终操作
当我们通过最终方法对流对象进行操作，说明stream流操作也完成，最后我们将对象汇总成一个结果（总数、对象、集合……）
吃豆子的恐龙
276 0
hujunzheng
编译原理简单语法分析器（first,follow,分析表）源码下载
编译原理（简单语法分析器下载） http://files.cnblogs.com/files/hujunzheng/%E5%8A%A0%E5%85%A5%E5%90%8C%E6%AD%A5%E7%AC%A6%E5%8F%B7%E5%90%8E%E7%9A%84%E8%AF%AD%E6%B3%95%E5%88%86%E6%9E%90%E5%99%A8.
hujunzheng
686 0
阿里云安全_
|
22小时前
第五届伏魔挑战赛如约来袭，诚邀各路高手来战！
伏魔再启，等你来战！
阿里云安全_
1134 1
第五届伏魔挑战赛如约来袭，诚邀各路高手来战！
阿里云安全_
|
8天前
|
数据采集 人工智能 安全
阿里云Web应用防火墙市场份额和技术能力双第一
喜报～～
阿里云安全_
1215 10
AI未闻花名
|
4天前
|
机器学习/深度学习 人工智能 前端开发
构建AI智能体：七十、小树成林，聚沙成塔：随机森林与大模型的协同进化
随机森林是一种基于决策树的集成学习算法，通过构建多棵决策树并结合它们的预测结果来提高准确性和稳定性。其核心思想包括两个随机性：Bootstrap采样（每棵树使用不同的训练子集）和特征随机选择（每棵树分裂时只考虑部分特征）。这种方法能有效处理大规模高维数据，避免过拟合，并评估特征重要性。随机森林的超参数如树的数量、最大深度等可通过网格搜索优化。该算法兼具强大预测能力和工程化优势，是机器学习中的常用基础模型。
AI未闻花名
298 164

热门文章

最新文章

  • 1
    Python使用ffmpeg完美解决方案（避坑必看）
  • 2
    一场与自己心魔的 “殊死搏斗”
  • 3
    HTTP协议中的“X-Real-IP”头字段的作用是什么？底层原理是什么？
  • 4
    ETL工具 kettle
  • 5
    用Python实现简单机器学习模型：以鸢尾花数据集为例
  • 6
    JPA:@Modifying注解(UPDATE或者DELETE)
  • 7
    Unit4 作业
  • 8
    Uvaoj10054 - The Necklace
  • 9
    WM Define Strategy for Addition to Existing Stock(十五。3）
  • 10
    正则表达式中的反向预搜索
  • 1
    假期用阿里云服务器一键部署我的世界/幻兽帕鲁等游戏联机服务器教程
    56
  • 2
    Anthropic 开源 Bloom：基于 LLM 的自动化行为评估框架
    43
  • 3
    Chiplet 技术：芯片终于不再“憋大招”，而是开始像搭积木一样干活了
    36
  • 4
    事故写了一堆，还是天天踩坑？聊聊运维知识库自动化这件“迟早要补的课”
    44
  • 5
    云上数据管道太烧钱？别急，我给你捋一捋这三刀该怎么省（存储 / 计算 / 网络）
    30
  • 6
    新用户如何选择阿里云服务器配置详细攻略教程
    32
  • 7
    【Azure Notification Hub】实验Notification Hub页面中的Test Tag 功能 -- 定向发送消息到指定的Android设备
    26
  • 8
    酒店递送机器人深度技术解析与解决方案选型指南
    33
  • 9
    基于深度学习的农业虫害自动识别系统：YOLOv8 的完整工程
    49
  • 10
    银行业智慧转型：服务机器人核心技术解析与主流产品选型指南
    42

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    安全设备篇——WAF