Bootstrap的弹性盒子布局学习笔记

Bootstrap的弹性盒子布局学习笔记

目录

  • 01-综述
  • 02-利用类d-flex与类d-inline-flex将容器定义为弹性盒子
  • 03-对弹性容器的的元素在水平方向上进行排列顺序设置
  • 03-对弹性容器的的元素在垂直方向上进行排列顺序设置
  • 04-弹性盒子内所有元素在主轴方向上的对齐方式
  • 05-1-弹性盒子内各行在交叉轴方向上的对齐方式
  • 05-2-弹性盒子内多行内容在交叉轴方向上的对齐方式
  • 06-单独设置弹性容器内某个元素在交叉轴上的对齐方式
  • 07-均分容器剩下的空间布局(填满容器布局)
  • 08-设置某个元素尽可能多的占用剩余空间
  • 09-水平方向上的浮动布局(左对齐，右对齐)
  • 10-垂直方向上的浮动布局(顶部对齐和底部对齐)
  • 11-自动换行
  • 12-设置弹性盒子内各元素的顺序

01-综述

Bootstrap的弹性盒子（Flexbox）是一种用于创建灵活的、响应式布局的布局模型。它在Bootstrap中的实现使得构建复杂的网页布局变得更加容易和可控。以下是Bootstrap弹性盒子的主要特性：

  1. 灵活的布局： 弹性盒子模型使得容器内的子元素可以自由伸缩和排列，以适应不同的屏幕尺寸和设备。

  2. 水平和垂直居中： Bootstrap的Flexbox支持轻松实现元素在水平和垂直方向上的居中对齐，无需使用复杂的CSS。

  3. 顺序控制： 您可以通过调整子元素的顺序，轻松地改变它们在容器中的排列顺序，而无需改变HTML结构。

  4. 自适应列宽： 弹性盒子允许容器内的列自适应其宽度，以填充可用的空间，而不需要指定固定的列宽。

  5. 自动换行： 当子元素在容器中无法一行容纳时，它们会自动换行到下一行，而不会溢出或重叠。

  6. 空间分配： 您可以通过调整弹性盒子子元素之间的权重来分配可用空间，从而实现不同元素之间的不同宽度比例。

  7. 对齐和间距控制： 弹性盒子允许您精确控制子元素在容器内的对齐方式和间距。

  8. 嵌套支持： 您可以嵌套多个弹性盒子容器，以创建更复杂的布局。

总之，Bootstrap的弹性盒子模型提供了一种强大的工具，可以简化网页布局的开发，使其更加灵活和响应式。它是构建现代Web界面的重要工具之一，特别适用于需要适应不同屏幕大小和设备的项目。在Bootstrap 4和Bootstrap 5中，Flexbox已经成为默认的布局模型，因此您可以轻松地利用其功能来创建各种各样的布局。

02-利用类d-flex与类d-inline-flex将容器定义为弹性盒子

在Bootstrap的弹性盒子特性中，主要是使用类d-flex与类d-inline-flex装饰容器定义为弹性盒子。

问：Bootstrap的类d-flex与类d-inline-flex有什么区别？
答：

  1. d-flex 类： 这个类用于将元素设置为"flex"显示方式，使元素成为一个弹性容器，内部的子元素可以利用Flexbox布局来排列。这意味着元素将占据整个可用宽度，通常会在容器中占据一行，充满剩余的水平空间。子元素默认会堆叠在一行上，根据弹性容器的规则进行排列。

  2. d-inline-flex 类： 这个类也将元素设置为"flex"显示方式，但与d-flex 不同的是，它会使元素成为内联弹性容器，即元素不会占据整个可用宽度，而是在行内显示。这意味着多个d-inline-flex 元素可以在同一行内并排显示，并且根据内联弹性容器的规则进行子元素的排列。

区别总结：

  • d-flex 会使元素占据整个可用宽度，通常在容器中占据一行，充满剩余的水平空间。
  • d-inline-flex 使元素成为内联弹性容器，元素在同一行内并排显示，不会占据整个可用宽度，根据内联弹性容器的规则进行排列。

您可以根据需要选择这两个类之一，以控制元素的显示方式，并根据布局要求将元素设置为块级或内联元素。

示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>创建弹性盒子</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">定义弹性盒子</h3>
<h4>使用d-flex类创建弹性盒子</h4>
<!--使用d-flex类创建弹性盒子-->
<div class="d-flex p-3 bg-warning text-white"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">在线课程</div><div class="p-2 bg-danger">加入会员</div>
</div><br/>
<h4>使用d-inline-flex类创建弹性盒子</h4>
<!--使用d-inline-flex类创建弹性盒子-->
<div class="d-inline-flex p-3 bg-warning text-white"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">在线课程</div><div class="p-2 bg-danger">加入会员</div>
</div>
</body>
</html>

代码中的“p-3”的意思请访问博文：https://blog.csdn.net/wenhao_ir/article/details/132666590 查看。
运行效果如下图所示：
在这里插入图片描述

03-对弹性容器的的元素在水平方向上进行排列顺序设置

可以使用类flex-row设置弹性容器的元素从左到右进行排列，当然，默认也是从左到右排列。
可以使用类flex-row-reverse设置弹性容器的元素从右到左进行排列。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>水平方向排列</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">水平方向排列</h3>
<h4>使用flex-row（从左侧开始）</h4>
<div class="d-flex flex-row p-3 bg-warning text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div><br/>
<h4>使用flex-row-reverse（从右侧开始）</h4>
<div class="d-flex flex-row-reverse bg-warning p-3 text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-对弹性容器的的元素在垂直方向上进行排列顺序设置

可以使用类flex-column设置弹性容器的元素从上到下进行排列，当然，默认也是从上到下排列。
可以使用类flex-row-reverse设置弹性容器的元素从下到上进行排列。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>垂直方向排列</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3  align="center">垂直方向排列</h3>
<h4>1. flex-column（从上往下）</h4>
<div class="d-flex flex-column p-3 bg-warning text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div><br/>
<h4>2. flex-column-reverse（从下往上）</h4>
<div class="d-flex flex-column-reverse bg-warning p-3 text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

04-弹性盒子内所有元素在主轴方向上的对齐方式

可以利用下面的五个类实现“弹性盒子内所有元素在主轴方向上的对齐方式”：
justify-content-start
justify-content-center
justify-content-end
justify-content-between
justify-content-around
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>弹性盒子内所有元素在主轴方向上的对齐方式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">弹性盒子内所有元素在主轴方向上的对齐方式</h3><h4>justify-content-start：各元素位于弹性容器主轴方向的开头</h4>
<div class="d-flex justify-content-start mb-3 bg-warning text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div><h4>justify-content-center：各元素位于弹性容器主轴方向的中间</h4>
<div class="d-flex justify-content-center mb-3 bg-warning text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div><h4>justify-content-end：各元素位于弹性容器主轴方向的尾部</h4>
<div class="d-flex justify-content-end mb-3 bg-warning text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div><h4>justify-content-between：在弹性容器的主轴方向上各元素之间留有空白</h4>
<div class="d-flex justify-content-between mb-3 bg-warning text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div><h4>justify-content-around：在弹性容器的主轴方向上各元素的前后留有空白</h4>
<div class="d-flex justify-content-around bg-warning text-white"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div>
</div>
</body>
</html>

这个示例代码中的类 mb-3 的详细介绍请参见博文：https://blog.csdn.net/wenhao_ir/article/details/132666590

关于什么叫主轴？
请大家参见博文：https://blog.csdn.net/wenhao_ir/article/details/133357422
运行效果如下图所示：
在这里插入图片描述

05-1-弹性盒子内各行在交叉轴方向上的对齐方式

示例代码如下 ：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>弹性盒子内各行在交叉轴方向上的对齐方式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<style>.box{width: 100%;   /*设置宽度*/height: 70px;   /*设置高度*/}
</style>
<body class="container">
<h3 align="center">弹性盒子内各行在交叉轴方向上的对齐方式 </h3><h4>align-items-start：各行在交叉轴方向上对齐到父容器的顶部</h4>
<div class="d-flex align-items-start bg-warning text-white mb-3 box"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div><h4>align-items-end：各行在交叉轴方向上对齐到父容器的底部</h4>
<div class="d-flex align-items-end bg-warning text-white mb-3 box"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div><h4>align-items-center：各行在交叉轴方向上居中对齐</h4>
<div class="d-flex align-items-center bg-warning text-white mb-3 box"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div><h4>align-items-baseline：各行在交叉轴方向上基线对齐</h4>
<div class="d-flex align-items-baseline bg-warning text-white mb-3 box"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success" style="font-size: x-large;">办公电脑</div><div class="p-2 bg-danger">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success" style="font-size: x-large;">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div><h4>align-items-stretch：各行在在交叉轴方向上进行拉伸处理</h4>
<div class="d-flex align-items-stretch bg-warning text-white mb-3 box"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">办公电脑</div><div class="p-2 bg-danger">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div></body>
</html>

关于什么叫交叉轴？
请大家参见博文：https://blog.csdn.net/wenhao_ir/article/details/133357422

关于基线的概念及子元素在其父容器内基线对齐，请大家参考博文：
https://blog.csdn.net/wenhao_ir/article/details/133343442
运行效果如下：
在这里插入图片描述

05-2-弹性盒子内多行内容在交叉轴方向上的对齐方式

05-1中各个类处理的对象是各行，而05-2中的类处理的对象是连续的多行。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>弹性盒子内多行内容在交叉轴方向上的对齐方式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container"><h3 align="center">弹性盒子内多行内容在交叉轴方向上的对齐方式</h3>
<h4  align="center">align-content-start</h4>
<div class="d-flex align-content-start bg-warning text-white flex-wrap mb-4" style="height: 150px;"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4  align="center">align-content-center</h4>
<div class="d-flex align-content-center bg-warning text-white flex-wrap mb-4" style="height: 150px;"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4  align="center">align-content-end</h4>
<div class="d-flex align-content-end bg-warning text-white flex-wrap" style="height: 150px;"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div>
</body
</html>

运行效果如下图所示：
在这里插入图片描述
我们把这个示例中的类换成5-1中的各个类，即以每行为处理单位的类，代码如下：
我们把这个示例中的类换成5-1中的各个类，即以每行为处理单位的类，代码如下：
我们把这个示例中的类换成5-1中的各个类，即以每行为处理单位的类，代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>弹性盒子内每一行内容在交叉轴方向上的对齐方式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head><body class="container"><h3 align="center">弹性盒子内每一行内容在交叉轴方向上的对齐方式</h3>
<h4  align="center">align-items-start</h4>
<div class="d-flex align-items-start bg-warning text-white flex-wrap mb-4" style="height: 150px;"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4  align="center">align-items-center</h4>
<div class="d-flex align-items-center bg-warning text-white flex-wrap mb-4" style="height: 150px;"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div>
<h4  align="center">align-items-end</h4>
<div class="d-flex align-items-end bg-warning text-white flex-wrap" style="height: 150px;"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-primary">玩具乐器</div><div class="p-2 bg-success">汽车用品</div><div class="p-2 bg-danger">特产食品</div><div class="p-2 bg-primary">图书文具</div><div class="p-2 bg-success">童装内衣</div><div class="p-2 bg-danger">鲜花礼品</div>
</div>
</body
</html>

运行效果如下：
在这里插入图片描述

06-单独设置弹性容器内某个元素在交叉轴上的对齐方式

在第05点中，设置的是整个容器内所有元素在交叉上的对齐方式。
可以利用下面的类实现设置弹性容器内某个元素在交叉上的对齐方式。
align-self-start
align-self-center
align-self-end
align-self-baseline
align-self-stretch
要想使用好上面这几个自动对齐的类，必须要理解什么是交叉轴。交叉轴的概念请参考我的另一篇博文：https://blog.csdn.net/wenhao_ir/article/details/133357422
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>单独设置弹性容器内某个元素在交叉轴上的对齐方式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<style>.box{width: 100%;   /*设置宽度*/height: 70px;   /*设置高度*/}
</style>
<body class="container">
<h3 align="center">单独设置弹性容器内某个元素在交叉轴上的对齐方式</h3><h4>align-self-start：第2个子元素尽可能靠近交叉轴的起始位置</h4>
<div class="d-flex bg-warning text-white mb-3 box"><div class="px-2 bg-primary">家用电器</div><div class="px-2 bg-success align-self-start">办公电脑</div><div class="px-2 bg-danger">男装女装</div>
</div><h4>align-self-center：第2个子元素在交叉轴上居中对齐</h4>
<div class="d-flex bg-warning text-white mb-3 box"><div class="px-2 bg-primary">家用电器</div><div class="px-2 bg-success align-self-center">办公电脑</div><div class="px-2 bg-danger">男装女装</div>
</div><h4>align-self-end：第2个子元素尽可能靠近交叉轴的结束位置</h4>
<div class="d-flex bg-warning text-white mb-3 box"><div class="px-2 bg-primary">家用电器</div><div class="px-2 bg-success align-self-end">办公电脑</div><div class="px-2 bg-danger">男装女装</div>
</div><h4>align-self-baseline：第2个和第3个子元素按交叉轴的基线对齐</h4>
<div class="d-flex bg-warning text-white mb-3 box"><div class="px-2 bg-primary">家用电器</div><div class="px-2 bg-success align-self-baseline" style="font-size: x-large;">办公电脑</div><div class="px-2 bg-danger align-self-baseline">男装女装</div>
</div><h4>align-self-end：第2个子元素在交叉轴方向上进行拉伸处理</h4>
<div class="d-flex bg-warning text-white mb-3 box"><div class="px-2 bg-primary">家用电器</div><div class="px-2 bg-success align-self-stretch">办公电脑</div><div class="px-2 bg-danger">男装女装</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

07-均分容器剩下的空间布局(填满容器布局)

可以使用类flex-fill实现均分容器剩下的空间布局(填满容器布局)
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>均分容器剩下的空间布局(填满容器布局)</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<h3 align="center">均分容器剩下的空间布局(填满容器布局)</h3>
<div class="d-flex bg-warning text-white"><div class="flex-fill p-2 bg-primary ">首页</div><div class="flex-fill p-2 bg-success">经典的在线课程</div><div class="flex-fill p-2 bg-danger">会员中心</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

08-设置某个元素尽可能多的占用剩余空间

可以利用类flex-grow-1与类w-100实现设置某个元素尽可能多的占用剩余空间。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>某个元素尽可能多的占用剩余空间</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h5 align="center">flex-grow-1：某个元素占用所有的剩余空间</h5>
<div class="d-flex bg-warning text-white mb-4"><div class="p-2 flex-grow-1 bg-primary">家用电器</div><div class="p-2 bg-success">电脑办公</div><div class="p-2 bg-danger">男装女装</div>
</div>
<h5 align="center">w-100：设置元素的宽度占用容器的整个可用宽度</h5>
<div class="d-flex bg-warning text-white"><div class="p-2 w-100 bg-primary">家用电器</div><div class="p-2 bg-success">电脑办公</div><div class="p-2 w-100 bg-danger">男装女装</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

09-水平方向上的浮动布局(左对齐，右对齐)

可以利用类mr-auto和类ml-auto分别实现容器内元素的左对齐和右对齐。
类mr-auto介绍如下：
在Bootstrap中，mr-auto是一个类（class），用于调整水平对齐方式。具体地说，mr-auto类被应用于一个元素（通常是一个元素的CSS类），以将该元素的右边距（margin-right）设置为自动（auto），从而使它右边的元素在其容器内水平右对齐。

这通常用于在Bootstrap的网格系统中，将某个元素右边的元素推送到其容器的右侧，以实现水平对齐效果。
类ml-auto的介绍：略。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>水平方向浮动布局</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 class="mb-3" align="center">水平方向浮动布局</h3><h5 align="center">未设置某个元素的左右边距为自动</h5>
<div class="d-flex bg-warning text-white mb-3"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">电脑办公</div><div class="p-2 bg-danger">男装女装</div>
</div><h5 align="center">设置第1个元素的右边距为自动,<br/>这样其右边的元素会被推到右边，<br/>从而实现其右边的元素右对齐。</h5>
<div class="d-flex bg-warning text-white mb-3"><div class="mr-auto p-2 bg-primary">家用电器</div><div class="p-2 bg-success">电脑办公</div><div class="p-2 bg-danger">男装女装</div>
</div><h5 align="center">设置第3个元素的左边距为自动,<br/>这样其左边的元素会被推到左边，<br/>从而实现其左边的元素左对齐。</h5>
<div class="d-flex bg-warning text-white mb-3"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">电脑办公</div><div class="ml-auto p-2 bg-danger">男装女装</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

10-垂直方向上的浮动布局(顶部对齐和底部对齐)

可以利用类mb-auto和mt-auto实现别的元素的底部对齐和顶部对齐，mb为margin-bottom的缩写，mt为margin-top的缩定。
理解了第9个中的mr-atuo,其实也就理解这两个了，这里就不再赘述。
代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>垂直方向浮动布局</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3  class="mb-4" align="center">垂直方向浮动布局</h3><h5 align="center">设置第1个元素的下边距为自动,<br/>这样其下方的元素会被推到底部，<br/>从而实现其下方元素的底对齐。</h5>
<div class="d-flex align-items-end flex-column bg-warning text-white mb-4" style="height: 200px;"><div class="mb-auto p-2 bg-primary">家用电器</div><div class="p-2 bg-success">电脑办公</div><div class="p-2 bg-success">母婴用品</div><div class="p-2 bg-danger">男装女装</div>
</div><h5 align="center">设置第4个元素的上边距为自动,<br/>这样其上方的元素会被推到顶部，<br/>从而实现其上方元素的顶对齐。</h5>
<div class="d-flex align-items-end flex-column bg-warning text-white" style="height: 200px;"><div class="p-2 bg-primary">家用电器</div><div class="p-2 bg-success">电脑办公</div><div class="p-2 bg-success">母婴用品</div><div class="mt-auto p-2 bg-danger">男装女装</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

11-自动换行

可以利用类flex-wrap和类flex-wrap-reverse实现自动换行。
对这两个类介绍如下：
Bootstrap的类 flex-wrap 是用于控制 Flexbox 布局中项目如何在容器中换行的类。Flexbox是一种弹性布局模型，允许容器中的项目在不同方向上自动调整它们的位置以适应可用空间。flex-wrap 类有三个可能的值：

  1. flex-nowrap（默认值）：项目不会换行，它们会尽可能地挤在一行内，即使超出了容器的边界。

  2. flex-wrap：项目会根据需要换行，如果容器的宽度不足以容纳所有项目，那么一部分项目会自动换行到下一行。

  3. flex-wrap-reverse：与 flex-wrap 类似，但是项目会从容器的底部开始向上换行。

这些类通常与 Bootstrap 的网格系统一起使用，以控制列在不同屏幕尺寸下的布局方式。例如，你可以使用 flex-nowrap 类来确保在较小的屏幕上列不会换行，而在较大的屏幕上可以使用 flex-wrap 类来允许列自动换行以适应更大的屏幕宽度。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>自动换行的弹性布局</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 class="mb-4" align="center">自动换行的弹性布局</h3><h5 align="center">无自动换行效果</h5>
<div class="d-flex bg-warning text-white mb-4" ><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-danger">潮流T恤</div><div class="p-2 bg-danger">时尚女鞋</div><div class="p-2 bg-danger">男士外套</div><div class="p-2 bg-danger">新款男鞋</div><div class="p-2 bg-danger">司法拍卖</div>
</div><h5 align="center">flex-wrap：自动换行效果</h5>
<div class="d-flex bg-warning text-white mb-4 flex-wrap " ><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-danger">潮流T恤</div><div class="p-2 bg-danger">时尚女鞋</div><div class="p-2 bg-danger">男士外套</div><div class="p-2 bg-danger">新款男鞋</div><div class="p-2 bg-danger">司法拍卖</div>
</div><h5 align="center">flex-wrap-reverse：自动换行效果(从底部开始换行)</h5>
<div class="d-flex bg-warning text-white mb-4 flex-wrap-reverse"><div class="p-2 bg-primary">首页</div><div class="p-2 bg-success">家用电器</div><div class="p-2 bg-danger">办公电脑</div><div class="p-2 bg-primary">男装女装</div><div class="p-2 bg-success">生鲜酒品</div><div class="p-2 bg-danger">箱包钟表</div><div class="p-2 bg-danger">潮流T恤</div><div class="p-2 bg-danger">时尚女鞋</div><div class="p-2 bg-danger">男士外套</div><div class="p-2 bg-danger">新款男鞋</div><div class="p-2 bg-danger">司法拍卖</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

12-设置弹性盒子内各元素的顺序

可以利用类 order-x实现弹性盒子内各元素的顺序设置。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>设置弹性盒子内各元素的顺序</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置弹性盒子内各元素的顺序</h3>
<div class="d-flex bg-warning text-white"><div class="order-3 p-2 bg-primary">首页</div><div class="order-2 p-2 bg-success">在线课程</div><div class="order-1 p-2 bg-danger">会员中心</div>
</div>
<div class="d-flex bg-warning text-white"><div class="order-1 p-2 bg-primary">首页</div><div class="order-2 p-2 bg-success">在线课程</div><div class="order-3 p-2 bg-danger">会员中心</div>
</div>
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

C#生成自定义海报

C#生成自定义海报

安装包 SixLabors.ImageSharp.Drawing 2.0 需要的字体&#xff1a;宋体和微软雅黑 商用的需要授权如果商业使用可以使用方正书宋、方正黑体&#xff0c;他们可以免费商用 方正官网 代码 using SixLabors.Fonts; using SixLabors.ImageSharp; using SixLabors.ImageSharp.Draw…
阅读更多...
redis-设置从节点

redis-设置从节点

节点结构 节点配置文件 主节点 不变 6380节点 port 6380 slaveof 127.0.0.1 63796381节点 port 6381 slaveof 127.0.0.1 6380启动 指定配置文件的方式启动 D:\jiqun\redis\Redis-6380>redis-server.exe redis.windows.conf启动时&#xff0c;会触发同步数据命令 主节点…
阅读更多...
安装ipfs-swarm-key-gen

安装ipfs-swarm-key-gen

安装ipfs-swarm-key-gen Linux安装go解释器安装ipfs-swarm-key-gen Linux安装go解释器 https://blog.csdn.net/omaidb/article/details/133180749 安装ipfs-swarm-key-gen # 编译ipfs-swarm-key-gen二进制文件 go get -u github.com/Kubuxu/go-ipfs-swarm-key-gen/ipfs-swarm…
阅读更多...
insightface实战：画出嘴巴和眼睛的mask

insightface实战：画出嘴巴和眼睛的mask

今天的目标是将人脸的嘴巴和眼睛区域抠出来&#xff0c;使用insightface简单实现出来&#xff0c;为了方便批量使用多进程跑数据&#xff0c;使用多进程的方式&#xff0c;下面是代码&#xff1a; import os import cv2 from multiprocessing import Pool import numpy as n…
阅读更多...
Visual Studio 2019 C# winform CefSharp 中播放视频及全屏播放

Visual Studio 2019 C# winform CefSharp 中播放视频及全屏播放

VS C# winform CefSharp 浏览器控件&#xff0c;默认不支持视频播放&#xff0c;好在有大佬魔改了dll&#xff0c;支持流媒体视频播放。虽然找了很久&#xff0c;好歹还是找到了一个版本100.0.230的dll&#xff08;资源放在文末&#xff09; 首先创建一个项目 第二、引入CefSha…
阅读更多...
排序：归并（Merge）排序算法分析

排序：归并（Merge）排序算法分析

1.归并操作 归并:把两个或多个已经有序的序列合并成一个。 2路归并&#xff1a;二合一k路归并&#xff1a;k合一结论:m路归并&#xff0c;每选出一个元素需要对比关键字m-1次。 2.算法思想 核心操作:把数组内的两个有序序列归并为一个。 例如&#xff1a; 3.代码实现 将…
阅读更多...
什么是大数据可视化

什么是大数据可视化

在互联网高速发展的当今&#xff0c;5G的兴起加速了数据传输的速度&#xff1b;与此同时&#xff0c;智能物联网如智慧家电、可穿戴设备等产品的火热&#xff0c;进一步扩充了数据获取的渠道。不仅仅在网页上、手机和电脑应用上以秒计产生海量数据&#xff0c;智能设备同时也在…
阅读更多...
04. 人工智能核心基础 - 导论（3）

04. 人工智能核心基础 - 导论（3）

文章目录 人工智能和其他学科的关系为什么学习人工智能怎么学好人工智能&#xff1f;一些问题 Hi&#xff0c;你好。我是茶桁。 基于上一节课咱们的整体强度有点大&#xff0c;而且咱们马上也要进入高强度内容了&#xff0c;那么这一篇咱们就稍微水一篇吧。来聊聊天&#xff0…
阅读更多...
Nginx环境搭建、负载均衡测试

Nginx环境搭建、负载均衡测试

Nginx环境搭建、负载均衡测试 系统环境&#xff1a; win10&#xff0c;IDEA2020&#xff0c;JDK8 一、nginx环境搭建 1.ngxin下载 Nginx官网下载&#xff1a; http://nginx.org/en/download.html Nginx有三种版本&#xff0c;分别是Mainline version&#xff08;开发版&…
阅读更多...
怒刷LeetCode的第19天（Java版）

怒刷LeetCode的第19天（Java版）

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;遍历一次数组 方法二&#xff1a;贪心算法 方法三&#xff1a;双指针 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;动态规划 方法二&#xff1a;贪婪算法 方法三&#xff1a;正则表达式 第…
阅读更多...
玄子Share 设计模式 GOF 全23种 + 七大设计原则

玄子Share 设计模式 GOF 全23种 + 七大设计原则

玄子Share 设计模式 GOF 全23种 七大设计原则 前言&#xff1a; 此文主要内容为 面向对象七大设计原则&#xff08;OOD Principle&#xff09;GOF&#xff08;Gang Of Four&#xff09;23种设计模式拓展的两个设计模式 简单工厂模式&#xff08;Simple Factory Pattern&#x…
阅读更多...
基于Java实现的仓库管理系统设计与实现(源码+lw+部署文档+讲解等)

基于Java实现的仓库管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言功能介绍&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导…
阅读更多...
解密PDF密码

解密PDF密码

PDF文件有两种密码&#xff0c;一个打开密码、一个限制编辑密码&#xff0c;因为PDF文件设置了密码&#xff0c;那么打开、编辑PDF文件就会受到限制。忘记了PDF密码该如何解密&#xff1f; PDF和office一样&#xff0c;可以对文件进行加密&#xff0c;但是没有提供恢复密码的功…
阅读更多...
智能驾驶、智能家居、智能工业中的 AI 关键基础设施，半导体厂商恩智浦的角色是什么？

智能驾驶、智能家居、智能工业中的 AI 关键基础设施，半导体厂商恩智浦的角色是什么？

我们来看一条七年前的真实新闻报道&#xff0c;2016 年《福布斯》在报道中提到“2020 年会有 1000 万台的自动驾驶汽车”。然而 2023 年的现在&#xff0c;真正实现 L4 级别自动驾驶的汽车&#xff0c;仍然远远没有达到这个预测的数量。 另一边&#xff0c;数据显示&#xff0c…
阅读更多...
【数据结构】排序算法（一）—＞插入排序、希尔排序、选择排序、堆排序

【数据结构】排序算法（一）—＞插入排序、希尔排序、选择排序、堆排序

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.直接插入排序 2.希尔排序 3.直接选择排…
阅读更多...
使用不同尺寸的传感器拍照时，怎么保证拍出同样视场范围的照片？

使用不同尺寸的传感器拍照时，怎么保证拍出同样视场范围的照片？

1、问题背景 使用竞品机做图像效果对比时&#xff0c;我们通常都会要求拍摄的照片要视场范围一致&#xff0c;这样才具有可比性。之前我会考虑用同样焦距、同样分辨率的设备去拍照对比就可以了&#xff0c;觉得相机的视场范围只由镜头焦距来决定。 但如果对于不同尺寸的传感器…
阅读更多...
使用 Matter-SDK 快速搭建 Matter 环境 (Linux)

使用 Matter-SDK 快速搭建 Matter 环境 (Linux)

Matter 作为一个统一的智能家居互联协议&#xff0c;凭借其高兼容性的特点&#xff0c;正逐渐打破各个智能家居之间的壁垒。乐鑫作为在 Matter 项目发布之初的早期成员&#xff0c;提供了一套开源、完整、易用的 Matter-SDK。 乐鑫的 Matter-SDK 是建立在开源 Matter-SDK 之上…
阅读更多...
IOTE 2023盛况回顾，美格智能聚连接之力促数字新生长

IOTE 2023盛况回顾，美格智能聚连接之力促数字新生长

9月20~22日&#xff0c;IOTE国际物联网展深圳站在深圳国际会展中心正式召开。本届展会以“IoT构建数字经济底座”为主题&#xff0c;聚焦物联网技术助推数字经济发展的核心动力。美格智能携前沿技术成果亮相展会&#xff0c;与参展观众深入交流。 展会上&#xff0c;美格智能带…
阅读更多...
大型企业网如何部署NAT实现需求

大型企业网如何部署NAT实现需求

1.企业中堕胎电脑如何共享上网&#xff1f; 2.NAT地址转换原理讲解&#xff1b; 3.企业机房如何用NAT让服务器更安全&#xff1f; - NAT - 网络地址转换 - 什么式网络地址 IP地址 -通信时候的设备标识 - 为什么要把IP地址做转换呢&#xff1f; -- 公网IP&#xff…
阅读更多...
什么是推挽电路？

什么是推挽电路？

推挽电路原理&#xff1a; 可以简单理解为推和拉&#xff1b; 此电路总共用到两个元器件&#xff0c;对应图中的Q1----NPN三极管&#xff0c;Q2----PNP三极管&#xff0c;两个电阻R1和R2起到限流的作用&#xff1b;两个三极管的中间对应信号的输出。 下面就举例说明是如何工作的…
阅读更多...
最新文章

Copyright @ 2022~2023