时间戳

首页 > 解决方案 > Flex Box 项目未与上一行对齐

css - Flex Box 项目未与上一行对齐

问题描述

我正在尝试构建一个类似网格的小型组件。该组件将具有列标题，然后是数据行。显然，所有数据都将使用 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;
}

标签： cssreactjsflexbox

解决方案

这是一个使用CSS grid的例子。

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>

推荐阅读