Bootstrap5 指定子元素对齐

于 2024-08-31 19:20:27 发布
阅读量72 收藏
点赞数
文章标签： bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141756752
版权

https://v5.bootcss.com/docs/utilities/flex/#align-self

可以使用.align-self-*类设置指定子元素在交叉轴的对齐方式（从y轴开始，如果是flex-direction: column，则是x轴），它允许单个项目具有与其它项目不一样的对齐方式。*号允许的取值为：

  • start
  • end
  • center
  • baseline
  • stretch（默认值）

例如，让第2个盒子在交叉轴方向居中对齐：
在这里插入图片描述

在这里插入图片描述

让第1个盒子底部对齐，第2个盒子中间对齐：
在这里插入图片描述

在这里插入图片描述

听海边涛声
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap系列之Flex布局
Debug的博客
02-25 2815
以上就是今天要讲的内容，本文仅仅简单介绍了bootstrap中flex的使用，并记录了常用的一些排列方式，如果这篇文章不足以满足需求，可以去官方文档查看详情。
Bootstrap 4 （四）
weixin_55685975的博客
04-26 379
Bootstrap 4 模态框 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。 尺寸类放在 <div>元素的 .modal-dialog 类后 <!-- 按钮：用于打开模态框 --> <button type="button" class="btn btn-primary"
Bootstrap5 Flex（弹性）布局
T0620514的博客
12-19 291
Bootstrap5 Flex（弹性）布局
Bootstrap5学习笔记
李世铭的博客
05-03 1463
Bootstrap 教程 | 菜鸟教程 Bootstrap5支持主要的最新版本浏览器，不支持InternetExplorer11及以下版本。Bootstrap5不再依赖jQuery，使用了原生的JavaScript。两个容器类 .container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。 Bootstrap提供了一些间距...
学习Bootstrap 5的第十六天
m0_74293254的博客
10-30 288
Flex（弹性）布局Flex（弹性）布局弹性盒子(flexbox)Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。弹性的框布局模块，可以更轻松地设计弹性响应式布局结构，而无需使用浮动或定位。注意：IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持，请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本，团队仍然支持它进行关键错误修复和文档更改。
Bootstrap 5 保姆级教程（十四）：Flex
Flag少侠的博客
04-21 1121
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。important;使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 4240
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
子元素如何在父元素中居中（必看）
yzkdcsdn的博客
11-26 773
子元素如何在父元素中居中定位+margin:auto定位+margin-left+margin-top定位+transfrom（子元素未知宽高）弹性盒flex+margin: auto 定位+margin:auto 1、给父元素设置绝对定位 position：relative 子元素相对定位 position：absolute 2、left:0 top:0 right:0 ; bottom:0 ; margin:auto 定位+margin-left+margin-top 1、给父元素设置绝对定位
bootstrap4框架学习
810cheng
10-25 243
bootstrap知识学习
详解css使既有浮动又有左右margin的多个元素两端对其
09-22
在CSS布局中，实现多个元素两端对齐是一个常见的设计需求，特别是在固定宽度的布局中。本文将详细介绍如何使用CSS使既有浮动又有左右边距的多个元素实现两端对齐的效果，特别针对在使用float布局而非CSS3的flex布局...
bootstrap4--模态框、提示框、弹出框、Flex布局、多媒体对象
zxn200125的博客
12-22 3135
bootstrap中模态框、提示框、弹出框、Flex布局、多媒体对象介绍与示例
JavaScript代码片段
weixin_66128399的博客
08-26 2451
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
Window Performance API
Bruce__taotao的博客
08-28 1416
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 405
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
HTML ＜template＞ 标签的基本技巧
最新发布
ufrontend的博客
08-30 470
HTML中的标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。在本文中，我们将探讨有效使用 标记的 10 个基本技巧，帮助你在项目中充分发挥其潜力。1. 了解 标记的基础知识 标记是一个 HTML 元素，它包含页面加载时不会渲染的客户端内容。
前端的面试题
本人小可爱
08-30 126
【代码】前端的面试题。
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 457
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
vue ref和reactive区别
灰海
08-25 4457
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值