当前位置: 首页 > 网页制作 > 正文

css代码flex的布局使用详解

今天在头条上看了一篇CSS关于flex布局的文章,感觉描述的非常形象!而且简单易懂有图片描述,所以笔者转载过来给大家分享一下!

flex布局的含义

flex布局又名为‘弹性布局’,主要是通过设置的属性值自动调整元素的宽度和高度值,在容器空间充裕的情况下,使其填满容器的剩余空间;又或者在容器空间不足的情况下,收缩元素的高度和宽度,使其不会溢出容器。

使用flex布局,可以灵活的控制元素在容器内的展示。尤其是对于移动端小屏幕来说,flex基本已成了主流的布局方式。

flex布局的基本概念

在flex布局中,有几个概念是我们必须掌握的,可以从下面这个图中看出。

flex布局

flex布局,实际就是一个弹性容器内部元素的排列。

flex容器中存在一个主轴和侧轴的概念,表示的是容器内元素排列的方向。在默认情况下,弹性项目会沿着主轴方向排列,即上图所示的水平方向。当然也可以通过flex-direction属性去设置。

在flex中有6个可以设置在容器上的属性,有6个可以设置容器内项目的属性,这些基本知识大家可以自行去查看官方文档,下面我们看看flex布局的计算过程。

flex布局的实例

在很多网站中,我们可以看到这样的效果,当鼠标移动到指定的元素后,该元素展示详情,其他元素收缩。

我们先看看代码部分,再去分析为什么会达到这个效果。

HTML代码

HTML部分代码很简单,无需多讲。

flex布局

CSS代码

首先是容器的基本样式,设置display为flex,为了更好的兼容性,在某些属性上加上-webkit-前缀。

flex布局

然后是给容器内子项目设置flex相关属性,为了让效果看起来更平滑,加上了动画。

flex布局

最后是很重要的一点,就是在鼠标滑过时,改变该子项目的宽度。

flex布局

flex解析计算过程

通过以上的属性,为什么就能达到上面的效果呢?

初始宽度值

在鼠标未经过容器时,容器会根据设置的flex值自动计算每个子项目占据的实际宽度值。

每个子项目的flex值为1, 1, auto。

第一个1表示的是,在容器有剩余空间时,每个子项目都进行一等分剩余空间。

第二个1表示的是,当容器空间不足时,每个子项目一等分的减少超出的空间。

第三个参数auto表示的是宽度值取决于其他属性值,这个题目中是width值。

我们再来看看计算过程。

容器总宽度为450px,每个div宽度值为30px,则三个div就是30*3=90px。

那么剩余空间就是450px-90px=360px。

因为每个div的flex-grow属性为1,则表示将剩余空间分为1+1+1=3等分。

那么每等分空间的宽度就是360/3=120px。

那么最后每个div占据的实际宽度就是120px+30px=150px。

鼠标滑过

当鼠标滑过时,设置了:hover类,其中width值变为200px,这里会重新计算各个div的宽度值。

三个div占据的宽度值为200px+30px+30px = 260px。

剩余空间450px-260px=190px。

剩余空间三等分后,每等分空间的宽度是190/3=63.33px。

那么未滑过鼠标的div占据的实际空间是63.33+30=93.33px。

滑过鼠标的div占据是实际空间是63.33+200=263.33px。

通过以下的图可以看出。

flex布局

今天这篇文章通过一个布局实例,讲解了flex布局的计算过程,其实大家在掌握了flex属性的几个特定值后就可以很容易的算出占据的宽度值。

本文固定链接: https://www.ziyouwu.com/archives/1667.html | 自由屋博客www.ziyouwu.com|wordpress建站技巧分享


关键字: , , ,

css代码flex的布局使用详解:等您坐沙发呢!

发表评论

2 + 3 = ?


快捷键:Ctrl+Enter