当前位置: 首页 > news >正文

Bootstrap系列之Flex布局

文章目录

  • 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的使用,并记录了常用的一些排列方式,如果这篇文章不足以满足需求,可以去官方文档查看详情

相关文章:

Bootstrap系列之Flex布局

文章目录Bootstrap中的Flexd-flex与d-inline-flex也存在响应式变化flex水平布局flex垂直布局flex水平与垂直也存在响应式变化内容排列&#xff08;justify-content响应式变化也存在于这里sm&#xff0c;md&#xff0c;lg&#xff0c;xl&#xff09;子元素对齐方式Align items&a…...

匈牙利算法与KM算法的区别

前记 在学习过程中&#xff0c;发现很多博客将匈牙利算法和KM算法混为一谈&#xff0c;当时只管用不管分析区别&#xff0c;所以现在来分析一下两个算法之间的区别。 匈牙利算法在二分图匹配的求解过程中共两个原则&#xff1a; 1.最大匹配数原则 2.先到先得原则 而KM算法求…...

You Only Need 90K Parameters to Adapt Light 论文阅读笔记

这是BMVC2022的论文&#xff0c;提出了一个轻量化的局部全局双支路的低光照图像质量增强网络&#xff0c;有监督。 思路是先用encoder f(⋅)f(\cdot)f(⋅)转到raw-RGB域&#xff0c;再用decoder gt(⋅)g_t(\cdot)gt​(⋅)模拟ISP过程转到sRGB域。虽然文章好像没有明确指出&…...

【vue2小知识】实现axios的二次封装

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;在vue2中实现axios的二次封装 目录 一、平常axios的请求发送方式 二、axios的一次封装…...

走近php的数组:数组的定义与数组函数

数组是一种数据结构&#xff0c;它由一组元素组成&#xff0c;这些元素可以是相同类型或不同类型。数组是在程序运行时动态创建的&#xff0c;可以根据需要增加或删除元素&#xff0c;因此它们是非常灵活和实用的数据结构。在大多数编程语言中&#xff0c;数组都有一个索引&…...

Docker 应用实践-仓库篇

目前 Docker 官方维护了一个公共仓库 Docker Hub&#xff0c;用于查找和与团队共享容器镜像&#xff0c;界上最大的容器镜像存储库&#xff0c;拥有一系列内容源&#xff0c;包括容器社区开发人员、开放源代码项目和独立软件供应商&#xff08;ISV&#xff09;在容器中构建和分…...

python+django篮球NBA周边商城vue

目 录 第一章 绪 论 1 1.1背景及意义 1 1.2国内外研究概况 1 1.3 研究的内容 1 第二章 关键技术的研究 3 2.1 vue技术介绍 3 myproject/ <-- 高级别的文件夹 |-- myproject/ <-- Django项目文件夹 | |-- myproje…...

抽象类与接口的区别

抽象类什么是抽象类&#xff1f;抽象类是特殊的类&#xff0c;只是不能被实例化&#xff1b;除此以外&#xff0c;具有类的其他特性&#xff1b;重要的是抽象类可以包括抽象方法&#xff0c;这是普通类所不能的。抽象方法只能声明于抽象类中&#xff0c;且不包含任何实现&#…...

1904. 你完成的完整对局数

题目&#xff1a; 一款新的在线电子游戏在近期发布&#xff0c;在该电子游戏中&#xff0c;以 刻钟 为周期规划若干时长为 15 分钟 的游戏对局。这意味着&#xff0c;在 HH:00、HH:15、HH:30 和 HH:45 &#xff0c;将会开始一个新的对局&#xff0c;其中 HH 用一个从 00 到 23…...

Vue3:自定义指令以及简单的后台管理权限封装

目录 前言&#xff1a; 自定义指令介绍&#xff1a; 局部的自定义指令&#xff1a; 全局自定义指令&#xff1a; 讲讲后台管理权限管理&#xff1a; 前言&#xff1a; 说起这个自定义指令的使用场景&#xff0c;我第一反应就是&#xff0c;后台管理的权限管理&#xff0c;要…...

剑指 Offer 12. 矩阵中的路径

摘要 剑指 Offer 12. 矩阵中的路径 一、回溯算法解析 本问题是典型的矩阵搜索问题&#xff0c;可使用 深度优先搜索&#xff08;DFS&#xff09; 剪枝解决。 深度优先搜索&#xff1a; 可以理解为暴力法遍历矩阵中所有字符串可能性。DFS 通过递归&#xff0c;先朝一个方向搜…...

springboot+jersey+tomcat实现跨域方式上传文件到服务器

前言 在服务器上&#xff0c;当我们启动了tomcat&#xff0c;就可以以 http://ip地址:8080/文件路径/文件名 的方式&#xff0c;进行访问到我们服务器上处于tomcat的webapps文件夹下的文件 于是为了可以往上面加文件&#xff0c;我们有两种方式&#xff0c;一种就是直接复制文…...

【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#…...

猜数字游戏——C++

我们在有了一定的C基础了以后&#xff0c;简单的实现一个案例&#xff08;其实只要会while循环结构就行了&#xff09;&#xff0c;我们本章内容会实现猜数字游戏&#xff0c;大家有什么语法疑问可以看看我写的&#xff1a;C快速入门_染柒_GRQ的博客-CSDN博客&#xff0c;该博客…...

整数对最小和

题目描述 给定两个整数数组 array1 array2。数组元素按升序排列&#xff0c;假设从array1 、array2中分别取出一个元素可构成一对元素&#xff0c;现在需要取出K个元素并对取出的所有元素求和&#xff0c;计算和的最小值 注意事项 两对元素如果对应于array1 array2中的两个下…...

2023-2-22 -javaagent

周三&#xff0c;天气晴&#xff0c;7度 Java Agent Java Agent也叫作java探针&#xff0c;可以实现动态修改java字节码&#xff0c;完成额外的功能。在java类编译成字节码&#xff0c;在jvm执行之前&#xff0c;它可以读取修改字节码&#xff0c;以来完成额外的功能。 使用…...

JavaScript BOM操作

目录 前言 window 对象 location 对象 navigator 对象 screen 对象 history 对象 前言 BOM&#xff08;Browser Object Model&#xff09;指的是浏览器对象模型&#xff0c;它是 JavaScript 和浏览器之间的接口。通过 BOM&#xff0c;JavaScript 可以与浏览器窗口交互&…...

【机器学习 | 强基计划】开山篇 | 机器学习介绍及其类别和概念阐述

🤵‍♂️ 个人主页: @计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 机器学习 | 强基计划系列 (一) 作者: 计算机魔术师 版本: 1.0 ( 2022.2.25) 注释:文章会不定时更新补充 文章目录 前言一、机器学习概览1.1 有监督学习和无监督学习1.1.…...

华为OD机试真题Java实现【合规数组】真题+解题思路+代码(20222023)

合规数组 题目 给定一个正整数数组 检查数组中是否存在满足规则的数组组合 规则: A = B + 2C 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机试(Java)真题目录汇总 ## 输入 第一行输出数组的元素个数 接下来一行输出所有数组元素,用空格隔开 输出 如果存在满…...

BoostSearcher搜索引擎项目

BoostSearcher搜索引擎项目 1.BoostSearcher这个项目是什么&#xff1f; 答&#xff1a;一个为Boost文档建立索引的站内搜索引擎&#xff0c;简单的说就是一个类似于csdn站内文档搜索框。 项目展示&#xff1a; gitee:https://gitee.com/zxlfx/boost-search-engine-project …...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...