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

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

2023-02-21 231
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>
文章标签：
容器
关键词：
flex布局
flex盒子布局
auqbllxiu
目录
相关文章
凉凉心.
|
2月前
|
前端开发 算法 Java
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
凉凉心.
133 2
凉凉心.
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
275 1
全栈若城
|
6月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
在现代移动应用开发中，流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度，在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表，重点关注多行布局与对齐策略的应用。
全栈若城
231 2
全栈若城
|
6月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中，Flex容器提供了强大而灵活的对齐系统，使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术，是构建专业级用户界面的关键。
全栈若城
218 0
全栈若城
|
6月前
|
UED 容器
5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
Flex布局（弹性布局）是HarmonyOS Next中最强大的布局方式之一，它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示，还是复杂的自适应界面，Flex布局都能轻松应对。
全栈若城
235 0
全栈若城
|
6月前
|
UED 容器
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中，Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器，我们可以创建复杂而灵活的界面结构，满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局，以及如何合理分配和控制空间。
全栈若城
188 0
程序员一鸣
|
9月前
|
开发者 容器
鸿蒙开发：弹性布局Flex
在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
程序员一鸣
259 10
鸿蒙开发：弹性布局Flex
游客ogeeqvh5vfa5q
|
容器
Bootstrap5 Flex（弹性）布局4
排序：.order 类可设置弹性子元素的排序，范围从 .order-1 至 .order-12，数字越小优先级越高。外边距：.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹：.flex-nowrap（默认）、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
游客ogeeqvh5vfa5q
185 10
游客ogeeqvh5vfa5q
|
容器
Bootstrap5 Flex（弹性）布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式，包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类，以实现不同设备上的响应式设计。
游客ogeeqvh5vfa5q
258 5
游客ogeeqvh5vfa5q
Bootstrap5 Flex（弹性）布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式，如 .align-content-start、.align-content-center 等。对于单行子元素，使用 .align-items-* 控制对齐，例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
游客ogeeqvh5vfa5q
275 5

热门文章

最新文章

  • 1
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
  • 2
    （CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
  • 3
    Flex学习之(ActionScript之变量)
  • 4
    Flex编译程序出现 Could not find compiled resource bundle &#39;SharedResources&#39; for locale &#39;en_US&#39;.
  • 5
    flex组件拖拽
  • 6
    Flex builder3 序列号生成器
  • 7
    学习Flex 的常用技术网址收集
  • 8
    使用Flex和Actionscript开发Flash游戏
  • 9
    [Flex] flex手机项目如何限制横竖屏？只允许横屏？
  • 10
    解决办法：Flex4使用Efflex_v0.03.swc (Fx4/FP10)，在该命名空间中多次定义了组件 MotionPath……
  • 1
    （CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
    133
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    275
  • 3
    13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
    231
  • 4
    10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
    188
  • 5
    08.HarmonyOS Next响应式布局秘籍：掌握Flex换行与对齐技术
    206
  • 6
    07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
    218
  • 7
    5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
    235
  • 8
    开源8B参数全能扩散模型Flex.2-preview：把线稿变商稿，还能边画边改！
    478
  • 9
    鸿蒙开发：弹性布局Flex
    259
  • 10
    Bootstrap5 Flex（弹性）布局6
    258

    • 相关电子书

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