Bootstrap系列之Flex布局

已于 2023-02-25 11:02:57 修改
阅读量2.2k 收藏 6
点赞数 2
分类专栏： Bootstrap 文章标签： bootstrap css 前端
于 2023-02-25 11:00:56 首次发布
张砚博
本文链接：https://blog.csdn.net/qq_47272950/article/details/129212446
版权

文章目录

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

码上流星&洒下星辰
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
flex布局项目——携程在线首页（原生轮播图效果）.zip
04-16
携程在线首页。适合零基础入门的人使用的demo，对布局这块有不错的参考价值！采用的是flex布局使用了原生js实现的tab栏切换等。自己可以通过swiper插件或者TouchSlide插件以及bootstrap框架来替换！可以把这个demo进行更改。
尚硅谷-bootstrap
07-15
本套视频旨在向学员全面剖析css3中的新增的各类属性与方案。深入了解预处理less，并从源码的角度解读bootstrap相关实现。CSS3是最新的 CSS 级别,对CSS2.1中的边框、背景、文本、字体等做了扩展。新增2D、3D变换,过渡,动画。新增Flex、响应式、多列布局方案。Less 是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。bootstrap是一套简洁、直观、强悍的前端开发框架，它可以让web开发更迅速、简单。
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
最新发布
Luo3255069063的博客
03-12 1518
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
Bootstrap 4 Flex（弹性）布局
12-13
Bootstrap 4 Flex（弹性）布局 Bootstrap 4 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类: 实例 Flex item 1 Flex item 2 Flex item 3 水平方向 .flex-row 可以设置弹性子元素水
bootstrap-4-grid：Bootstrap 4网格系统和布局实用程序
01-31
Bootstrap 4网格系统（Flex） Bootstrap v4.4.1网格系统和布局实用程序。 包含什么 为什么？ 这是Bootstrap 4当前不提供的功能： 如果您不需要上述任何一项，那么Bootstrap 4已经包含了带有捆绑包的仅网格版本。 如何使用 Sass和CSS文件已准备好在您的项目中使用。 CSS 非常简单。 只需获取css/grid.min.css或css/grid.css并将其添加到您的项目中即可。 萨斯 您将需要将整个scss文件夹内容包括到您的项目中。 然后，只需将grid.scss导入到项目的sass文件中即可。 NPM npm install bootstrap-4-grid 纱 yarn add bootstrap-4-grid 浏览器支持 我们使用为css文件添加前缀。 默认情况下，支持每个主要浏览器的最后2个版本。 要更改此设置，请遵循以下自定义说明。 注意： Sass文件不包含任何浏览器特定的前缀。 如果将它们包括在项目中，则将需要使用自己的post CSS工具为不同的浏览器添加前缀。 如果您使用的是 ，则默认情况下会包含自动auto
全面解析Bootstrap排版使用方法（标题）
11-23
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： <!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootstrap标题四</h4> <h5>Bootstrap标题五</h5> <h6>Bootstrap标题六</h6> <!--Bootstrap中让非标题元素和标题使用相同的样式--> <div class="
CSS通用样式2——Flex布局
qq_66198247的博客
10-18 2553
使用display通用类d-flex或类创建一个flexbox容器，并将子元素转换为flex属性。其中，d-flex类设置对象为弹性伸缩盒子，d-inline-flex类设置对象为内联块级弹性伸缩盒子。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器( flexcontainer)，简称"容器"。
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 3945
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
快速掌握flex弹性盒子布局
qq_39055970的博客
06-12 5572
flex弹性盒子布局前言详解flex布局写一个简单flex布局的步骤1、设置flex容器（弹性盒子）2、设置项目的大小比例（1）默认占满整行的写法（项目使用flex-grow属性）（3）默认最多占满整行的写法（项目使用width属性）3、换行处理（响应式布局需要）（1）设置容器换行（flex-wrap）（2）设置项目宽度（width百分比）4、调整容器内项目间距5、盒子模型所有属性（1）容器属性（2）项目属性 前言 网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 di
Bootstrap Flex（弹性）布局
书香水墨
07-26 5501
一、Bootstrap Flex（弹性）布局 1.1 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。 注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。 以下...
bootstrap响应式布局
03-19
1. CSS 相邻兄弟选择器 + 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。 2. 手机字体图标：`content: '\e958';` 电话字体图标：`content: '\e942';` 3. bootstrap最外层伸缩容器：`class="container"` 4. bootstrap伸缩布局并居中：`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`：在元素上存放数据,返回jQuery对象。 例如：在index界面中 ```javascript <div class="carousel-item active" data-sm-img="images/slide_01_900x410.jpg" data-lg-img="images/slide_01_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_02_900x410.jpg" data-lg-img="images/slide_02_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_03_900x410.jpg" data-lg-img="images/slide_03_2000x410.jpg"></div> ``` 在 js中，可以通过 ```javascript $('.carousel-item').data('lg-img') ``` 获取路径值。 6. bootstrap中圆角`rounded-circle` 7. 可以使用`order-*`调整显示顺序 8. 伸缩布局两步走`container+row` ```javascript <div class="container"> <div class="row"> *** </div> </div> ``` 9. 可以利用`offset`设置偏移量调整位置 10. 将jQuery对象转换为js对象可以直接通过下标取 11. 轮播图可以通过`.carousel('prev')`和`.carousel('next')`触发前后滑动事件 12. jQuery中缩小元素查找范围 ```javascript let $ul = $("#lk_product .nav"); let $allLis = $(".nav-item", $ul); ```
第四章 Bootstrap布局组件
mlfc0422的博客
12-19 1470
创建基本的输入组容器。：用于放置在输入组前面的元素（通常是添加在输入框之前的元素）。：用于放置在输入组后面的元素（通常是添加在输入框之后的元素）。：用于创建一个基本的列表组容器。
bootstrapV4.6.0之flex布局与float布局：对比
草巾冒小子的博客
02-07 348
bootstrapV4.6.0之flex布局与float布局：对比 flex布局：https://v4.bootcss.com/docs/utilities/flex/ float浮动布局：https://v4.bootcss.com/docs/utilities/float/
在bootstrap中，能不能对同一个容器，既使用类row进行网格设计，又使用类d-flex实现弹性盒子的性能？
昊虹AI笔记
11-19 242
在bootstrap中，能不能对同一个容器，既使用类row进行网格设计，又使用类d-flex实现弹性盒子的性能？
Bootstrap 5-Flex（弹性盒布局）
m0_73839298的博客
10-08 667
• align-content-stretch（平均分布，但会拉伸高度）• justify-content-between（最左，居中，最右）• align-content-between（平均分布，但高度更高）• align-items-stretch（平均分布，但会拉伸高度）• align-self-stretch（默认，顶部，但会拉伸高度）• justify-content-around（左，居中，右）• align-content-start（默认，顶部）
学习Bootstrap 5的第十六天
m0_74293254的博客
10-30 216
Flex（弹性）布局Flex（弹性）布局弹性盒子(flexbox)Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。弹性的框布局模块，可以更轻松地设计弹性响应式布局结构，而无需使用浮动或定位。注意：IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持，请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本，团队仍然支持它进行关键错误修复和文档更改。
WEB前端网页设计-Bootstrap5 Flex（弹性）布局
君逍遥o
05-02 506
Bootstrap5 通过 flex 类来控制页面的布局。
d-flex 占满格子
08-17
### 回答1： 要让一个元素占满其所在容器的全部空间，可以使用 CSS 的 flex 布局。具体地，将容器的 display 属性设置为 flex，然后将该元素的 flex 属性设置为 1。例如： HTML 代码： ``` <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item item3">Item 3</div> </div> ``` CSS 代码： ``` .container { display: flex; height: 300px; } .item { flex: 1; border: 1px solid black; } .item3 { background-color: yellow; } ``` 在上面的代码中，容器的高度被设置为 300 像素，三个子元素都被设置为 flex: 1。其中第三个元素还额外设置了背景色为黄色。效果如下图所示： ![d-flex 占满格子](https://img-blog.csdnimg.cn/20210604095447754.png) ### 回答2： 在Bootstrap中，d-flex是用于创建一个flex容器的类名。它可以将一个元素设置为flex容器，并使用flexbox布局。当使用d-flex类时，元素的display属性会被设置为flex，使其成为一个flex容器。 要使d-flex占满格子，可以使用其他的Bootstrap类名来设置元素的宽度。例如，可以使用w-100类来设置元素的宽度为100%，使其占满父容器的格子。可以将d-flex类名与w-100类名相结合，以实现d-flex占满格子的效果。 示例代码如下： <div class="d-flex w-100"> 内容 </div> 在这个示例中，我们将一个div元素设置为flex容器，并且使用了w-100类来设置其宽度为100%。这样，这个d-flex的容器就会占满其父容器的格子。 除了w-100类，还可以使用其他的Bootstrap类名来设置元素的宽度，如w-50、w-75等。根据具体的需求，可以选择不同的类名来实现所需的布局效果。 总结起来，要使d-flex占满格子，可以使用d-flex类名将元素设置为flex容器，并使用其他的Bootstrap类名来设置元素的宽度，以实现所需的布局效果。 ### 回答3： d-flex 是 Bootstrap 框架中的一个类，用于设置元素的弹性盒子布局。当我们需要让一个元素占满其所在格子时，可以使用 d-flex 类。 首先，通过在 HTML 元素的 class 属性中添加 d-flex 类，我们可以将该元素设为弹性盒子。接着，我们可以使用其他弹性盒子属性来控制元素的尺寸和位置。 为了让该元素占满其所在格子，可以结合使用 justify-content 和 align-items 属性来实现。 当元素所在格子是父容器的子元素时，设置父容器的 class 为 d-flex，并添加 justify-content-center 和 align-items-center 类。justify-content-center 属性将元素水平居中，align-items-center 属性将元素垂直居中。 如果元素不是父容器的子元素，可以使用容器的 class 添加 d-flex，并在元素的 class 中添加 align-self-stretch 属性。align-self-stretch 属性将元素自动拉伸至与父容器的高度相同，使其占满格子。 综上所述，通过使用 d-flex 类和相应的弹性盒子属性，我们可以轻松实现让元素占满格子的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码上流星&洒下星辰

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

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

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

打赏作者

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

抵扣说明：

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

余额充值