前端布局神器display:flex

news2024/10/7 10:24:40

Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。

<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box{
width: 200px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
</style>
<div class="container">
<div class="box"></div>
</div>

假如使用了flex后，实现起来就简单了，而且不需要自己去算，也不需要绝对定位，只需要通过对伸缩容器定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方式为center， align-items定义伸缩项目在侧轴（垂直于主轴）的对齐方式为center，具体如下：

<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;

}
.box{
width: 200px; //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;

}
</style>
<div class="container">
<div class="box"></div>
</div>

其实Flexbox的优秀特性并不是这一些，首先来一张它的属性图吧~

首先我们来分析下这一张图，从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成，容器即父元素，项目即子元素。他们之间的一些关系可以这样来表示：

这张图可以在接下来的属性分析中用到。

Flex容器

display:flex

当我们使用flexbox布局时候，需要先给父容器的display值定位flex（块级）或者inline-flex（行内级）。

当使用了这个值以后，伸缩容器会为内容建立新的伸缩格式化上下文（FFC），它的上下文展示效果和BFC根元素相同（BFC特性：浮动不会闯入伸缩容器，且伸缩容器的边界不会与其内容边界叠加）。

伸缩容器不是块容器，因此有些设计用来控制块布局的属性，在伸缩布局中不适用，特别是多栏（column)，float，clear，vertical-align这些属性。

flex-direction

[flex-direction]属性用来控制上图中伸缩容器中主轴的方向，同时也决定了伸缩项目的方向。

  • flex-direction:row;也是默认值，即主轴的方向和正常的方向一样，从左到右排列。

  • flex-direction:row-reverse;和row的方向相反，从右到左排列。

  • flex-direction:column;从上到下排列。

  • flex-direction:column-reverse;从下到上排列。 以上只针对ltr书写方式，对于rtl正好相反了。

网页展示效果如下：

flex-warp

[flex-wrap]属性控制伸缩容器是单行还是多行，也决定了侧轴方向（新的一行的堆放方向）。

  • flex-wrap:nowrap;伸缩容器单行显示，默认值；

  • flex-wrap:wrap;伸缩容器多行显示；伸缩项目每一行的排列顺序由上到下依次。

  • flex-wrap:wrap-reverse;伸缩容器多行显示，但是伸缩项目每一行的排列顺序由下到上依次排列。

网页效果见图；

flex-flow

[flex-flow]属性为flex-direction（主轴方向）和flex-wrap（侧轴方向）的缩写，两个属性决定了伸缩容器的主轴与侧轴。

  • flex-flow:[flex-direction][flex-wrap];默认值为row nowrap；

举两个栗子：

  • flex-flow:row;也是默认值；主轴是行内方向，单行显示，不换行；

  • flex-flow:row-reverse wrap;主轴和行内方向相反，从右到左，项目每一行由上到下排列（侧轴）。

网页效果如下：

这里大家可以多自己去试试不同的组合。

justify-content

[justify-content]用于定义伸缩项目在主轴上面的的对齐方式，当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

  • justify-content:flex-start;伸缩项目向主轴的起始位置开始对齐，后面的每元素紧挨着前一个元素对齐。

  • justify-content:flex-end;伸缩项目向主轴的结束位置对齐，前面的每一个元素紧挨着后一个元素对齐。

  • justify-content:center;伸缩项目相互对齐并在主轴上面处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上3中都是“捆绑”在一个分别靠左、靠右、居中对齐。

  • justify-content:space-between;伸缩项目平均的分配在主轴上面，并且第一个元素和主轴的起点紧挨，最后一个元素和主轴上终点紧挨，中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。

  • justify-content:space-around;伸缩项目平均的分布在主轴上面，并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等，且等于中间元素两两的间距的一半。完美的平均分配，这个布局在阿里系中很常见。

还是看demo理解起来快一点：

align-items

[align-items]用来定义伸缩项目在侧轴的对齐方式，这类似于[justify-content]属性，但是是另一个方向。（flex-directon和flex-wrap是一对，justify-content和align-items是一对，前者分别定义主轴和侧轴的方向，后者分别定义主轴和侧轴中项目的对齐方式）。

  • align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。

  • align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。

  • align-items:center;伸缩项目的外边距在侧轴上居中放置。

  • align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。 其它情况下，该值将参与基线对齐。

  • align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

下面demo只展示center和stretch的栗子，其他几个可以参考flex-start和flex-end那样。

align-content

[align-content]属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的[justify-content]属性类似。只不过这里元素是以一行为单位。请注意本属性在只有一行的伸缩容器上没有效果。当使用flex-wrap:wrap时候多行效果就出来了。

align-content: flex-start || flex-end || center || space-between || space-around || stretch;

  • align-content: stretch;默认值,各行将会伸展以占用剩余的空间。

  • 其他可以参考[justify-content]用法。

具体图片来至w3.org官方文档；

太麻烦。写不下去了，摔。

Flex项目

终于写到关于伸缩项目的相关属性了，主要是3个，order，flex（flex-grow，flex-shrink，flex-basis的组合），align-self；用来比较多的是前两个。

order

有一种用法比较多，想设置一组中有两个元素一个排第一，另外一个排最后，主需要将第一个的order:-1；另一个为order:0;这样就好了。

譬如我们想控制一个container中有4个box，想box4为一个显示，box1为最后一个显示。只需要 这样

<style>
.container{
display: flex;
}
.box1{
order:1;
}
.box4{
order:-1;
}
</style>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>

显示效果就这样了：

flex

[flex]属性可以用来指定可伸缩长度的部件，是flex-grow（扩展比例）,flow-shrink（收缩比例）,flex-basis（伸缩基准值）这个三个属性的缩写写法，建议大家采用缩写的方式而不是单独来使用这3个属性。

flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>]
// flex-grow是必须得flex-shrink和flow-basis是可选的

  • flex-grow:;其中number作为扩展比例，没有单位，初始值是0，主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

  • flex-grow:;其中number作为收缩比例，没有单位，初始值是1，也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例，在收缩的时候收缩比率会以[flex-basis]伸缩基准值加权。

  • flex-basis:|auto;默认是auto也就是根据可伸缩比率计算出剩余空间的分布之前，伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件，则「flex-basis」的指定值是长度零。

flex-basis用图来表示就是这样：

align-self

[align-self]用来在单独的伸缩项目上覆写默认的对齐方式，这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。

align-self: auto | flex-start | flex-end | center | baseline | stretch

我的看法

讲了这么多他们的使用，我们来看一看flexbox布局的兼容性。

具体大家可以见这个网站：caniuse（http://caniuse.com/#search=flexbox）

在PC端其实很乐观了，基本上主流的浏览器都已经兼容了flex的使用，但是到了移动端就不是那么好了，特别是国内浏览器，考虑到uc浏览器占了大头，但是uc从图中看到只兼容flex最老的一个版本，也就是2009年的版本，即display:box;很多现在flex的优秀特性到了它上面都不兼容了，所以建议大家在使用的时候，假如2009版本可以满足开发要求的话，还是去使用2009版本，这样风险更小。

但是假如想兼容多个浏览器，可以采用优雅降级的方式来使用，这里推荐一个scss的sass-flex-mixin,这样就可以使用最新的写法，并且兼容大部分浏览器了。

相信flexbox布局在以后的移动端会用得越来越多的。

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

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

相关文章

java多线程的使用

java多线程的使用

温故而知新 --- Java多线程1. 关键字1.1 并发与并行1.2 进程和线程2. Java 线程2.1 Java的主线程2.2 线程声明周期3. Java 线程三种实现1.1 Big Data -- Postgres3. Java 线程三种实现1.1 Big Data -- Postgres4. Awakening1.1 Big Data -- Postgres1. 关键字 1.1 并发与并行 …
阅读更多...
【图卷积网络】02-谱域图卷积介绍（一）

【图卷积网络】02-谱域图卷积介绍（一）

注&#xff1a;本文为第2章谱域图卷积介绍视频笔记&#xff0c;仅供个人学习使用 目录1、图卷积简介1.1 图卷积网络的迅猛发展1.2 回顾&#xff0c;经典卷积神经网络已在多个领域取得成功1.3 两大类数据1.4 经典卷积神经网络的局限&#xff1a;无法处理图数据结构1.5 将卷积扩展…
阅读更多...
Linux查看本机状况命令

Linux查看本机状况命令

1.ip addr 查看自己的网络地址&#xff0c;网卡等情况 ping:查看网络可用性 2.top 查看当前计算机的cpu运行状况 在top状态下按1&#xff0c;可以查看自己的cpu是几核的 &#xff08;下图中红框的值是空闲率&#xff0c;用100-空闲率就是CPU使用率&#xff0c;单位为%&…
阅读更多...
sql调优相关

sql调优相关

目录 1.调优步骤 2.小表驱动大表 3.order by 优化 4.group by优化 1.调优步骤 慢查询的开启并捕获explain慢SQL分析show profile查询SQL在Mysql服务器里面的执行细节和生命周期情况SQL数据库服务器的参数调优 2.小表驱动大表 EXISTS SELECT ... FROM table WHERE EXISTS (su…
阅读更多...
10. 好客租房-RocketMQ快速入门[非项目必需]

10. 好客租房-RocketMQ快速入门[非项目必需]

本章节主要是学习RocketMQ, 目标快速入门, 能够回答或解决以下问题:了解什么是RocketMQ了解RocketMQ的核心概念动手安装RocketMQ服务快速入门&#xff0c;掌握RocketMQ的api使用对producer、consumer进行详解了解RocketMQ的存储特点10.1 RocketMQ简介与安装10.1.1 核心概念速通…
阅读更多...
分享143个ASP源码，总有一款适合您

分享143个ASP源码，总有一款适合您

ASP源码 分享143个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 143个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1Fd3_qaHDj2_BuslyFT8YVQ?pwdrjmi 提取码&#x…
阅读更多...
数据库02_函数依赖,范式---软考高级系统架构师008

数据库02_函数依赖,范式---软考高级系统架构师008

1.首先我们来看这个,给定一个X,能确定一个Y那么就说,X确定Y,或者Y依赖x,那么 比如y = x * x 就是x确定y,或者y依赖于x 2.然后再来看图,那么左边的部分函数依赖,就是,通过A和B能决定C,那么如果A只用给就能决定C,那么就是部分函数依赖. 3.然后再来看,可以看到,A可以决定B,那么…
阅读更多...
文件(2)

文件(2)

1)指定一个目录&#xff0c;扫描这个目录&#xff0c;找到当前目录下面所有文件的文件名是否包含了指定字符的文件&#xff0c;并提示这个用户是否要删除这个文件&#xff0c;根据用户的输入来决定是否删除&#xff1b; 1.1)需要进行输入一个目录&#xff0c;还需要进行输入一个…
阅读更多...
概论_第7章_参数估计

概论_第7章_参数估计

参数估计的形式有两种&#xff1a; 点估计和区间估计 1 点估计 设x1,x2,...xnx_1, x_2, ... x_nx1​,x2​,...xn​是来自总体的一个样本&#xff0c; 我们用一个统计量 θ^\hat\thetaθ^ θ^(x1,x2,...,xn)\hat\theta(x_1, x_2, ..., x_n)θ^(x1​,x2​,...,xn​)的取值作为…
阅读更多...
[ 云原生 | 容器 ] 虚拟化技术之容器与 Docker 概述

[ 云原生 | 容器 ] 虚拟化技术之容器与 Docker 概述

在云计算中&#xff0c;虚拟化技术一般可以被分为两类&#xff0c;分别是虚拟机&#xff08;VM&#xff0c;Virtual Machine&#xff09;技术以及容器&#xff08;Container&#xff09;技术&#xff0c;这里我们只讲云原生中 Docker 虚拟化技术。 文章目录一、应用部署方式的变…
阅读更多...
Kubernetes:基于命名行终端/ Web 控制台的管理工具 kubebox

Kubernetes:基于命名行终端/ Web 控制台的管理工具 kubebox

写在前面 kubebox 是一个轻量的 k8s 管理工具&#xff0c;可以基于命令行终端或 Web 端博文内容涉及&#xff1a;kubebox 不同方式的安装下载&#xff0c;简单使用。如果希望轻量一点&#xff0c;个人很推荐这个工具&#xff0c;轻量&#xff0c;而且使用简单。理解不足小伙伴帮…
阅读更多...
Pointofix安装与设置为中文

Pointofix安装与设置为中文

Pointofix用来桌面绘图&#xff0c;还可以放大桌面一、下载官网下载地址&#xff1a;https://www.pointofix.de/&#xff0c;点击箭头所指跳转页面点击下载安装包pointofix180de-20180511-setup.zip&#xff0c;语言包pointofix-translation-20220120.zip二、安装解压pointofix…
阅读更多...
【学习笔记】[AGC022F] Checkers

【学习笔记】[AGC022F] Checkers

首先不考虑算重&#xff0c;因为这题坑点在于当n≥5n\ge 5n≥5时不同结构的树可能生成相同的结果。 那么我们考虑生成不同的系数序列AAA&#xff0c;然后用可重集算一下方案数。考虑将−1-1−1的边缩去后所形成的树&#xff0c;第iii层的点表示的是2i2^i2i&#xff0c;那么如何…
阅读更多...
基于微信小程序的新生自助报到系统小程序

基于微信小程序的新生自助报到系统小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…
阅读更多...
蓝桥杯-刷题-补基础（加强版）

蓝桥杯-刷题-补基础（加强版）

&#x1f33c;feels good&#x1f603;串烧 - 许天昱/陈旭辉-nn/单子玹/蒋笛含 - 单曲 - 网易云音乐 &#x1f33c;10道入门题 --- 明显比上篇博客难了一点&#xff0c;要慢慢做了 目录 一&#xff0c;第k个素数 二&#xff0c;最大公约数 三&#xff0c;最小公倍数 四…
阅读更多...
Mybatis-Plus 多记录操作与逻辑删除

Mybatis-Plus 多记录操作与逻辑删除

目录 多记录操作 逻辑删除 问题引入 所以对于删除操作业务问题来说有: 实现步骤 逻辑删除&#xff0c;对查询有没有影响呢? 如果还是想把已经删除的数据都查询出来该如何实现? 多记录操作 程序设计出来一个个删除的话还是比较慢和费事的&#xff0c;所以一般会给用户一…
阅读更多...
OpenMP Parallel Construct 实现原理与源码分析

OpenMP Parallel Construct 实现原理与源码分析

OpenMP Parallel Construct 实现原理与源码分析 前言 在本篇文章当中我们将主要分析 OpenMP 当中的 parallel construct 具体时如何实现的&#xff0c;以及这个 construct 调用了哪些运行时库函数&#xff0c;并且详细分析这期间的参数传递&#xff01; Parallel 分析——编…
阅读更多...
逆序遍历List集合

逆序遍历List集合

1 问题手写一个程序&#xff0c;完成List集合对象的逆序遍历2 方法创建List接口的多态对象向创建好list集合添加元素使用hasPrevious方法。import java.util.ArrayList;import java.util.List;import java.util.ListIterator;public class TestList { public static void ma…
阅读更多...
如何好好说话第11章 攀登抽象之梯

如何好好说话第11章 攀登抽象之梯

在心里面放一把抽象之梯我们要时刻去概括。从更宏观的角度去理解我们当前所处的事情。抽上之梯的这个概念&#xff0c;在写作教材中常常出现。他指引我们写作的时候&#xff0c;不要站在梯子的中间。要么具体详实&#xff0c;要么抽象而精简短小。为什么不要站在梯子中间呢&…
阅读更多...
蓝桥杯 stm32 MCP4017

蓝桥杯 stm32 MCP4017

本文代码使用 HAL 库。 文章目录前言一、MCP4017 的重要特性二、MCP4017 计算 RBW 阻值三、MCP4017 地址四、MCP4017 读写函数五、CubeMX 创建工程 &#xff08;利用 ADC 测量 MCP4017 电压&#xff09;、对应代码&#xff1a;总结前言 一、MCP4017 的重要特性 蓝桥杯 板子上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023