浮浮,唐不要忘记父元素应该清除浮动。
在最近的一次面试中,面试官问,在水平布局中,假设有三个div,每个都有固定的宽度apx。如果想让两边的宽度都是x,那么中间div的间隔就是2x。x可以是自适应的。
怎么做很简单,就两行代码:
justify-content的常见属性有:flex-start|flex-end|center|space-between|space-around。
前三个按字面意义对齐到行首、行尾和行中间。
在最后两个示例中,space-between:元素将均匀分布在行中。如果最左边的剩余空格为负,或者该行只有一个子元素,则该值等效于#39flex-start#39。在其他情况下,第一个元素的边界与该行的主起始位置的边界对齐,而最后一个元素的边界与该行的主结束位置的边距对齐,而剩余的扩展框项均匀分布,并确保它们之间的空白空间相等。白话的意思是第一个元素的位置与该行的起始位置对齐,最后一个元素与该行的结束位置对齐,中间剩余的空间均匀分布。
space-around:弹性盒元素将在行中均匀分布,两端将在子元素之间保留一半的空间。如果最左边的剩余空间为负,或者该行中只有一个扩展框项目,则该值等效于#39center#39。其他情况下,扩展框项均匀分布,保证每对之间的空格相等,第一个元素前的空格和最后一个元素后的空格是其他空格的一半。
说到这个,it都是废话,这也是你最初学习flexlayout会接触到的。主要是面试官问,如果中间不是2x,那就是x,也就是每个缺口和两边的区间一样。那个it::
起初,我想在两边设置填充,并在中间使用空格,但在不同屏幕上看到的两边的填充值肯定是不同的,所以我不我不想等待双方的差距。。。所以我没有idon'我最后也想不通。回来后发现justify-content居然还有space-even这样的属性!为什么使用这个属性是不言而喻的。均匀排列各元素,各元素之间的间隔相等。问题解决了。然而,空间均匀的兼容性仍然比通常使用的justify-content值差得多。
我们可以不要只是见面解决面试。问题,实际情况中可能会出现很多奇妙的情况,比如,四个x上图中的s改为三个xs和one2x(虽然我没见过这么奇妙的设计。。)那么我该怎么办呢?
这里我想到了css3的cacl(),可以计算百分比和px值,而且是强批。例如,要达到上述要求:
也能取得成果。(假设a的值是100px)并且无论什么情况都可以计算出你想要的大小。it这不太好。