Flex Box 项目未与上一行对齐答案

【问题标题】：Flex Box Items not aligning with the above rowFlex Box 项目未与上一行对齐
【发布时间】：2021-08-06 11:59:52
【问题描述】：

我正在尝试构建一个类似网格的小型组件。该组件将具有列标题，然后是数据行。显然，所有数据都将使用 props 传递给该组件。我面临一个小的 CSS 问题。我希望行的文本与标题文本对齐。看到我做的红色箭头，我希望“计划”文本直接在“类型”测试下。同样，“April”文本应直接位于“last modified”文本下方。这是我的组件结构的 html/css 示例。

我知道我为此使用了两个不同的弹性框，我需要的不是默认行为，而是如何实现它？这是我的 CSS

body {
  font-family: sans-serif;
  height: 100vh;
}
.header {
  background: grey;
  font-weight: 500;
}
.flex {
  display: flex;
  
  /* border: 1px solid yellow; */
}
.column {
  flex-direction: column;
}
.justify-content {
  justify-content: space-between;
}
.items {
  margin: 0;
  padding: 0;
}
div {
  border: 1px solid red;
  text-align: center;
}
.basis {
  flex-basis: 0px;
}

【问题讨论】：

你也可以做grid-template-columns: repeat(3, 1fr);，但老实说，这看起来像是<table> 的工作。

标签： css reactjs flexbox

【解决方案1】：

您可以设置显式的max-width 值，或者更直接的方法是使用display: grid，但如果您要显示表格数据，那么这将是本机<table> 结构的合适用例。

【讨论】：

显然，您可以在表格中免费获得所需的功能，因为这就是它的设计目的。

【解决方案2】：

这是一个使用CSSgrid的例子。

body {
  font-family: sans-serif;
  height: 100vh;
}
.header {
  background: grey;
  font-weight: 500;
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.header div {
  text-align: center;
  border: 1px solid blue;
}

.items {
  display: grid;
  grid-template-columns: repeat(3,1fr)
}

.items > div {
  border: 1px solid red;
  text-align: center;
}

  <div class="container">
    <div class="header">
      <div>Name</div>
      <div>Type</div>
      <div>Last Modified</div>
    </div>
    <div class="items">
      <div>Account</div>
      <div>Plan</div>
      <div>April</div>
    </div>
  <div>

【讨论】：