抽象轻松web




    
    
    
    Document
    


    
one
threew
four
five
size
seven

先来一道数学题

先通过上图得到外容器宽度

小盒子的宽度

提示小盒子的宽度=本身宽度+内边框距离+外边框距离

答案 外容器宽度=1024

        小盒子宽度 = 260 +15 +15 +15 +15=320

有人会问:为什么你有4个15,按道理不是只要2个吗

内外边框不止有左,还有右

那怎么求他们的总像素呢?

拿上面算出的小盒子 * 盒子的个数 = 他们占的总像素

上面有6个小盒子

320 * 6 = 1920px

外容器顶死了只有1024px,但是小盒子占了1920px

1024 > 1920

猜猜看有没有溢出

抽象轻松web_第1张图片

 很显然没有

第一个特点

弹性:其能够根据容器和元素的大小自动调整布局的能力。 

会无限吗?

答案是 :有限的

那想要知道这个限度吗,可以知道但是没必要

因为

flex-shrink这个属性当你溢出了使用它,可以缩小比例

属性的默认值为1,当为0时不参与压缩,当值为2的时候是什么呢?

在原基础上再压缩一倍就是两倍了,值越大压缩的越大但是有限度

第二个弹性引出

它不会影响内外边距的距离

那么它的极限就是根据内外边距,压缩到内外边距的最大值

如果没有内外边距呢?

那只会显示字单纯的字

第二道数学题:如何计算压缩后的盒子宽

1920 - 1024 = 896

896为压缩像素

公式为 总小盒子像素 - 外容器 = 压缩像素

默认压缩为1,那么求它的单个的小盒子就为 896 除以 盒子个数 6 = 单个小盒子 149

抽象轻松web_第2张图片

 为什么和值不一样呢?

因为求出单个压缩的值,而不是压缩后的值

如果超过了怎么办,那就溢出

那只需要最后一部减去它

谁减去?

小盒子减去小盒子压缩像素就可以知道了小盒子宽

320-149=171

1的差距可以忽略 不计

有压缩就有扩展

flex-grow这个为扩展,默认值为0

扩展只会算你的剩余空间

第三个概念剩余空间是什么呢?

去掉有元素(内容)的就是剩余空间了,它的上限就是这个小盒子,没办法溢出,也不可能通过这个属性继续强行溢出

flex-basis:80px

它就是弹性盒子里特别的宽

抽象轻松web_第3张图片 

抽象轻松web_第4张图片 

 

 主轴:第一个是左右,第二个是上下

第四:他们可以合体在一起

flex-grow + flex-shrink + flex-basis = flex

注意顺序

你可能感兴趣的:(css,前端)