返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

css代码flex的布局使用详解

时间:2018-02-11 00:09来源:2018年最新注册送彩金www.zhixing123.cn 编辑:麦田守望者

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布局

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):css flex布局
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
猜你感兴趣
博聚网