Bootstrap 4 Flex（弹性）布局

最新推荐文章于 2024-05-09 22:32:35 发布
最新推荐文章于 2024-05-09 22:32:35 发布
阅读量440 收藏
点赞数
文章标签： css bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zai329979994639/article/details/107066083
版权

Bootstrap 4 Flex（弹性）布局

  <div class="d-flex p-3 bg-secondary text-white">  
    <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 class="d-inline-flex p-3 bg-secondary text-white">
  <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 class="d-flex flex-row bg-secondary 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 bg-primary">Flex item 3</div>
  </div>
  <p>.flex-row-reverse 设置右对齐方向:</p>
  <div class="d-flex flex-row-reverse 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 class="d-flex flex-column 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 bg-primary">Flex item 3</div>
  </div>
  <p>.flex-column-reverse 类用于设置弹性子元素垂直方向翻转显示：</p>
  <div class="d-flex flex-column-reverse">
    <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 class="d-flex justify-content-start bg-secondary 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 bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述

  <div class="d-flex justify-content-end bg-secondary 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 bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述

  <div class="d-flex justify-content-center bg-secondary 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 bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述

  <div class="d-flex justify-content-between bg-secondary 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 bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述

  <div class="d-flex justify-content-around bg-secondary 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 bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述

<p>.flex-fill 类强制设置各个弹性子元素的宽度是一样的:</p>
  <div class="d-flex mb-3">
    <div class="p-2 flex-fill bg-info">Flex item 1</div>
    <div class="p-2 flex-fill bg-warning">Flex item 2</div>
    <div class="p-2 flex-fill bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述

  <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>.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>

在这里插入图片描述

  <p>.mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 auto，</p>
  <div class="d-flex mb-3 bg-secondary">
    <div class="p-2 mr-auto 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 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 ml-auto bg-primary">Flex item 3</div>
  </div>

在这里插入图片描述

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

内容对齐
我们可以使用 .align-content- 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。*

子元素对齐
如果要设置单行的子元素对齐可以使用 .align-items- 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。*

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

多啦-A萌
关注
BootStrap4（四）Flex-弹性布局
weixin_45650998的博客
09-02 690
布局的方式 表格布局>>>div+css实现的样式布局>>>>响应式布局>>>Flex弹性布局
Bootstrap4 Flex（弹性）布局
shengyin714959的博客
08-19 216
Bootstrap4 通过 flex 类来控制页面的布局。
Bootstrap4样式之flex样式
weixin_45884768的博客
03-17 2501
1、开启Flex布局样式 使用.d-flex和.d-inline-flex实现开启flex布局样式，也可以使用.d-[sm|md|lg|xl]-*之前再不同屏幕开启flex布局样式 <div class="d-flex"> <div class="p-2 border border-success w-25">项目1</div> <div class=...
基于BootStrap 4.x 中的Flex 实现各种布局
weixin_30402343的博客
11-24 262
各种布局，总有一款适合你 基于bootstrap 4.x 中的flex 布局 1、左右结构（左窄右宽） <div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="wi...
【补丁】bootStrap4下d-flex、flex-grow-1 无法获取理想宽度的解决方法！
hijk7的博客
10-22 133
【补丁】bootStrap4下d-flex、flex-grow-1 无法获取理想宽度的解决方法！
Bootstrap系列之Flex布局
Debug的博客
02-25 3240
以上就是今天要讲的内容，本文仅仅简单介绍了bootstrap中flex的使用，并记录了常用的一些排列方式，如果这篇文章不足以满足需求，可以去官方文档查看详情。
想法—）Bootstrap 4的新布局FlexBox弹性盒子
最新发布
Itcodewizard的博客
05-09 411
在Bootstrap 4中引入了Flexbox（弹性盒子）布局，为开发者提供了更加灵活和强大的布局方式。Flexbox通过一系列属性和类，使得页面布局更加简单、响应式和易于管理。在使用Bootstrap 4的Flexbox布局时，有一些经验和方法可以帮助开发者更好地利用这一特性。首先，通过使用.d-flex类将元素设置为Flex容器，即可启用Flexbox特性。通过添加.flex-row或类来指定Flex容器的主轴方向，从而决定项目的排列方式。使用类可以控制项目在主轴上的对齐方式，而。
class-2 Linux 入门
weixin_34241036的博客
07-24 298
目录1.系统初始 1.1 广播 1.2关机/重启命令 1.3配置信息2.终端terminal以及交互式接口 2.1终端terminal 2.2交互式接口3.用户登录4.bash shell5.命令提示符6.命令分类，查找，别名，优先级 6.1 命令分类 6.2 命令查找 6.3 命令别名 6.4 命令优先级7.安装VMware Tool8....
WEB前端网页设计-Bootstrap5 Flex（弹性）布局
君逍遥o
05-02 656
Bootstrap5 通过 flex 类来控制页面的布局。
h5常用点整理 class-4
qq_40410916的博客
04-23 230
HTML 表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 HTML 表格和边框属性 如果不定义边框属性，表格将不显示边框。有时这很有用，但...
【CSS3】的语法【二】
lianafany的博客
04-09 818
伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，它的使用方法如下所示。选择器：伪元素{属性：值}伪元素选择器也可以与类配合使用，使用方法如下所示。选择器.类名：伪元素{属性：值}在CSS中，主要有如下四个伪元素选择器。（1）first-line伪元素选择器first-line伪元素选择器用于向某个元素中的第一行文字使用样式。比如：有一个p元素，在该元素内存在两行文字，使用first-line伪元素选择器将第一行文字设为蓝色。
P11到P12css知识点
boooiom的博客
02-08 177
1.背景(head里)：xxx{ background-color/-image:url(属性)/-repeat(重复) （仍然一行一个声明，以；换行） } 2.文本：外面同上{color/text-align(center left right)/-decoration:none(去除超链接下划线),line-through,overline,underline/-indent:2em(首行缩进)/-align:center,left,right,justify(两端对齐)} 3.display属
快速掌握flex弹性盒子布局
qq_39055970的博客
06-12 5730
flex弹性盒子布局前言详解flex布局写一个简单flex布局的步骤1、设置flex容器（弹性盒子）2、设置项目的大小比例（1）默认占满整行的写法（项目使用flex-grow属性）（3）默认最多占满整行的写法（项目使用width属性）3、换行处理（响应式布局需要）（1）设置容器换行（flex-wrap）（2）设置项目宽度（width百分比）4、调整容器内项目间距5、盒子模型所有属性（1）容器属性（2）项目属性 前言 网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 di
HTML入门（flex布局）————DAY6
详情请看注释
10-17 144
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
flex弹性布局；justify-content:space-between；最后一行左对齐
m0_56168677的博客
01-02 2528
flex弹性布局;justify-content:space-between；最后一行左对齐
bootstrap flex 水平布局
04-10
Bootstrap是一个流行的前端开发框架，它提供了一套用于快速构建响应式网页的工具和组件。其中的Flex布局系统是用于实现灵活的水平布局的一部分。 Flex布局是一种基于弹性盒子模型的布局方式，通过使用flex容器和flex项目来实现灵活的布局。在Bootstrap中，可以使用flex类来应用Flex布局。 要实现水平布局，可以使用以下步骤： 1. 创建一个flex容器：使用`d-flex`类来创建一个flex容器。这个类可以应用在任何父元素上，例如一个div元素。 2. 添加flex项目：在flex容器中添加需要布局的元素作为flex项目。使用`flex-fill`类来使项目填充剩余空间，并且使用`flex-grow-0`类来禁止项目自动扩展。 3. 设置水平对齐方式：使用`justify-content-*`类来设置项目在水平方向上的对齐方式。常用的对齐方式包括`justify-content-start`（左对齐）、`justify-content-center`（居中对齐）和`justify-content-end`（右对齐）。 4. 设置项目间距：使用`gap-*`类来设置项目之间的间距。常用的间距值包括`gap-1`、`gap-2`等。 下面是一个示例代码，展示了如何使用Bootstrap的Flex布局实现水平布局： ```html <div class="d-flex justify-content-between gap-2"> <div class="flex-fill">项目1</div> <div class="flex-fill">项目2</div> <div class="flex-fill">项目3</div> </div> ``` 这个示例代码创建了一个flex容器，并在容器中添加了三个flex项目。这三个项目会自动填充剩余空间，并且通过`justify-content-between`类将它们在水平方向上均匀分布。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值