html伸缩布局,CSS3 伸缩布局(一)

CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为Flex。

Flexbox布局常用于设计比较复杂的页面,可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,让你可以调节伸缩项目的相对大小和位置。例如,你可以确保伸缩容器中的多余空间平均分配多个伸缩项目,当然,如果你的伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器。综合而言,Flexbox布局功能主要具有以下几点:

第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局;

第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小;

第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;

第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;

第五,可以控制元素在页面上的布局方向;

第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

Flexbox规范版本众多,浏览器对此语法支持度也各有不同,接下来的内容以最新语法版本为例向大家展示:

1.创建一个flex容器

任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中,你依然需要添加前缀-webkit,

.flexcontainer{ display: -webkit-flex; display: flex; }

2.Flex项目显示

Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column,其默认值是row。

b50bec6d685d9cc2d62df025d0bf4d71.png

3.Flex项目列显示

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

cea97ec98b91d4ac068cf9dfbba2c6e9.png

4.Flex项目移动到顶部

如何实现将flex项目移动到顶部的效果,关键点:取决于主轴的方向。justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。 如果主轴是水平的方向,通过align-items设置;如果主轴是垂直的方向,通过justify-content设置。

.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

04833c232911e684836556ef13721630.png

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

0925d3d0d91775e61064e6d15c47f911.png

(未完待续,下一节)

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

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

相关文章

从0开始:500行代码实现 LSM 数据库

简介: LSM-Tree 是很多 NoSQL 数据库引擎的底层实现,例如 LevelDB,Hbase 等。本文基于《数据密集型应用系统设计》中对 LSM-Tree 数据库的设计思路,结合代码实现完整地阐述了一个迷你数据库,核心代码 500 行左右&#…

从 Docker 的信号机制看容器的优雅停止

作者 | Addo Zhang来源 | 云原生指北有太多的文章介绍如何运行容器,然而如何停止容器的文章相对少很多。根据运行的应用类型,应用的停止过程非常重要。如果应用要写文件,停止前要保证正确刷新数据并关闭文件;如果是 HTTP 服务&…

axios链接带参数_axios常见传参方式

1:get请求一般发送请求是这么写axios.get(/user?id12345&nameuser).then(function (res) {console.log(res);}).catch(function (err) {console.log(err);});但是为了方便全局统一调用封装的axiosaxios.get(/user, { //params参数必写 , 如果没有参数传{}也可以params: {i…

使用 Arthas 排查开源 Excel 组件问题

简介: 有了实际的使用之后,不免会想到,Arthas 是如何做到在程序运行时,动态监测我们的代码的呢?带着这样的问题,我们一起来看下 Java Agent 技术实现原理。 背景介绍 ​ 项目中有使用到 com.github.dream…

如何选择python书籍_关于 Python 的经典入门书籍有哪些?

展开全部 关于Python,是最近最火最的编程语言e68a843231313335323631343130323136353331333365643631,挺多人都在学习的,关于它的入门书籍,我大概推荐以下几本: 首先我介绍的是《Python基础教程(第2版修订版)》&#x…

echarts 折线图 html模板,设置ECharts折线图的提示框

回调函数回调函数格式:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) > string第一个参数 params 是 formatter 需要的数据集。格式如下:{componentType: series,// 系列类型seriesType: string,// 系列在传入的…

“融合、智能、绿色”施耐德电气线上工博以全生命周期解决方案助推数字化

原定于12月1-5日在上海举办的第23届中国国际工业博览会因为疫情再次延期。不必翘首等待,施耐德电气将以线上云展厅的形式如期与您见面,为工业用户呈现一场以“绿色智能制造,共塑可持续未来”为主题的云端盛宴。凭借在绿色智能制造领域的丰富实…

运维更简单、更智能,让运维人不再 “拼命”

简介: 云原生智能运维解决方案,利用大数据为企业日常运维服务,通过可观测数据,融合智能告警与响应中枢,结合机器学习的方法进一步解决自动化运维所未解决的问题,让运维更简单、更智能。 在90%的科幻片中 万…

python全栈马哥_马哥Python全栈+爬虫+高端自动化,资源教程下载

资源名称 马哥Python全栈爬虫高端自动化,资源教程下载 资源介绍 这套课程最后是有项目实战的,如项目四-多人博客开发、项目五CMDB资产管理、项目七-运维流程系统。 资源目录 01Python开班仪式及职业指导 02linux基础-1 03linux基础-2 04linux基础-3 05li…

java 高并发mqtt服务器_Boomer 实战压测 mqtt,2w 并发轻松实现

// main.go// 代码仅供参考,无法直接运行.package mainimport ("bytes""encoding/csv""fmt"MQTT "github.com/eclipse/paho.mqtt.golang""github.com/myzhan/boomer""io""io/ioutil""log"&qu…

从操作系统层面分析Java IO演进之路

简介: 本文从操作系统实际调用角度(以CentOS Linux release 7.5操作系统为示例),力求追根溯源看IO的每一步操作到底发生了什么。 作者 | 道坚 来源 | 阿里技术公众号 前言 本文从操作系统实际调用角度(以CentOS Linu…

AI是计算机科学,人工智能计算机科学(79种)...

COMPUTER SCIENCE, ARTIFICIAL INTELLIGENCE(人工智能计算机科学) 79种1. ADVANCED ENGINEERING INFORMATICSQuarterlyISSN: 1474-0346ELSEVIER SCI LTD, THE BOULEVARD, LANGFORD LANE, KIDLINGTON, OXFORD, ENGLAND, OXON, OX5 1GB2. AI COMMUNICATIONSQuarterlyISSN: 0921-7…

教程系列——用模板快速上线一个HR 服务中心

简介: 【开箱即用的模板使用系列教程】将会手把手教给大家如何快速启用钉钉宜搭提供各类模板。今天第一讲,介绍《HR 服务中心》的模板启用。 【开箱即用的模板使用系列教程】将会手把手教给大家如何快速启用钉钉宜搭提供各类模板。今天第1讲,…

数字化“团险”黑科技,保险极客技术升级背后心经

作者 | 宋慧 出品 | CSDN 云计算 疫情之后,一切都在“内卷”,HR 也逃不过。初创公司想要招到优秀人才,除了对市场和未来发展的预期和潜力,提供补充医疗险也是对人才重要的保障。另外,现在补充医疗也是知名大企业高福利…

powershell快捷键_借助Windows Terminal搞一个花里胡哨的PowerShell终端

一提起PowerShell,命令提示符等等,想到的就是丑、难用,非常丑!各位可以先感受一下。不过,现在我们可以对它做一个美化,美化后的效果如下,各位也可以感受下(本人不提供背景图)下面做简单记录1、必…

linux刷新本地dns命令_两种方法修改Linux下的DNS后立即生效 - 文中之舞

DNS服务器介绍DNS是计算机域名系统(Domain Name System 或Domain Name Service) 的缩写,它是由域名解析器和域名服务器组成的。域名服务器是指保存有该网络中所有主机的域名和对应IP地址,并具有将域名转换为IP地址功能的服务器。其中域名必须对应一个IP地…

【详谈 Delta Lake 】系列技术专题 之 特性(Features)

简介: 本文翻译自大数据技术公司 Databricks 针对数据湖 Delta Lake 的系列技术文章。众所周知,Databricks 主导着开源大数据社区 Apache Spark、Delta Lake 以及 ML Flow 等众多热门技术,而 Delta Lake 作为数据湖核心存储引擎方案给企业带来…

*计算机应用基础* 说课稿,中职计算机应用基础《EXCEL中函数的使用》说课稿.doc...

中职计算机应用基础《EXCEL中函数的使用》说课稿说课稿《EXCEL中函数的使用》选用教材:《计算机应用基础》高等教育出版社出版各位专家、评委好!我说课的题目是《EXCEL中函数的使用》,下面我将从教材、教法、学法以及教学程序设计等方面加以说…

python cmp函数未定义_python用plt画图时,cmp设置方法

在python,有时候是需要画图的,比如把一个矩阵用图像的形式显示,之前用的好好的,每次用plt.imshow(),都是彩色图,不知为啥,突然全是黑白图了,于是需要设置cmap的值,如下&a…

sid图像数据_MrSID技术在GIS中的应用

摘要:随着卫星遥感和航空摄影技术的发展,通过遥感获得的地理信息越来越多,特别是小卫星高分辨率遥感图象的商业化(如EOSAT),遥感影像成为地理信息系统(GIS)一个非常重要的信息源,这对海量数据的及时存储与传输提出了很…