AI 助理
备案控制台
开发者社区 彭世瑜的博客 文章 正文

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

2021-11-24 367
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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)
文章标签：
容器
关键词：
flex布局
flex盒子布局
编程达人
目录
相关文章
明月何时照我还呀
|
2月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些？
flex 布局属性在实际项目中的应用场景有哪些？
明月何时照我还呀
67 1
那年春天
|
1月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
107 57
我是快乐的嘟嘟
|
18天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
91 34
游客g5tp3lgf24cqc
|
5天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中，还可以用table元素来实现双行夹批效果，但比flex布局代码更复杂，效果也不见得更理想。
游客g5tp3lgf24cqc
29 10
lqj_本人
|
7天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
29 10
dufadayang
|
18天前
|
容器
在 Flex 布局中，如何设置元素在侧轴上的初始对齐方式？
【10月更文挑战第22天】同时，还可以进一步探索其他 Flex 布局相关的属性和技巧，以更好地掌握 Flex 布局的强大功能，创造出更具创意和适应性的页面布局。
dufadayang
23 2
那年春天
|
1月前
|
前端开发 容器
flex布局
【10月更文挑战第7天】
那年春天
27 1
明月何时照我还呀
|
2月前
flex布局属性
flex布局属性
明月何时照我还呀
29 1
Li370234940
|
1月前
多个p标签，并让div“flex”布局，且单行溢出隐藏
多个p标签，并让div“flex”布局，且单行溢出隐藏
Li370234940
27 0
Li370234940
|
1月前
|
容器
flex布局
flex布局
Li370234940
44 0