在前端开发中，表格是一个常见的元素，而CSS Flexbox布局又是一个非常强大的布局方式。在实践过程中，我们常常发现，在Flexbox布局下，表格的样式会有所偏差。本文将会介绍在Flexbox布局下的表格样式的解决方案。
现有问题
在Flexbox布局下，表格单元格之间的水平间距和垂直间距会容易受到Flexbox布局的影响，从而导致表格的样式严重偏差。如下图所示：
这样的表格显然是不能通过默认的CSS样式来实现的。所以我们需要找到解决方案。
解决方案
经过实践和总结，我们得出了解决这个问题的方案。通过以下步骤，我们可以轻松地实现表格的样式控制：
1. 将表格转换成Flexbox布局
通过将表格设置为Flexbox布局，我们可以更精细地控制表格的样式。可以将表格容器的 display 属性值设置为 flex。
.table {
display: flex;
flex-wrap: wrap;
}在上面的代码中，我们将父元素 .table 的 display 属性设置为 flex，并设置了 flex-wrap 属性的值为 wrap。这两个属性是非常基础的Flexbox属性，其作用是使表格内元素按照我们的期望排列。
2. 控制表格的宽度和高度
我们需要明确一个概念，Flexbox布局并不支持默认的 table 布局属性，因此，在Flexbox布局下，我们必须通过自定义样式来控制表格元素的尺寸。
.table {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
width: 100%;
height: auto;
}在上面的代码中，我们使用了 padding: 0 和 margin: 0 来覆盖默认的样式，以达到更精细的控制。我们的目标是让表格元素沿着我们期望的方向排列，因此，我们必须限制每个元素的宽度和高度。
.table > * {
flex-basis: calc(100% / 3);
height: auto;
}在上述代码中，我们将 flex-basis 属性设置为每行的元素数。在这个例子中，我们将每行的元素数设置为 3。这样，每个元素的宽度将会是 33.3333%，同时我们也将元素的高度设置为 auto，以保证每个元素的高度在内容填充完之后自动撑开。
3. 控制单元格样式
最后，我们需要进一步细化我们的样式，以确保每个单元格都具有边距和内填充。我们可以使用以下样式规则来控制单元格：
.table > * > * {
margin: 5px;
padding: 10px;
}在上述代码中，我们将父元素 .table 子元素（即表格行）及其所有子元素（即表格单元格）的 margin 属性设置为 5px，并将 padding 属性设置为 10px。这两个属性是根据我们的需求而指定的。在实际情况中，我们应该根据自己的要求进行调整。
完整的代码示例
最后，将上述示例代码汇总起来，如下所示：
-- -------------------- ---- -------
---- --------------
-----
---------------
---------------
---------------
------
-----
---------------
---------------
---------------
------
-----
---------------
---------------
---------------
------
------
-------
------ -
-------- -----
---------- -----
-------- --
------- --
------ -----
------- -----
-
------ - - -
----------- --------- - ---
------- -----
-
------ - - - - -
------- ----
-------- -----
-
--------总结
在本文中，我们讨论了Flexbox布局下的表格样式问题，并提供了解决方案。我们重新调整了表格的样式，并通过控制每个单元格的尺寸来达到我们的目的。同时我们还通过示例代码和实际效果进行了演示，希望本文对于大家的学习和开发有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461cab5968c7c53b03236e7