Bootstrap系列之Flex布局

news2024/11/19 15:16:59

文章目录

  • Bootstrap中的Flex
      • d-flex与d-inline-flex也存在响应式变化
      • flex水平布局
      • flex垂直布局
      • flex水平与垂直也存在响应式变化
      • 内容排列(justify-content响应式变化也存在于这里sm,md,lg,xl)
  • 子元素对齐方式Align items(响应式变化也存在于这里sm,md,lg,xl)
  • 指定子元素对齐
  • 等宽
  • 扩展(占用剩余空间)
  • 排序
  • 换行
    • 其余方式详情查看
  • 总结


Bootstrap中的Flex

弹性盒子是css3的一种布局方式,更适合于响应式的开发

  • d-flex—创建flexbox容器并将子项转换为flex项
  • d-inline-flex—创建行内flexbox容器
<div class="container d-flex p-3 bg-info">
        <div class="p-2">弹性项目111</div>
        <div class="p-2">弹性项目222</div>
        <div class="p-2">弹箱项目333</div>
</div>

d-flex与d-inline-flex也存在响应式变化

  • .d-sm-flex 屏幕宽度大于或者等于576px生效
  • .d-sm-inline-flex
  • .d-md-flex 屏幕宽度大于或等于768px生效
  • .d-md-inline-flex
  • .d-lg-flex 屏幕宽度大于或等于992px生效
  • .d-lg-inline-flex
  • .d-xl-flex 屏幕宽度大于或等于1200生效
  • .d-xl-inline-flex

flex水平布局

  • .flex-row—来设置水平方向(浏览器的默认值)
  • .flex-row-reverse—来从相反的一侧开始水平方向。
 <div class="container d-flex p-3 bg-info flex-row-reverse">
        <div class="p-2">弹性项目111</div>
        <div class="p-2">弹性项目222</div>
        <div class="p-2">弹箱项目333</div>
</div>

在这里插入图片描述

flex垂直布局

  • .flex-column—设置垂直方向,
  • .flex-column-reverse—从相反的方向开始设置垂直方向。
    在这里插入图片描述

flex水平与垂直也存在响应式变化

  • .flex-sm-row 屏幕宽度大于或者等于576px生效
  • .flex-sm-row-reverse
  • .flex-sm-column 屏幕宽度大于或者等于576px生效
  • .flex-sm-column-reverse
    (md,lg,xl)

内容排列(justify-content响应式变化也存在于这里sm,md,lg,xl)

在flex容器上使用justify-content来更改flex item在主轴上的对齐方式(x轴为起始,y轴为伸缩方向:列)。选择
start (浏览器默认), end, center, between, 或者 around

  <div class="p-2 d-flex justify-content-start bg-info">弹性项目111</div>
  <div class="p-2 d-flex justify-content-end bg-warning">弹性项目222</div>
  <div class="p-2 d-flex justify-content-center bg-danger">弹箱项目333</div>
  <div class="p-2 d-flex justify-content-between bg-success">弹性项目444</div>
  <div class="p-2 d-flex justify-content-around bg-primary">弹箱项目555</div>

在这里插入图片描述

子元素对齐方式Align items(响应式变化也存在于这里sm,md,lg,xl)

在flexbox容器上使用align-items来更改伸缩项目在侧轴的对齐方式(y轴为起始,x轴为伸缩方向:列)。选择start、end、center、baseline或stretch(浏览器默认)

    <div class=" d-flex align-items-start bg-info">弹性项目111</div>
    <div class=" d-flex align-items-end bg-warning">弹性项目222</div>
    <div class=" d-flex align-items-center bg-danger">弹箱项目333</div>
    <div class=" d-flex align-items-baseline bg-success"><p class="bg-info">弹箱项目444</p></div>
    <div class="d-flex align-items-stretch bg-primary"><p class="bg-danger">弹箱项目555</p></div>

在这里插入图片描述

指定子元素对齐

如果要设置指定子元素对齐对齐可以使用 .align-self- 类来控制,
包含的值有:
.align-self-start,.align-self-end,.align-self-center, .align-self-baseline, 和.align-self-stretch
(默认

  <div class="container mt-3">
    <p>.align-self-start:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-start">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-end:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-end">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-center:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-center">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-baseline:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-baseline">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-stretch (默认):</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-stretch">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    </div>

在这里插入图片描述

等宽

.flex-fill 类强制设置各个弹性子元素的宽度是一样的:

 <div class="container mt-3">
      <h2>等宽</h2>
      <p>.flex-fill  用于设置子元素等宽:</p>
      <div class="d-flex">
        <div class="p-2 bg-info flex-fill">111111111111111111</div>
        <div class="p-2 bg-warning flex-fill">Flex item 2</div>
        <div class="p-2 bg-primary flex-fill">Flex item 3</div>
      </div>
    </div>

在这里插入图片描述

扩展(占用剩余空间)

.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间,最后一个获取剩余空间。 :

在这里插入代码片 <div class="container mt-3">
      <h2>扩展</h2>
      <p>.flex-grow-1 用于设置子元素使用剩下的空间:</p>
      <div class="d-flex mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
      </div>
      <p>不使用 .flex-grow-1 实例:</p>
      <div class="d-flex mb-3 bg-secondary">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
      </div>
    </div>

在这里插入图片描述

排序

.order 类可以设置弹性子元素的排序,从 .order-1 到 .order-12,数字越低权重越高( .order-1 排在 .order-2 之前) :

 <div class="container mt-3">
      <h2>排序</h2>
      <p>.order 类可以设置弹性子元素的排序,从 .order-1.order-12,数字越低权重越高:</p>
      <div class="d-flex mb-3">
        <div class="p-2 order-3 bg-info">Flex item 1</div>
        <div class="p-2 order-2 bg-warning">Flex item 2</div>
        <div class="p-2 order-1 bg-primary">Flex item 3</div>
      </div>
    </div>

在这里插入图片描述

换行

弹性容器中包裹子元素可以使用以下三个类: .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。

 <div class="container mt-3">
      <h2>包裹</h2>
      <p>弹性容器中包裹弹性子元素可以使用以下三个类: .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse:</p>
      <p><code>.flex-wrap:</code></p>
      <div class="d-flex flex-wrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
      </div>
      <br>
      <p><code>.flex-wrap-reverse:</code></p>
      <div class="d-flex flex-wrap-reverse bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
      </div>
      <br>
      <p><code>.flex-nowrap:</code></p>
      <div class="d-flex flex-nowrap bg-light">
        <div class="p-2 border">Flex item 1</div>
        <div class="p-2 border">Flex item 2</div>
        <div class="p-2 border">Flex item 3</div>
        <div class="p-2 border">Flex item 4</div>
        <div class="p-2 border">Flex item 5</div>
        <div class="p-2 border">Flex item 6</div>
        <div class="p-2 border">Flex item 7</div>
        <div class="p-2 border">Flex item 8</div>
        <div class="p-2 border">Flex item 9</div>
        <div class="p-2 border">Flex item 10</div>
      </div>
      <br>
    </div>

在这里插入图片描述

其余方式详情查看

总结

以上就是今天要讲的内容,本文仅仅简单介绍了bootstrap中flex的使用,并记录了常用的一些排列方式,如果这篇文章不足以满足需求,可以去官方文档查看详情

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/371272.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Oracle-00-卸载篇

这里给出企业级的Oracle 10g的卸教程,新安装的19c并没有正经去做卸载的操作,为了后面教程的进度,这里就先借用下10g,如果有需要会重新更新19c的卸载教程 windows服务中将Oracle所有服务全部停掉 选中Oracle - OraDb10g_home2->Oracle Installation Products->Univers…

文化:你所在的团队,有多少人敢讲真话?

你好&#xff0c;我是叶芊。 今天我们要讨论的话题是文化&#xff0c;说“文化”这个词你可能会觉得很虚&#xff0c;那我们换个词——“做事风格”&#xff0c;这就和你们团队平时的协作习惯密切相关了。 做事风格&#xff0c;往小了讲&#xff0c;会影响团队成员对开会的认知…

CV——day78 读论文:通过静态背景构建扩展低通道路边雷达的探测距离(目标是规避风险)

Extending the Detection Range for Low-Channel Roadside LiDAR by Static Background Construction 通过静态背景构建扩展低通道路边雷达的探测距离I. INTRODUCTIONII. RELATED WORKA. LiDAR-Based 3-D Vehicle and Road User DetectionB. LiDAR Data Background FilteringC.…

数据结构与算法之打家劫舍(一)动态规划思想

动态规划里面一部题目打家劫舍是一类经典的算法题目之一&#xff0c;他有各种各样的变式&#xff0c;这一篇文章和大家分享一下打家劫舍最基础的一道题目&#xff0c;掌握这一道题目&#xff0c;为下一道题目打下基础。我们直接进入正题。一.题目大家如果刚接触这样的题目&…

Linux小黑板(9):共享内存

"My poor lost soul"上章花了不少的篇幅讲了讲基于管道((匿名、命名))技术实现的进程间通信。进程为什么需要通信&#xff1f;目的是为了完成进程间的"协同",提高处理数据的能力、优化业务逻辑的实现等等&#xff0c;在linux中我们已经谈过了一个通信的大类…

数据库的基本查询

注意&#xff1a;LIMIT的两个参数&#xff0c;第一个是起始位置&#xff0c;第二个是一次查询到多少页。注意&#xff1a;什么类型的数字都是可以排序的。日期的降序是从现在到以前&#xff0c;MySQL ENUM值如何排序&#xff1f;在MYSQL中&#xff0c;我们知道每个ENUM值都与一…

安装MySQL数据库

安装MySQL数据库 获取软件&#xff1a;https://dev.mysql.com/downloads/mysql/ 下载完成后进行解压操作 若安装目录里没有my.ini配置文件&#xff0c;则需要新建一个my.ini的配置文件。 编辑my.ini配置文件&#xff0c;将配置文件中的内容修改成下面内容 [client] # 设置…

基于企业微信应用消息的每日早安推送

基于企业微信应用消息的每日早安推送 第一步&#xff1a;注册企业微信 企业微信注册地址&#xff1a;https://work.weixin.qq.com/wework_admin/register_wx 按照正常流程填写信息即可&#xff0c;个人也可以注册企业微信&#xff0c;不需要公司 注册完成后&#xff0c;登录…

户籍管理系统测试用例

目录 一、根据页面的不同分别设计测试用例 登录页面 用户信息列表 用户编辑页面 用户更新页面 二、根据目的不同分别设计测试用例 一、根据页面的不同分别设计测试用例 上图是针对一个网站的测试&#xff0c;按照页面的不同分别来设计对应的测试用例。 登录页面 用户信息列…

[MySQL]MySQL数据类型

文章目录数据类型分类数值类型tinyint类型bit类型float类型decimal类型字符串类型char类型varchar类型char和varchar对比日期和时间类型enum和set类型数据类型分类 MySQL中&#xff0c;支持各种各样的类型&#xff0c;比如表示数值的整型浮点型&#xff0c;文本、二进制类型、…

【密码学】 一篇文章讲透数字签名

【密码学】 一篇文章讲透数字签名 数字签名介绍 数字签名&#xff08;又称公钥数字签名&#xff09;是只有信息的发送者才能产生的别人无法伪造的一段数字串&#xff0c;这段数字串同时也是对信息的发送者发送信息真实性的一个有效证明。它是一种类似写在纸上的普通的物理签名…

问题解决:Excel中依据某一列数据进行匹配

问题描述Excel处理时&#xff0c;常常需要从一个大表里&#xff0c;按照条件提取子集。需要我们按照某一序列为标准&#xff0c;匹配筛选出有效信息&#xff0c;案例如下&#xff1a;依据名称匹配销售额。解决方法使用函数&#xff1a;VLOOKUP(lookup_value,table_array,col_in…

Elasticsearch7.8.0版本进阶——自定义分析器

目录一、自定义分析器的概述二、自定义的分析器的测试示例一、自定义分析器的概述 Elasticsearch 带有一些现成的分析器&#xff0c;然而在分析器上 Elasticsearch 真正的强大之 处在于&#xff0c;你可以通过在一个适合你的特定数据的设置之中组合字符过滤器、分词器、词汇单 …

刚来的薪资20k,是我的2倍,我是真的卷不过,真的太变态了

在这个行业爬摸滚打5年了&#xff0c;从最开始点点点的功能测试到现在到现在成为高级测试&#xff0c;工资也翻了几倍&#xff0c;简单的说几句吧 改变的开始 之所以改变的原因很简单&#xff0c;我快被新来的卷死了&#xff0c;新来的本科是某211的&#xff0c;干劲十足&…

Python为CANoe工程添加/删除DBC文件

前面文章我们对于通过COM来实现打开CANoe、导入CANoe配置工程、导入执行文件、启动CANoe软件和执行脚本;但是这只能完成最基本的功能调用,在实际得到使用过程中,特别是各家在推的CI/CD以及平台化,仅仅是实现这些功能是完全不够用的;比如dbc的添加和删除,这是我们非常必要…

【洛谷 P1563】[NOIP2016 提高组] 玩具谜题(模拟+结构体数组+指针)

[NOIP2016 提高组] 玩具谜题 题目背景 NOIP2016 提高组 D1T1 题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业。 有一天, 这些玩具小人把小南的眼镜藏了起来。 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外。如下图: 这时 singer 告诉小南一个谜…

Python变量的定义和使用

定义&#xff1a;变量就是计算机内存中存储某些数据的位置的名称 形象理解变量就是一个存放东西的容器&#xff0c;该容器的名字就叫做变量&#xff0c;容器存放的东西就是变量的值 变量的组成&#xff1a; 标识&#xff1a;标识对象所储存的内存地址&#xff0c;使用内置函数i…

Redis的持久化方式

Redis支持两种方式的持久化&#xff0c;一种是RDB方式、另一种是AOF&#xff08;append-only-file&#xff09;方式&#xff0c;两种持久化方式可以单独使用其中一种&#xff0c;也可以将这两种方式结合使用。 •RDB&#xff1a;根据指定的规则“定时”将内存中的数据存储在硬…

Android中使用GRPC简明教程

引言 Android作为一个开发平台&#xff0c;本身是使用java进行封装的&#xff0c;因此java可以调用的库&#xff0c;在Android中同样可以进行调用&#xff0c;这样就使得Android设备具有丰富的功能&#xff0c;可以进行各种类型的开发。 这篇文章就介绍如何在Android设备中使…

Spring Cloud Nacos源码讲解(七)- Nacos客户端服务订阅机制的核心流程

Nacos客户端服务订阅机制的核心流程 ​ 说起Nacos的服务订阅机制&#xff0c;大家会觉得比较难理解&#xff0c;那我们就来详细分析一下&#xff0c;那我们先从Nacos订阅的概述说起 Nacos订阅概述 ​ Nacos的订阅机制&#xff0c;如果用一句话来描述就是&#xff1a;Nacos客…