当前位置: 首页 > Web前端 > HTML

网页布局实用技巧:flex主轴自动外边距

时间:2023-04-02 18:58:35 HTML

问题描述首先我们来看一个需求场景:水平方向子元素之间的距离,以及子元素与父容器边框之间的距离需要实现如上图。平等的。实现的方式有很多种,这里要讨论的是:如何使用Flex布局简洁的实现?我这里使用的方法是:使用自动边距在主轴上对齐。Automaticmarginsarealignedonthemainaxis让我们先看看MDN对此的解释:...Automaticmarginstakesalltheextraspace-setautomaticleftandrightmarginsonablockwillcenterit.两边尽量占据空间,方块放在中间。这是有道理的:自动边距会平分整个剩余空间。我们试试这个方案,代码如下:1

2
3
.container{显示:flex;对齐项目:居中;框大小:边框框;边框:2px虚线#7cb305;宽度:600px;高度:200px;:auto;}.item{显示:flex;证明内容:居中;对齐项目:居中;保证金:0自动;宽度:100px;高度:100px;背景:#722ed1;边界半径:50%;#fff;font-size:22pt;}再看看效果:好像有点不对。仔细观察子元素之间的距离比到边框的距离,大约是子元素到边框的距离的两倍,这和我们预期的效果不一样。按照MDN的解释,自动边距会平分剩余空间,但是为什么会出现上图呢?下面说说我的理解。主轴剩余空间“分配权重”与子元素自动margin的关系这种分配权重关系在MDN上没有解释,纯属个人看法,我们可以这样理解:如果一个子元素在一个区域(或方向))声明了margin-*:auto,那么这个空间的分配权重为+1。如果另一个子元素在同一区域(或方向)也有自动margin声明,那么这些声明中分配权重为+1的自动边距区域,剩余空间按照分配权重进行划分。首先,这个理解显然可以满足MDN上的解释。那我们来看看上图的情况是怎么解释的:我们把子元素1的左边区域命名为间隔区域1,子元素1右边的区域命名为间隔区域2。子元素1的左右两边有自动外边距,则间距区域1的权重=1,间距区域2的权重=1子元素2的左右两边都有自动外边距,则间距区域2的权重=1+1=2最后间隔区域1的权重和间隔区域1的权重是1:2的关系,其他区域依次类推。最后根据权重来划分间距区域的大小,然后我们根据这个理解来调整代码。只需要在每个分隔的区域声明一个自动外边距即可:首先我们去掉.item样式上的外边距,然后只在子元素1和子元素3上设置style="margin:0auto"的HTML。调整如下:123.container{display:flex;对齐项目:居中;框大小:边框框;边框:2px虚线#7cb305;宽度:600px;高度:200px;;证明内容:居中;对齐项目:居中;宽度:100px;高度:100px;背景:#722ed1;边界半径:50%;颜色:#fff;font-size:22pt;}OK,问题解决按照这个理解,还有一个设置可以达到同样的效果:123以上代码已经放到codepen:https://codepen.io/deepfunc/pen/BembyQ