Bootstrap 4 Flex（弹性）布局

最新推荐文章于 2023-02-25 11:00:56 发布
最新推荐文章于 2023-02-25 11:00:56 发布
阅读量384 收藏
点赞数
文章标签： 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 606
布局的方式 表格布局>>>div+css实现的样式布局>>>>响应式布局>>>Flex弹性布局
Bootstrap4 Flex（弹性）布局
shengyin714959的博客
08-19 184
Bootstrap4 通过 flex 类来控制页面的布局。
基于BootStrap 4.x 中的Flex 实现各种布局
weixin_30402343的博客
11-24 240
各种布局，总有一款适合你 基于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样式之flex样式
weixin_45884768的博客
03-17 2418
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=...
【补丁】bootStrap4下d-flex、flex-grow-1 无法获取理想宽度的解决方法！
hijk7的博客
10-22 112
【补丁】bootStrap4下d-flex、flex-grow-1 无法获取理想宽度的解决方法！
Bootstrap系列之Flex布局
Debug的博客
02-25 2893
以上就是今天要讲的内容，本文仅仅简单介绍了bootstrap中flex的使用，并记录了常用的一些排列方式，如果这篇文章不足以满足需求，可以去官方文档查看详情。
class-2 Linux 入门
weixin_34241036的博客
07-24 263
目录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....
h5常用点整理 class-4
qq_40410916的博客
04-23 211
HTML 表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 HTML 表格和边框属性 如果不定义边框属性，表格将不显示边框。有时这很有用，但...
flex弹性布局；justify-content:space-between；最后一行左对齐
m0_56168677的博客
01-02 2288
flex弹性布局;justify-content:space-between；最后一行左对齐
P2.CSS的三种基础选择器
猪猪的博客
08-04 439
CSS选择器 作用：选择页面上的某一个或者某一类元素（定位作用） 基本选择器： 标签选择器 类选择器（class） id选择器 1.标签选择器 格式为： <style> 标签元素{ /*标签选择器，会选择到页面上的所有的标签元素*/ color:red; } </style> 2.类选择器 格式： <style> .class的名称{} 好
bootstrap4简写的class以m-开头和p-开头的类
Gyd＆01
11-22 766
影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。 bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。 一、影响距离大小的值有 0,1,2,3,4,5,auto (1)、...
快速掌握flex弹性盒子布局
qq_39055970的博客
06-12 5645
flex弹性盒子布局前言详解flex布局写一个简单flex布局的步骤1、设置flex容器（弹性盒子）2、设置项目的大小比例（1）默认占满整行的写法（项目使用flex-grow属性）（3）默认最多占满整行的写法（项目使用width属性）3、换行处理（响应式布局需要）（1）设置容器换行（flex-wrap）（2）设置项目宽度（width百分比）4、调整容器内项目间距5、盒子模型所有属性（1）容器属性（2）项目属性 前言 网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 di
CSS通用样式2——Flex布局
qq_66198247的博客
10-18 2887
使用display通用类d-flex或类创建一个flexbox容器，并将子元素转换为flex属性。其中，d-flex类设置对象为弹性伸缩盒子，d-inline-flex类设置对象为内联块级弹性伸缩盒子。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器( flexcontainer)，简称"容器"。
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 4254
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
bootstrap flex 水平布局
最新发布
04-10
Flex布局是一种基于弹性盒子模型的布局方式，通过使用flex容器和flex项目来实现灵活的布局。在Bootstrap中，可以使用flex类来应用Flex布局。 要实现水平布局，可以使用以下步骤： 1. 创建一个flex容器：使用`d-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值