网站专题BANNER

浅谈弹性布局在网站建设过程中的奇妙之处

发表日期:2021-09-28 21:01:00 文章编辑:洛壹网络 文章来源:深圳网站建设

在网站建设过程中内容的排版和布局往往是整个建设工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果。尤其是对非专业的或刚开始从事前端开发的人,掌握了这种布局方式会让人有一种瞬间顿悟的感觉:网页布局也不过如此嘛。今天洛壹网络简单为大家讲解一下CSS弹性布局的奇妙之处。


首先在我们在屏幕生成一个宽300px,高200px的DIV作为容器,通过display: flex属性,可将该DIV声明为块级弹性容器


“.div1{display:flex;width:300px;heigth:200px;border: 1px solid orange;}”


网站建设过程中常用的布局-弹性布局


我们可以把这个容器想象成一个箱子,往箱子里面摆放了三个球,下面看看球的几种摆放方式,先定义一个球的样式


.ball {width: 50px;height: 50px;border: 1px solid #2196f3;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 28px;}


将球放进容器里


网站建设过程中常用的布局-弹性布局


定义了6中摆放方式,其中第一排箱子主要应用了justify-content属性,这个属性可以理解为水平对齐方式,第二排主要应用了align-items属性,这个属性可以理解为垂直的对齐方式。具体的属性值请参考下表。


网站建设过程中常用的布局-弹性布局


左上角第一个为序号1,以此类推


网站建设过程中常用的布局-弹性布局


除了上面6种对齐方式外,还有很多很多种,感兴趣的可以一一尝试一下。只要把块级元素声明为弹性的,里面的元素可以通过各种方式随意摆放。如果箱子里面的球太多的话,也可以设置为自动换行方式,设置属性flex-wrap: wrap即可


flex-wrap: wrap;justify-content: space-around;align-content: flex-start;


通过属性flex-wrap:wrap设置箱子内的球自动换行,同是将水平对齐设置为两头有空白的两端对齐(space-around,两头没有空白的是space-between),将垂直对齐方式设置为顶部对齐align-content: flex-start,得到下图的摆放方式。


网站建设过程中常用的布局-弹性布局


在了解了弹性布局后我们来看看实际项目中有哪些地方可以用到弹性布局来快速解决问题


完全居中对齐


有时我们想在一个格子内显示的文本或图片要水平和垂直方向都是居中对齐的,就是显示在格子的正中央,使用弹性布局的水平和垂直方向都是居中对齐即可。本文中上例的球体内的文字就是这种显示方式,样式设置如下:


display: flex; justify-content: center; align-items: center;


平均分配宽度


很多APP的底部菜单的宽度都是平均分配,主要应用了属性 flex:1,其中1代表占了1份。


将球的样式 .ball 修改为


display: flex;justify-content: center;align-items: center;flex: 1;height: 50px;


网站建设过程中常用的布局-弹性布局


底部有5个菜单每个菜单的flex值都是1,可以理解为每个菜单的宽度是1/5,于是就可以平均分配宽度了。把flex的值设置为2也可以,只要每个菜单的值一样,它们的宽度就是一样的。所以如果把【首页】的flex值设置为2,其它菜单的flex值设置为1,相当于把箱子的宽度平均分为6份,【首页】占了2/6,其他的占了1/6,即首页的宽度是其它菜单宽度的2倍。


一边的宽度固定,另一边的宽度自由伸缩


主要还是用到属性flex,固定宽度的那一边将宽度设置为固定值,另一边的flex值设为1,应用下面的样式来看看效果


.left{width: 100px; border-right: 1px solid darkgray;}.right{ flex: 1; }


这时如果改变箱子的宽度,我们会发现左边的宽度会保持在100px,而右边的宽度会随着箱子宽度的改变而改变。


除了这些例子外,弹性布局还有很多很方便快捷的布局方式,主要多尝试,熟练运用,应对常规的网页布局是绰绰有余。



相关内容
HTTP(超文本传输协议)的六种请求方法介绍

超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

web开发人员需要掌握的编程技能有哪些?

web开发所需的编程知识随着时间的推移而不同,这取决于你想要做什么。那么web前端开发最新的编程技能和知识有哪些呢?

JavaScrip 前端/后台开发人员必须要掌握的编程技能

在每年最受欢迎的编程语言排行榜中,javascript一直处于领先地位,而2021年,它依然会是最受欢迎的编程语言。

网站建设过程中,我们要了解域名的重要性和能为我们带来什么

在日常的网络建设过程中,还是有相当一部分的客户,不明白域名的重要性以及域名能为企业带来什么样的便利,那么今天洛壹网络就来解释一下,什么是域名?

带你揭开BFC神秘的面纱

想要了解BFC的规则,前提必须是熟悉前端网页的多种布局手段,例如盒的显示模式display,三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。今天洛壹网络来为大家解析一下BFC,希望对各位新老朋友有所帮助。

新手前端指南:一小时搞懂 CSS 属性应用

在 CSS 中,字体属性和文本属性是分开的,这是很容易搞混的东西。字体属性用的是 font 属性,而在 font 下还包含若干常用的属性

前端中的布局方式有哪些?

在web前端开发中,存在有很多的布局模式,这些布局模式各有各的优势,今天咱们就在说说,前端中的布局方式有哪些

浮动布局时,中间出现一块空白

浮动布局时,中间出现一块空白

我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器