对称布局实战：一次解决边距与元素对齐难题

自身实际测试CSS Flexbox以及Grid，遭遇过元素间距一会儿大一会儿小、左右两边不相对称的状况，刚入门的新手，依照步骤一个一个地去操作，便能够轻轻松松地躲开这类平常会出现的问题。

如何用Flexbox实现完美对称布局

Flexbox堪称用于处置那些呈现为单行或者单列状态下对称对齐情形的得力工具。首先第一步，要在外层的那个用以容纳元素的容器之上进行样式设置，设置display变为flex这个属性值，再设置justify内容为center，还要设置align-items其属性值为center，通过这样的设置途径，那位于内部的所有子元素就会依据相应规则自动地在主轴以及交叉轴方向保持居中状态。要是期望元素在容器之内均匀地分布开来，那就运用justify-content: space-between;，它会自动将首项与末项推挤到容器的两端之处，而中间的各项则会均匀地进行分布。

1. 设置容器为flex并开启换行

操作路径：于CSS文件里，向外层容器添加display: flex; flex-wrap: wrap;，要是子元素总宽度超出容器宽度，便会自动折行，维持每行对称排列，留意，需给各个子元素设置固定宽度或者运用flex-basis，像flex: 1 1 200px;，以此每个子元素最小200px，多余空间平分。

新手需避开的坑，常见的报错情况是，子元素堆积在同一行而不会自动换行，又或者是折行之后左右两边的边距出现错误。其核心的原因在于，忘记添加flex-wrap: wrap; ，又或者是子元素宽度加起来算得不准确。办法是快速解决：查看容器有无明显设定宽度（像width: 100%;这样），而且子元素采用box-sizing: border-box;，避免padding让宽度增大致使行尾出现多余空白。

2. 使用margin auto定位

操作的路径是，要是仅仅存在两个子元素，想要使得其中一个处于靠左的位置，另一个处于靠右的位置，那么直接为其中的一个添加margin – left: auto;，如此一来它便会自动去占据左侧所有剩余的空间，而另一个就会跟着贴向右侧。比如：

，给.right加margin-left: auto;。

常见报错呈现为，添加了margin auto之后，元素出现跑飞的状况，核心原因在于，容器并未设置display: flex;，快速解决办法是，首先要确认外层容器已然处于flex环境，接着再去检查是否错误添加了justify-content: center;，因为这会与margin auto产生冲突，只需二选一就行。

Grid布局如何解决多列对称对齐

要是存在多行多列精确对称的需求，Grid使用起来更便利。首先，在容器当中设置display: grid; grid-template-columns: repeat(3, 1fr);，如此一来就能自动生成三列宽度相等。倘若期望列宽能够依据内容自动适配，运用grid-template-columns: auto auto auto;，然而在这个时候左右对齐或许并非十分规整，建议选用1fr。

3. 定义列宽与间距

操作路径，是要在容器里添加display: grid; ，还要添加grid-template-columns: repeat(3, 1fr); ，还要添加gap: 20px;。如此这般的话，就可使得三列等宽，并且列间距固定为20px ，而且可知每一列内部元素会自动对称。要是想用固定宽度，像是300px 300px 300px ，然而需要注意的是，如果容器宽度发生变化，后两列会表现出溢出状况，并不如1fr那样灵活。

【新手需防】，常见出错：列的宽度并非规整一致，或者是最末尾的那个列被强行挤弄到下一行去。关键缘由：子元素采用了固定的宽度，或者是grid-template-columns的数值加起来超出了容器的宽度。迅速的解决方法，采用minmax(200px, 1fr)，以使每一列最少达到200px，将多余的空间进行均分，或者借助auto-fit与minmax来达成列数自适应。

若你所设定的容器宽度为1200px，并且采用grid-template-columns: repeat(3, 1fr); 以及gap: 30px; 的设置，那么每一列的实际宽度则是通过(1200 – 30*2)/3 来进行计算，其结果为380px，呈现出等比对称的状态。关键参数给出这样的推荐，间隙gap要设置成为20px，要对桌面以及移动端阅读舒适度进行兼顾，要是太大了就会出现浪费空间的情况，要是太小了内容就会挤在一块儿。

首先是两种方案的对比，Flexbox方案适合那种单一行或元素数量不多的情况，其代码数量较少，在动态地增加或者减少元素的时候能够自动去适应；Grid方案则适合行列数固定、有精确程度要求的对齐场景，例如商品卡片列表这种情况。然后是取舍的逻辑，要是元素数量不确定且想要自动进行换行处理，那就采用Flexbox；要是行列数固定且追求像素级别的对称，那就采用Grid。

高度频繁出现完整的报错情况：在浏览器当中看到的景象是元素并未呈现对齐的状态，检查F12之后能够发现容器的宽度大小比预先所期望的要小。通常出现这种状况可能会有的基础缘由是父元素使用了padding或者border，从而致使实际的内容空间出现了缩水的现象。完整的解决流程是这样的，给父元素添加box-sizing: border-box;，接着把容器的宽度设置为100%或者固定的值，随后要重新去计算子元素的宽度，如果还是不正确，那就得检查一下是否存在float属性的残留，优先采用display: flex或者grid来进行替代。

该方法不适用于那种需要搞绝对定位或者负边距的比较复杂的切图情形，就像在响应式设计里小屏幕的时候要把某一列给隐藏起来这种情况。有替代的方案：去用CSS multi-column布局，否则就手动计算百分比宽度，并且配合着媒体查询独立地进行调整，如此这般。