Bootstrap弹性布局Flex
弹性布局Flex
- 一、Flex
- 1.弹性盒模型
- 2.子元素的排列方向
- 3.子元素的对齐方式
- 4.自对其
- 5.填满
- 6.伸缩
- 7.自动的间距
- 8.wrap包裹
- 9.order排序
- 10.多行对齐
一、Flex
1.弹性盒模型
- 启用弹性盒模型
<div class="row"><div class="col bg-primary text-white py-2 d-flex">这是一个弹性盒子</div><div class="col bg-info text-white py-2 d-inline-flex">这是一个弹性盒子</div></div>
- 响应式弹性盒模型
响应式变化也存在于.d-flex and .d-inline-flex这两个通用Class上。
.d-flex / .d-inline-flex
.d-sm-flex / .d-sm-inline-flex
.d-md-flex / .d-md-inline-flex
.d-lg-flex / .d-lg-inline-flex
.d-xl-flex / .d-xl-inline-flex
<div class="row mt-1"><div class="col bg-primary text-white py-2 d-lg-flex">这是一个弹性盒子</div><div class="col bg-info text-white py-2 d-lg-inline-flex">这是一个弹性盒子</div></div>
2.子元素的排列方向
- 排列方向
- flex-row 正序水平排列
- flex-row-reverse 倒序水平排列
- flex-column 正序垂直排列
- flex-column-reverse 倒序垂直排列
<div class="row bg-dark mt-5 flex-row"> <!-- 正序水平排列 --><div class="bg-success text-white">第1列</div><div class="bg-success text-white">第2列</div><div class="bg-success text-white">第3列</div></div><div class="row bg-dark mt-1 flex-row-reverse"> <!-- 倒序水平排列 --><div class="bg-success text-white">第1列</div><div class="bg-success text-white">第2列</div><div class="bg-success text-white">第3列</div></div><div class="row bg-dark mt-1 flex-column"> <!-- 正序垂直排列 --><div class="bg-success text-white">第1列</div><div class="bg-success text-white">第2列</div><div class="bg-success text-white">第3列</div></div><div class="row bg-dark mt-1 flex-column-reverse"> <!-- 倒序垂直排列 --><div class="bg-success text-white">第1列</div><div class="bg-success text-white">第2列</div><div class="bg-success text-white">第3列</div></div>
- 响应式的排列方式
.flex-sm-row / .flex-sm-row-reverse / .flex-sm-column / .flex-sm-column-reverse
.flex-md-row / .flex-md-row-reverse / .flex-md-column / .flex-md-column-reverse
.flex-lg-row / .flex-lg-row-reverse / .flex-lg-column / .flex-lg-column-reverse
.flex-xl-row / .flex-xl-row-reverse / .flex-xl-column / .flex-xl-column-reverse
//小屏及以上倒序垂直排列<div class="row bg-dark mt-1 flex-sm-column-reverse"><div class="bg-success text-white">第1列</div><div class="bg-success text-white">第2列</div><div class="bg-success text-white">第3列</div></div>
3.子元素的对齐方式
- 对齐方式
- 主轴上的对齐 - 水平对齐
- 交叉轴（纵轴）上的对齐 - 垂直对齐
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>//如果子元素没有设置高或者设置成了auto，
//子元素将占满整个容器的高度
- 响应式对齐方式
.justify-content-{breakpoint}-start / .justify-content-{breakpoint}-end / .justify-content-{breakpoint}-center
.justify-content-{breakpoint}-between / .justify-content-{breakpoint}-around
.align-items-{breakpoint}-start / .align-items-{breakpoint}-end / .align-items-{breakpoint}-center
.align-items-{breakpoint}-baseline / .align-items-{breakpoint}-stretch
4.自对其
- 元素的自身的对齐方式
.align-self-start / .align-self-end / .align-self-center / .align-self-baseline / .align-self-stretch
<div class="row bg-secondary mt-5" style="height: 100px;"><div class="bg-warning text-white align-self-start">第1列1111</div><div class="bg-warning text-white align-self-end">第2列</div><div class="bg-warning text-white align-self-center">第3列</div><div class="bg-warning text-white align-self-baseline">第4列</div><div class="bg-warning text-white align-self-stretch">第5列</div></div>
2. 元素的自身的响应式对齐方式
.align-self-{breakpoint}-start / .align-self-{breakpoint}-end / .align-self-{breakpoint}-center
.align-self-{breakpoint}-baseline / .align-self-{breakpoint}-stretch
5.填满
- 填满
.flex-fill
<div class="row mt-5 bg-primary" style="height: 50px;"><div class="bg-info text-white border-right flex-fill">第1列</div><div class="bg-info text-white border-right flex-fill">第2列</div><div class="bg-info text-white border-right flex-fill">第3列</div></div>
- 响应式填满
.flex-fill / .flex-sm-fill / .flex-md-fill / .flex-lg-fill / .flex-xl-fill
6.伸缩
- 伸缩
.flex-{grow|shrink}-0 / .flex-{grow|shrink}-1
<div class="row mt-5 bg-primary"><div class="bg-danger border-right text-white flex-grow-1">第1列</div><div class="bg-danger border-right text-white">第2列</div><div class="bg-danger border-right text-white">第3列</div></div>
<div class="mt-1 bg-primary d-flex"><div class="bg-danger border-right text-white w-100">第1列</div><div class="bg-danger border-right text-white flex-shrink-1">第2列</div></div>
- 响应式伸缩
.flex-{grow|shrink}-0 / .flex-{grow|shrink}-1
.flex-{breakpoint}-{grow|shrink}-0 / .flex-{breakpoint}-{grow|shrink}-1
7.自动的间距
- 自动的间距
向右推两个项目(.mr-auto)、向左推两个项目 (.ml-auto)
<div class="row mt-5 bg-secondary"><div class="bg-success text-white py-2 mr-auto">第1列</div><div class="bg-success text-white py-2">第2列</div><div class="bg-success text-white py-2">第3列</div></div><div class="row mt-1 bg-secondary"><div class="bg-success text-white py-2">第1列</div><div class="bg-success text-white py-2">第2列</div><div class="bg-success text-white py-2 ml-auto">第3列</div></div><div class="row mt-1 bg-secondary flex-column" style="height: 220px;"><div class="bg-success text-white py-2 col-2 mb-auto">第1列</div><div class="bg-success text-white py-2 col-2">第2列</div><div class="bg-success text-white py-2 col-2">第3列</div></div><div class="row mt-1 bg-secondary flex-column align-items-end" style="height: 220px;"><div class="bg-success text-white py-2 col-2">第1列</div><div class="bg-success text-white py-2 col-2">第2列</div><div class="bg-success text-white py-2 col-2 mt-auto">第3列</div></div>
8.wrap包裹
- Wrap
<div class="row mt-5 bg-secondary flex-wrap-reverse"><div class="col-1 bg-primary text-white">第1列</div>......<div class="col-1 bg-primary text-white">第18列</div></div>
- 响应式wrap
.flex-nowrap / .flex-wrap / .flex-wrap-reverse
.flex-{breakpoint}-nowrap / .flex-{breakpoint}-wrap / .flex-{breakpoint}-wrap-reverse
<div class="row mt-1 bg-secondary flex-xl-wrap-reverse"><div class="col-1 bg-primary text-white">第1列</div>......<div class="col-1 bg-primary text-white">第18列</div></div>
9.order排序
- 排序
<div class="row bg-secondary mt-5"><div class="col-1 bg-info text-white order-2">第1列</div><div class="col-1 bg-info text-white order-6">第2列</div><div class="col-1 bg-info text-white order-3">第3列</div><div class="col-1 bg-info text-white order-4">第4列</div><div class="col-1 bg-info text-white order-1">第5列</div><div class="col-1 bg-info text-white order-0">第6列</div><div class="col-1 bg-info text-white order-5">第7列</div></div>
- 响应式排序
.order-{breakpoint}-1… .order-{breakpoint}-12
10.多行对齐
- 多行对齐
- align-content-start 顶对齐
- align-content-end 底对齐
- align-content-center 中间对齐
- align-content-between 上下两端对齐
- align-content-around 上下分散对齐
- align-content-stretch 没有给高度或者高度为auto，那高度会取父级的高度
//stretch没有高度或者auto就会撑满<div class="row bg-secondary mt-5 align-content-stretch " style="height: 200px;"><div class="col-1 bg-primary text-white">第1列</div>.......<div class="col-1 bg-primary text-white">第18列</div></div>
- 响应式多行对齐
.align-content-{breakpoint}-start / .align-content-{breakpoint}-end / .align-content-{breakpoint}-center
.align-content-{breakpoint}-around / .align-content-{breakpoint}-stretch
<div class="row bg-secondary mt-5 align-content-md-around" style="height: 200px;"><div class="col-1 bg-primary text-white">第1列</div>......<div class="col-1 bg-primary text-white">第18列</div></div>
Bootstrap弹性布局Flex相关推荐
- CSS 的弹性布局(flex) ，是什么？
一.弹性布局 是什么? 元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 二.怎么使用? 1.使用方法 /* 1.父元素中增加 display 属性:*/ display: flex; ...
- 弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录 弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性 以下六个属性设置在Flex容器上 flex-direction属性 ...
- (二)弹性布局Flex
弹性布局Flex 本周在逆战班学习了布局方面的知识,作为前端开发布局是最关键的,此文章用来写自己对弹性布局知识点的理解,和想法, 弹性布局分为两部分父元素和子元素,在父元素上设置弹性布局而控制子元素 ...
- Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
- CSS3多列布局 columns 弹性布局 flex
多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性 示例 含义 column-count column-count: 3; 将元素内部分割成3 ...
- css布局之弹性布局flex
1. 弹性布局作用 作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局. 2.弹性布局的定义和属性 弹性布局是定义在一个父容器中,加上disp ...
- 我的JavaScript回顾之路_08—0227—支付密码输入框/弹性布局flex
1.支付密码输入框 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...
- flutter 弹性布局 flex
弹性布局 flex flex可以沿着水平或者垂直方向排列子组件,row和coloumn都继承自flex,参数基本相同,唯一有一个关键参数是Expanded,该参数在row和column中也存在,该参数 ...
最新文章
- 从管道中飞出的不一定是炮弹，也可能是无人机
- php 前端页面的路由,ThinkPHP5路由
- 微软如何在3年内将数据中心的用水量削减95%
- nginx服务器带宽_Nginx限制带宽配置示例
- 数据庞大繁杂，如何精简挖掘？
- Java web文件下载断点续传
- funcode马里奥_MacGyvering马里奥·奥德赛跳绳挑战赛
- java高并发的经验
- Linux操作系统各版本ISO镜像下载（包括oracle linux\redhat\centos\u
- Linux与Windows之间实现文件实时同步的方案
- Linux下的iftop命令介绍
- Terraform 支持自动化开通阿里云产品
- 如何保护自己的机器不受“网络执法官”盗用IP地址及密码
- NBIOT BC26 opencpu物联网应用案例详细解析
- 大学生必知到的外国典故
- zcmu-1410: Polynomial Showdown
- 基于N-gram的双向最大匹配中文分词
- 动人的牵线美的连接符-两张表的查询（一）
- 二进制部署kubernetes 1.25.5（二）
- qq聊天记录备份与恢复