flex布局进阶

推荐看一下阮一峰老师的flex布局博客【Flex 布局教程:语法篇】(https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html#),讲的非常清晰。

一、多行布局大小相同的子盒子技巧

使用弹性布局实现多行均匀布局时,如若子盒子数量不能被每行规定的子盒子数量整除时,该如何实现最后一行的子盒子和其他行的子盒子垂直对齐呢?

如下代码:

<template><div class="container"><div class="item" v-for="item, index in 5" :key="index"></div></div>
</template><style lang="scss" scoped>
.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;flex-wrap: wrap;.item {width: 30%;height: 100px;background-color: gray;}
}
</style>

在这里插入图片描述

可以看到最后的一行只有两个子盒子,它们根据jusctify-content: space-between的规则贴在父盒子的两边,而业务需求是:最后一行的子元素必须按顺序和其他的子元素垂直对齐,那么如何在不影响其他行布局的前提下实现最后一行的子盒子按顺序和其他行的子盒子垂直对齐呢?我们可以使用伪元素+元素不可见来实现。

我们给父盒子增加一个宽度和子盒子一样宽的伪元素:

.container::after {content: '';width: 30%;visibility: hidden;
}

visibility:hidden实现了将元素隐藏,但是元素在网页中该占的位置还是占着的。

这样就成功完成了需求:
在这里插入图片描述

二、flex-flow

flex-flow属性时flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

这里我们在上一小节的基础上,使用flex-flow代替flex-warp来测试一下flex-flow属性。

.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;flex-flow: row wrap;  // 得到的效果是一样的.item {width: 30%;height: 100px;background-color: gray;}
}

得到了相同的结果。
在这里插入图片描述

三、flex-start | flex-end

center | space-between | space-around 

justify-content的这三个属性值的使用早已游刃有余了,这里我记录一下较为陌生的两个属性:

flex-start(默认值) | flex-end

flex-start是弹性布局的默认水平对齐方式,也就是左对齐,显然,flex-end就是右对齐了。

四、align-items属性进阶

和水平对齐方式一样的道理,垂直对齐方式align-item也有flex-startflex-end,不过它们分别代表上对齐和下对齐,下对齐常用于解决flex单行布局由于子盒子高度不同而导致子盒子下边界不在同一水平线的问题。如下

<template><div class="container"><div class="item1"></div><div class="item2"></div><div class="item3"></div></div>
</template><style lang="scss" scoped>
.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;// align-items: flex-end;div {width: 30%;background-color: gray;}.item1 {height: 100px;}.item2 {height: 200px;}.item3 {height: 300px;}
}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bEQwf724-1690120788048)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723212133179.png)]

给父盒子添加align-items: flex-end后,实现了子盒子下边界在同一水平线上。如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVHHIwS5-1690120788048)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723212641092.png)]

align-items: flex-start | flex-end | center | baseline | stretch(默认);

值得注意的是弹性布局的垂直对齐方式默认并是上对齐,而是stretch,那么stretch是什么效果呢?stretch有延伸、张开、弹性的的意思,在弹性布局中就表示如果父盒子没有给高度并且使用了flex布局,那么父盒子的高度将由子盒子决定,根据子盒子的高度来自动撑开父盒子

这里再了解一下属性基线对齐:

baseline: 子盒子与第一行文字的基线对齐。

css中的基线(baseline0)并不是汉字文字的下端沿,而是英文字母x的下端沿,如下图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpuVoPeZ-1690120788048)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723215602328.png)]

五、子盒子属性flex: none | [<‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’>]

阮一峰老师的博客讲解的非常详细:Flex 布局教程:语法篇

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HHDESK便捷功能介绍三

1 连接便捷显示 工作中&#xff0c;往往需要设置很多资源连接。而过多的连接设&#xff0c;往往很容易混淆。 在HHDESK中&#xff0c;当鼠标点击连接时&#xff0c;会在下方显示本连接的参数&#xff0c;方便用户查看。 2 日志查看 实际工作中&#xff0c;查看日志是一件很…

QT【day3】

思维导图&#xff1a; 闹钟&#xff1a; //widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> // #include<QTime> //定时器 #include<QDebug> // #in…

Rust vs Go:常用语法对比(七)

题图来自 Go vs Rust: Which will be the top pick in programming?[1] 121. UDP listen and read Listen UDP traffic on port p and read 1024 bytes into buffer b. 听端口p上的UDP流量&#xff0c;并将1024字节读入缓冲区b。 import ( "fmt" "net&qu…

API接口:如何通过使用手机归属地查询

随着手机普及率的不断增加&#xff0c;手机号码的信息查询也成为了一个非常实用的功能。本文将介绍如何通过使用手机归属地查询API接口实现查询手机号码所在地的功能。 首先&#xff0c;我们需要一个可以查询手机号码所在地的API接口。目前市面上有很多免费或付费的API接口可供…

深入了解HTTP代理在网络爬虫与SEO实践中的角色

随着互联网的不断发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;成为各大企业和网站重要的推广手段。然而&#xff0c;传统的SEO方法已经难以应对日益复杂和智能化的搜索引擎算法。在这样的背景下&#xff0c;HTTP代理爬虫作为一种重要的工具&#xff0c;正在逐渐被…

php-golang-rpc jsonrpc和php客户端tivoka/tivoka包实践

golang 代码&#xff1a; package main import ( "fmt" "net" "net/rpc" "net/rpc/jsonrpc" ) type App struct{} type Res struct { Code int json:"code" Msg string json:"msg" Data any json:"…

【洁洁送书第二期】Python机器学习:基于PyTorch和Scikit-Learn

前言 近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务等行业得到了广泛的应用。自从AlexNet模型在2012年ImageNet大赛被提出以来&#xff0c;机器学习和深度学习迅猛发展&#xf…

clickhouse分布式查询降级为本地查询

在基于 clickhouse 做类数仓建模时通常的做法是在本地创建物化视图&#xff0c;然后使用分布式表做代理对外提供服务。我们知道 clickhouse 对于 DQL 内部实现了分布式&#xff0c;而对于 DDL 则需要我们自动实现比如&#xff1a; drop table table_name on cluster cluster_n…

TCP 协议【传输层协议】

文章目录 1. 简介1.1 TCP 协议是什么1.2 TCP 协议的作用1.3 什么是“面向连接” 2. 简述 TCP2.1 封装和解包2.2 TCP 报文格式2.3 什么是“面向字节流”2.4 通过 ACK 机制实现一定可靠性 3. 详述 TCP3.1 基本认识TCP 报头格式16 位源/目标端口号32 位序列号*32 位确认应答号4 位…

HCIA实验四

一.实验要求&#xff1a; 1、R4为ISP&#xff0c;其上只能配置IP地址&#xff1b;R4与其他所有直连设备间均使用共有IP&#xff1b; 2、R3 - R5/6/7为MGRE环境&#xff0c;R3为中心站点&#xff1b; 3、整个网络配置OSPF环境&#xff0c;IP基于172.16.0.0/16网段划分&#x…

element中el-input组件限制输入条件(数字、特殊字符)

1、只能输入纯数字 <el-input v-model"aaa" type"text" input"(v)>(aaav.replace(/[^\d]/g,))" /> 2、只能输入纯数字和小数&#xff08;比如&#xff1a;6.66&#xff09; <el-input v-model"aaa" type"text&quo…

idea下tomcat运行乱码问题解决方法

idea虚拟机选项添加-Dfile.encodingUTF-8

青枫壁纸小程序V1.4.0(后端SpringBoot)

引言 那么距离上次的更新已经过去了5个多月&#xff0c;期间因为忙着毕业设计的原因&#xff0c;更新的速度变缓了许多。所以&#xff0c;这次的更新无论是界面UI、用户功能、后台功能都有了非常大的区别。希望这次更新可以给用户带来更加好的使用体验 因为热爱&#xff0c;更…

[OnWork.Tools]系列 02-安装

下载地址 百度网盘 历史版本连接各种版本都有,请下载版本号最高的版本 链接&#xff1a;https://pan.baidu.com/s/1aOT0oUhiRO_L8sBCGomXdQ?pwdn159提取码&#xff1a;n159 个人链接 http://on8.top:5000/share.cgi?ssiddb2012fa6b224cd1b7f87ff5f5214910 软件安装 双…

com.android.ide.common.signing.KeytoolException:

签名没问题但是提示Execution failed for task :app:packageDebug. > A failure occurred while executing com.android.build.gradle.tasks.PackageAndroidArtifact$IncrementalSplitterRunnable > com.android.ide.common.signing.KeytoolException: Failed to read ke…

【iOS】自定义字体

文章目录 前言一、下载字体二、添加字体三、检查字体四、使用字体 前言 在设计App的过程中我们常常会想办法去让我们的界面变得美观&#xff0c;使用好看的字体是我们美化界面的一个方法。接下来笔者将会讲解App中添加自定义字体 一、下载字体 我们要使用自定义字体&#x…

2023天津Java培训学校分享!Java培训班

近年来&#xff0c;各类培训机构如雨后春笋般涌现&#xff0c;其中&#xff0c;Java培训机构可谓是风头正盛&#xff0c;许多想踏入这行的小伙伴选择这个方式来学习Java技能&#xff0c;今天我们一起来讨论一下&#xff1a;学Java有门槛吗&#xff0c;Java培训的好处&#xff0…

Windows使用Notepad++编辑Linux服务器的文件

&#x1f680; Windows使用Notepad编辑Linux服务器的文件 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介…

适用于虚拟环境的免费企业备份软件

多年来&#xff0c;许多行业严重依赖物理服务器提供计算资源——你可以想象到巨大的服务器机房和笨重的服务器的场景。 然而&#xff0c;随着业务快速增长&#xff0c;许多组织发现物理服务器已经无法有效利用计算资源。因此&#xff0c;为了节省成本&#xff0c;引入了虚拟服…

ChatGPT | 分割Word文字及表格,优化文本分析

知识库读取Word内容时&#xff0c;由于embedding切片操作&#xff0c;可能会出现表格被分割成多个切片的情况。这种切片方式可能导致“列名栏”和“内容栏”之间的Y轴关系链断裂&#xff0c;从而无法准确地确定每一列的数据对应关系&#xff0c;从而使得无法准确知道每一列的数…