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

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

2022-10-13 111
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
阿里云安全_
|
6天前
|
数据采集 人工智能 安全
阿里云Web应用防火墙市场份额和技术能力双第一
喜报～～
阿里云安全_
1201 10
阿里云安全_
|
16天前
|
云安全 监控 安全
助力企业应对React框架高危漏洞，阿里云多款安全产品限时免费
领取限时免费产品，立即开始防护
阿里云安全_
3129 13
AI未闻花名
|
2天前
|
机器学习/深度学习 人工智能 前端开发
构建AI智能体：七十、小树成林，聚沙成塔：随机森林与大模型的协同进化
随机森林是一种基于决策树的集成学习算法，通过构建多棵决策树并结合它们的预测结果来提高准确性和稳定性。其核心思想包括两个随机性：Bootstrap采样（每棵树使用不同的训练子集）和特征随机选择（每棵树分裂时只考虑部分特征）。这种方法能有效处理大规模高维数据，避免过拟合，并评估特征重要性。随机森林的超参数如树的数量、最大深度等可通过网格搜索优化。该算法兼具强大预测能力和工程化优势，是机器学习中的常用基础模型。
AI未闻花名
264 155
AI未闻花名
|
3天前
|
机器学习/深度学习 人工智能 前端开发
构建AI智能体：六十九、Bootstrap采样在大模型评估中的应用：从置信区间到模型稳定性
Bootstrap采样是一种通过有放回重抽样来评估模型性能的统计方法。它通过从原始数据集中随机抽取样本形成多个Bootstrap数据集，计算统计量（如均值、标准差）的分布，适用于小样本和非参数场景。该方法能估计标准误、构建置信区间，并量化模型不确定性，但对计算资源要求较高。Bootstrap特别适合评估大模型的泛化能力和稳定性，在集成学习、假设检验等领域也有广泛应用。与传统方法相比，Bootstrap不依赖分布假设，在非正态数据中表现更稳健。
AI未闻花名
200 105
云皓@
|
9天前
|
SQL 自然语言处理 调度
Agent Skills 的一次工程实践
**本文采用 Agent Skills 实现整体智能体**，开发框架采用 AgentScope，模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式，用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中，每个技能以文件夹形式存在，包含特定任务的指导性说明（SKILL.md 文件）、脚本代码和资源等 。大模型可以根据需要动态加载这些技能，从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
云皓@
690 5
星哥玩云
|
12天前
|
人工智能 自然语言处理 API
一句话生成拓扑图！AI+Draw.io 封神开源组合，工具让你的效率爆炸
一句话生成拓扑图！next-ai-draw-io 结合 AI 与 Draw.io，通过自然语言秒出架构图，支持私有部署、免费大模型接口，彻底解放生产力，绘图效率直接爆炸。
星哥玩云
807 152

热门文章

最新文章

  • 1
    阿里云代码管理平台云效Codeup亮相，为企业代码安全护航
  • 2
    Server2016虚拟机安装（评估版升级正式版、180天评估版升级）
  • 3
    【最佳实践】简单配置，实现Filebeat多行日志传送
  • 4
    Linux下route add 命令添加路由列表
  • 5
    云原生数据湖构建、分析与开发治理最佳实践及案例分享
  • 6
    HBase read replicas 功能介绍系列
  • 7
    一场与自己心魔的 “殊死搏斗”
  • 8
    发布一个简单实用的xml文件操作帮助类
  • 9
    Mycat 月分片方法
  • 10
    驱动程序中使用CPPUnit
  • 1
    Google Chrome 142更新引发内网访问危机：原理、影响与全面解决方案
    57
  • 2
    YOLOv11 改进 - C2PSA | C2PSA融合Mask Attention掩码注意力，可学习掩码矩阵破解低分辨率特征提取难题 | 2025 预印
    29
  • 3
    《前端实人核验与后端未成年人社交内容管控实操指南》
    35
  • 4
    《高质量游戏攻略与视频的优先级展示机制构建指南》
    40
  • 5
    别再浪费内存了：Python __slots__ 机制深入解析
    37
  • 6
    期货数据API对接与可视化分析全攻略：从数据获取到K线图生成
    63
  • 7
    Windows 10 LTSC 2019 中文版下载及安装教程（附SHA1校验）
    46
  • 8
    当算力变成“新石油”：AI 芯片的战争、底层逻辑与未来爆点
    55
  • 9
    别让 LLM 变成“甩锅发动机”——从安全、审计、隐私聊聊运维智能助手怎么落地
    209

    • 相关电子书

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