欢迎来到嘟嘟工作室!

联系热线:157-9333-9974联系热线:157-9333-9974
  1. 网站首页 > 新闻动态 > 建站资讯

不懂“弹性布局”,怎么能说学过网页设计

日期:2022-06-02 15:22:19 编辑:嘟嘟网络用户提供 点击数:

不懂“弹性布局”,怎么能说学过网页设计(图1)

网页布局中CSS是一个重点,而flex布局是布局中的重中之重,没有学过弹性布局的小伙伴希望本篇文章对你有所帮助,下面就来说说flex弹性布局的奇幻之旅

布局的传统解决方案一般是基于盒模型,依赖display属性 +position属性 +float属性。但是有些特殊的情况,比如居中,响应式布局的情况就无法解决

Flex布局是什么

Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。并且根据元素类型以及内核对应三种写法

不懂“弹性布局”,怎么能说学过网页设计(图2)

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

flex基本概念

采用Flex布局的元素,称为Flex容器,其实就是需要父子级关系。它的所有子元素自动成为容器成员,每个成员称为Flex单项

对于父级元素中的弹性布局,有以下的属性:

APP定制开发#https://www.dudukj.cn/app/容器默认存在两根轴:水平x轴叫主轴,垂直的y轴叫交叉轴。主轴的开始位置(与边框的交叉点)叫做主轴起始端,结束位置叫做主轴末端;交叉轴的开始位置叫做交叉轴起始端,结束位置叫做交叉轴末端。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器(父级)的属性

对于父级元素中的弹性布局,有以下的属性:

不懂“弹性布局”,怎么能说学过网页设计(图3)

flex-direction设置主轴的方向

flex-direction有四个参数代表四个方向,分别定义主轴排列的方向

不懂“弹性布局”,怎么能说学过网页设计(图4)

例如下面设置主轴为从下到上的排列方式

不懂“弹性布局”,怎么能说学过网页设计(图5)

flex-wrap设置排列换行

默认情况下,项目都排在一条轴上。flex-wrap属性定义,如果一条轴线排不下,如何换行,flex-wrap:wrap|no-wrap|wrap-reverse;

不懂“弹性布局”,怎么能说学过网页设计(图6)

flex-flow是上述个综合设置:具体参数为flex-flow:

justify-content设置主轴方向的对齐方式

不懂“弹性布局”,怎么能说学过网页设计(图7)

下面的是两端对齐,项目之间的间隔都相等的例子:

不懂“弹性布局”,怎么能说学过网页设计(图8)

align-items定义项目在交叉轴上如何对齐。

具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

不懂“弹性布局”,怎么能说学过网页设计(图9)

align-content定义项目在交叉轴上如何对齐。

定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

不懂“弹性布局”,怎么能说学过网页设计(图10)

上面的align-contentalign-items就是单轴和多轴的区别,不能同时使用,同时使用只能有一个有效

项目(子元素)属性

orderAPP定制开发#https://www.dudukj.cn/app/属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

不懂“弹性布局”,怎么能说学过网页设计(图11)

计算机都是以0为开始的,所以在记忆的时候也要跟上计算机的思维进行学习

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

不懂“弹性布局”,怎么能说学过网页设计(图12)

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

不懂“弹性布局”,怎么能说学过网页设计(图13)

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

不懂“弹性布局”,怎么能说学过网页设计(图14)

下面这个flex属性是上述三个的总和设置属性:

不懂“弹性布局”,怎么能说学过网页设计(图15)

总结

在使用弹性布局的时候,要点就是父子级关系,也就是盒模型内的元素进行布局的一种方法,其实以上的代码都是根据主轴和交叉轴进行设置布局,就好像是word文档排版一样的流程,多学多练就能牢固记忆并会运用了。本篇到此结束,欢迎大家的点赞和关注,我们下期见

举报/反馈
点击领取支付宝红包,支付宝口令自动复制
"真想不到会有人会打赏,言语也许对你并不重要,但我还是谢谢你。"
给萌小嘟打赏
不懂“弹性布局”,怎么能说学过网页设计
扫码支持 扫码支持 扫码支持
扫码打赏,你说多少就多少
2
5
10
20
50
自定义
支付宝
微信
QQ钱包

打开支付宝扫一扫,即可进行扫码打赏哦

打开微信扫一扫,即可进行扫码打赏哦

打开QQ钱包扫一扫,即可进行扫码打赏哦

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,手机网站,响应式网站,SEO优化,小程序开发,阿里装修运营等

立即咨询 157-9333-9974