flex布局（3）

已于 2024-01-16 17:39:54 修改
阅读量1.3k 收藏 15
点赞数 22
分类专栏： flex布局 文章标签： css css3 前端
于 2024-01-09 22:25:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45618535/article/details/135485032
版权
本文展示了如何利用CSSFlexbox实现不同方位和多点排列，适用于前端开发者理解和应用。
摘要由CSDN通过智能技术生成

九、骰子

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.flex{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
    padding:20px;
}
.touzi{
   width: 120px;
   height: 120px;
   background-color: aliceblue;
   border: 1px solid #000;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
}
.touzi  .dot{
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
}

9.1 各个方位的一个点

    <div class="flex">
        <div class="touzi">
            <div class="dot"></div>
        </div>
    </div>
9.1.1 左上
.one-left-top{
    display: flex;
}
<div class="touzi one-left-top">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.2 上中
  1. 默认row方向，项目在主轴上居中对齐来实现
.one-center-top{
    display: flex;
    justify-content: center;
}
<div class="touzi one-center-top">
     <div class="dot"></div>
</div>
  1. 方向设为column，项目在交叉轴上居中来实现
.one-center-top{
    display: flex;
    flex-direction: column;
    align-items: center;
}
<div class="touzi one-center-top">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.3 上右
  1. 主轴方向设为row-reverse方向来实现
.one-right-top{
    display: flex;
    flex-direction: row-reverse;
}
<div class="touzi one-right-top">
     <div class="dot"></div>
</div>
  1. 默认row方向，项目在主轴上的排列设为flex-end来实现
.one-right-top{
    display: flex;
    justify-content: flex-end;
}
<div class="touzi one-right-top">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.4 左中
  1. 默认主轴方向row，项目在交叉轴上对齐方式是center来实现
.one-left-center{
    display: flex;
    align-items: center;
}
<div class="touzi one-left-center">
     <div class="dot"></div>
</div>
  1. 主轴方向设为column，项目在主轴上的排列为center来实现
.one-left-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
<div class="touzi one-left-center">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.5 正中

默认主轴方向row项目在主轴和交叉轴上对齐方式都是center
（主轴方向任意因为只有一个只要在两条轴上方向都是center就好）

.one-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="touzi one-center">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.6 右中
  1. 默认主轴方向row，项目在主轴上排列为flex-end，项目在交叉轴上排列为center
    效果上只有一个项目的时候
    flex-direction:row-reverse=flex-direction:row;justify-content: flex-end;
.one-right-center{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
<div class="touzi one-right-center">
     <div class="dot"></div>
</div>
  1. 主轴方向为column，项目在交叉轴上方向为flex-end，项目在主轴方向上排列为center
.one-right-center{
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
<div class="touzi one-right-center">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.7 左下
  1. 默认主轴方向为row，项目在交叉轴上排列为flex-end来实现
.one-left-bottom{
    display: flex;
    align-items: flex-end;
}
<div class="touzi one-left-bottom">
     <div class="dot"></div>
</div>
  1. 主轴方向为column，项目在主轴column上排列方式为flex-end
    一个项目的情况下flex-direction:column-reverse = flex-direction:column;justify-content:flex-end;
.one-left-bottom{
    display: flex;
    flex-direction:column;
    justify-content:flex-end;
}
<div class="touzi one-left-bottom">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.8 下中
  1. 默认主轴方向为row，项目在主轴上排列方向为center，在交叉轴上排列方向为flex-end
.one-center-bottom{
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
<div class="touzi one-center-bottom">
     <div class="dot"></div>
</div>
  1. 主轴方向设为column-reverse，项目在交叉轴上排列在中间
.one-center-bottom{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
<div class="touzi one-center-bottom">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.1.9 下右
  1. 默认主轴方向row，项目在主轴上和交叉轴上都是flex-end
.one-right-bottom{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
<div class="touzi one-right-bottom">
     <div class="dot"></div>
</div>
  1. 主轴方向为column-reverse，项目在交叉轴上排列为flex-end
.one-right-bottom{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}
<div class="touzi one-right-bottom">
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2 两个点的排列

    <div class="flex">
        <div class="touzi">
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
9.2.1 上两端

默认主轴方向row，项目在主轴上的排列space-between（两端对齐）

.two-top{
    display: flex;
    justify-content: space-between;
}
<div class="touzi two-top">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2.2 中两端

默认主轴方向row，项目在主轴上的排列spsce-between(两端对齐)，项目在交叉轴上排列center

.two-center-h{
    display: flex;
    justify-content: space-between;
    align-items:center
}
<div class="touzi two-top-h">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2.3 下两端

默认主轴方向row，项目在主轴上的排列spsce-between(两端对齐)，项目在交叉轴上排列flex-end

.two-bottom{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
<div class="touzi two-bottom">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2.4 左二

主轴方向column，项目在主轴上的排列spsce-between(两端对齐)

.two-left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
<div class="touzi two-left">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2.5 中二

主轴方向为column，主轴上项目排列为space-between，在交叉轴上居中center

.two-center-s{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
<div class="touzi two-center-s">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2.6 右二

主轴方向为column，主轴上项目排列为space-between，在交叉轴上flex-end

.two-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
<div class="touzi two-right">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2.6 对角线两端

默认主轴方向为row，主轴上项目排列为space-between
然后再最后一个项目上设置自己独立的对齐方式flex-end

.two-diagonal{
    display: flex;
    justify-content: space-between;
}
.two-diagonal .dot:last-child{
    align-self: flex-end;
}
<div class="touzi two-diagonal">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.2.7 对角线上两个

默认主轴方向为row，主轴上项目排列为space-between
然后再最后一个项目上设置自己独立的对齐方式flex-end

.two-diagonal{
    display: flex;
}
.two-diagonal .dot:last-child{
    align-self: center;
}
<div class="touzi two-diagonal">
     <div class="dot"></div>
     <div class="dot"></div>
</div>

在这里插入图片描述

9.3 三个点的排列

    <div class="flex">
        <div class="touzi">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
9.3.1 上三、横中三、下三、左三、竖中三、右三都跟两点相同不再赘述

在这里插入图片描述

9.3.2 对角线三个
.three-diagonal{
    display: flex;
}
.three-diagonal .dot:nth-child(2){
    align-self: center;
}
.three-diagonal .dot:last-child{
    align-self: flex-end;
}
<div class="touzi three-diagonal">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

在这里插入图片描述

9.4 四个点的排列

.four-ends{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.dots-box{
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
}
<div class="touzi four-ends">
     <div class="dots-box">
          <div class="dot"></div>
          <div class="dot"></div>
     </div>
     <div class="dots-box">
          <div class="dot"></div>
          <div class="dot"></div>
     </div>
</div>

在这里插入图片描述

9.5 五个点的排列

.five-dots{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.dots-box{
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
}
.five-dots .dots-box:nth-child(2){
    flex-basis: 100%;
    display: flex;
    justify-content: center;
}
<div class="touzi five-dots">
    <div class="dots-box">
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    <div class="dots-box">
        <div class="dot"></div>
    </div>
    <div class="dots-box">
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>

在这里插入图片描述

9.6 六个点的排列

9.6.1 在四个点的基础上做改动，css代码一样就是看分两个盒子还是三个盒子仅此而已

在这里插入图片描述

9.6.2 不分盒子直接实现
  1. 两排横三
.six-dots-row {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
<div class="touzi six-dots-row">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
  1. 两排竖三
.six-dots-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}
<div class="touzi six-dots-column">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

tips
3. 七个点和五个点的是一样的
4. 八个点的和六个点一样的

9.7 九个点

.nine-dots{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
}
<div class="touzi nine-dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

在这里插入图片描述

伊昂呀
关注
  • 22
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
肥晨开发的学习之路
06-16 12万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
flex布局（详解）
wwwjjjjj666的博客
11-26 11万+
flex布局详解
Flex布局
pscool的博客
05-11 4083
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录弹性盒简介1、基本概念弹性盒弹性容器弹性元素2、弹性容器的属性主轴属性排列方式：flex-direction自动换行：flext-wrap简写属性：flex-flow空白空间：justify-content辅轴属性辅轴对齐：align-items空白空间：align-content3、弹性元素的属性伸展系数：flex-grow缩减系数：flex-shrink基础长度：flex-basis简写属性：flex排.
flex 布局详细
热门推荐
scorpion_V的博客
07-02 28万+
flex布局
flex布局
nick_zhang的博客
08-30 1819
flex布局被称为弹性布局，让元素跟随页面大小的改变而改变。flex布局的出现是由于浮动会脱离文档流，如果子元素浮动，而父元素没有高度，会引起页面塌陷，需要清除浮动。但flex布局对不兼容老版本浏览器，更适用于移动端。 1. 设置弹性容器 display:flex /*设置弹性容器*/ /*弹性元素排列方式,设置主轴方向*/ flex-direction:row /*默认,水平排序排列(从左向右)*/ flex-direction:row-reverse /*反水平排列
Flex布局详解
半亩方糖
03-31 11万+
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束
flex布局详解
RayShyy的博客
04-23 2万+
1. Flex布局是什么? Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 任何一个容器都可以指定为Flex布局。 注意：设为Flex布局后,子元素的float、clear和vertical-align属性将失效。 2. 基本概念 容器：采用Flex布局的元素，称为Flex容器（flex con
flex布局3等分
Jq的博客
07-22 7991
<style> .wrap{ display: flex; width: 500px; height: 200px; } .item{ border: 1px solid #000; flex: 1; }...
Flex布局实战详解
大爱仙尊
08-15 2万+
flex布局详解，弹性盒子布局，万能布局
flex 布局
qq_46405281的博客
08-09 2945
flex 布局
Flex3 界面布局教程
10-29
国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
Flex 3 布局容器学习笔记 整理
10-29
国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 526
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 245
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 352
网页隐藏版一行小说阅读器
HTML、CSS、JS浅浅浅浅浅解
最新发布
lbdking的博客
07-20 1466
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
flex布局3列怎么写
03-31
可以使用flex布局的flex-direction属性设置为row，表示横向排列，再使用flex-wrap属性设置为wrap，表示换行排列。然后使用flex-grow属性设置每个子元素的宽度比例。 例如，以下代码表示三列等宽排列： ``` ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伊昂呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值