使 Flexbox 表格布局与内容对齐

Question

我正在尝试使用 Flexbox 创建一个简单的表格布局（以便表格能够正确响应）。我这样做（你需要反应和引导）：

export function UITest(){
        const data = [
            {
                Name: "John Doe",
                Address: "123 Main St, Springfield, IL",
                Insurance: "Health Insurance Co.",
                Phone: "[phone]",
                Email: "[email protected]"
            },
            {
                Name: "Jane Smith",
                Address: "456 Oak Rd, Shelbyville, IL",
                Insurance: "Life Care Insurance",
                Phone: "[phone]",
                Email: "[email protected]"
            },
            {
                Name: "Lǐ Tiānyǔ Zé Fēng Chéng Zhì Hóng Wěi",
                Address: "789 Pine Ln, Capital City, IL",
                Insurance: "Auto Protection Insurance",
                Phone: "[phone]",
                Email: "[email protected]"
            },
            {
                Name: "Emily White",
                Address: "101 Maple Ave, Ogden, IL",
                Insurance: "Health First Insurance",
                Phone: "[phone]",
                Email: "[email protected]"
            }
        ];
    const titles=["Name", "Address", "Insurance", "Phone", "Email"]

    return(
        <div className="container bg-secondary my-3 p-3">
            <h1 className="mb-5">UiTest</h1>

            <div className="d-flex flex-column justify-content-center overflow-scroll">
                <div className="border-bottom border-2 d-flex flex-row justify-content-center">
                    {titles.map((title, index) => (
                        <div key={index} className={"border-start p-2"+(title==="Insurance"?" flex-grow-1":"")}>{title}</div>
                    ))}
                </div>
                {data.map((item, index) => (
                    <div key={index} className="d-flex justify-content-center bg-info m-2 p-2 rounded">
                        {Object.entries(item).map(([key, value], index) => (
                            <div key={index} className={"border border-1 p-2"+(key==="Insurance"?" flex-grow-1":"")}>{value}</div>
                        ))}

                    </div>
                ))}

            </div>
        </div>
    )
}

问题是，列没有正确排列（边框是为了可视化问题）：

我尝试用表格解决这个问题，但它不起作用，因为无论如何使表格正确排列列，都不能很好地与 Flexbox 配合使用。另外，您不能像我想要的那样对表格设置行样式。 如何使列正确排列（理想情况下不设置固定宽度，同时仍然保留表格的响应能力，它沿着保险列弯曲）

Answer 1

不幸的是，Flex 布局没有前一个元素大小的上下文。建议使用

<table>

正确填充您的数据。

但是，您想保留嵌套结构但不想处理

<table>

，另一种方法是使用

subgrid

。

这是 JSX 代码，您可以使用它来分配正确的

style

，而无需实际创建 CSS。

<div className="container bg-secondary my-3 p-3">
  <h1 className="mb-5">UiTest</h1>

  <div
    className="justify-content-center overflow-scroll"
    style={{ display: 'grid', gridTemplateColumns: titles.map(title => title === 'Insurance' ? '1fr' : 'auto').join(' '), gridAutoFlow: 'row' }}
  >
    <div
      className="border-bottom border-2"
      style={{ display: 'grid', gridColumn: '1 / -1', gridTemplateColumns: 'subgrid' }}
    >
      {titles.map((title, index) => (
        <div key={index} className="border-start p-2">{title}</div>
      ))}
    </div>
    {data.map((item, index) => (
      <div
        key={index}
        className="bg-info m-2 p-2 rounded"
        style={{ display: 'grid', gridColumn: '1 / -1', gridTemplateColumns: 'subgrid' }}
      >
        {Object.entries(item).map(([key, value], index) => (
          <div key={index} className="border-start p-2">{value}</div>
        ))}
      </div>
    ))}
  </div>
</div>

这是它生成的 HTML 代码：

<div class="container bg-secondary my-3 p-3">
    <h1 class="mb-5">UiTest</h1>
    <div style="display: grid; grid-template-columns: auto auto 1fr auto auto; grid-auto-flow: row;" class="overflow-scroll">
        <div style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;" class="border-bottom border-2 d-flex flex-row justify-content-center">
            <div class="border-start p-2">Name</div>
            <div class="border-start p-2">Address</div>
            <div class="border-start p-2">Insurance</div>
            <div class="border-start p-2">Phone</div>
            <div class="border-start p-2">Email</div>
        </div>
        <div style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;" class="g-info m-2 p-2 rounded">
            <div class="border border-1 p-2">John Doe</div>
            <div class="border border-1 p-2">123 Main St, Springfield, IL</div>
            <div class="border border-1 p-2">Health Insurance Co.</div>
            <div class="border border-1 p-2">[phone]</div>
            <div class="border border-1 p-2">[email protected]</div>
        </div>
        <div style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;" class="g-info m-2 p-2 rounded">
            <div class="border border-1 p-2">Jane Smith</div>
            <div class="border border-1 p-2">456 Oak Rd, Shelbyville, IL</div>
            <div class="border border-1 p-2">Life Care Insurance</div>
            <div class="border border-1 p-2">[phone]</div>
            <div class="border border-1 p-2">[email protected]</div>
        </div>
        <div style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;" class="g-info m-2 p-2 rounded">
            <div class="border border-1 p-2">Lǐ Tiānyǔ Zé Fēng Chéng Zhì Hóng Wěi</div>
            <div class="border border-1 p-2">789 Pine Ln, Capital City, IL</div>
            <div class="border border-1 p-2">Auto Protection Insurance</div>
            <div class="border border-1 p-2">[phone]</div>
            <div class="border border-1 p-2">[email protected]</div>
        </div>
        <div style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;" class="g-info m-2 p-2 rounded">
            <div class="border border-1 p-2">Emily White</div>
            <div class="border border-1 p-2">101 Maple Ave, Ogden, IL</div>
            <div class="border border-1 p-2">Health First Insurance</div>
            <div class="border border-1 p-2">[phone]</div>
            <div class="border border-1 p-2">[email protected]</div>
        </div>
    </div>
</div>

观看现场演示