html - 如何让一个标题停留在顶部，一条线适合它和下面内容之间的空间

Question

我想弄清楚:

1. 为什么 h6 标签没有在顶部而不是中间对齐(因为它有 justify-self: flex start)
2. 如何让 h6 下面的红线填充它自己和它下面的 h2 标签之间的空间(并响应)

有谁知道为什么 (1) 不起作用，以及如何实现 (2)？除了伪元素的绝对位置之外，我想不出其他方法，但如果下面有更多文本或浏览器窗口调整大小时，大概无法调整大小？

演示如下:

#container {
  background: #ccc;
  width: 600px;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 1em;
}
h6 {
  position: relative;
  justify-self: flex-start;
}
h6:before {
  content: '';
  width: 1px;
  background: red;
  position: absolute;
  top: 2em;
  height: 4em;
}
* {
  padding: 0;
  margin: 0;
}

<div id='container'>
  <h6>should align at top</h6>
  <h2>Should be the start of the central text area</h2>
  <p>Lorem ipsum dolor sit amet, mei ne verear incorrupte interpretaris, est at justo habemus. Ne paulo atomorum his, cu has illum everti fierent, eos dicit audiam ea.</p>
  <p>Illud fabulas an sit. Et est case reque deleniti, ubique constituam te quo. Prima dolorum deleniti vis in, no eos senserit salutandi.</p>
</div>

代码笔:https://codepen.io/ns91/pen/OJLwdPm

在此感谢您的帮助和想法。

Answer 1

Why the h6 tag isn't aligning itself at the top rather than the middle (as it has justify-self: flex start)

justify-self - 是 CSS Grid 的一个属性。它在 Flexbox 中不起作用

display: flex;

在这种情况下，您不需要容器的 flexbox，因为子元素是 block 状的并且将位于彼此之下

How to make the red line below h6 fill the space between itself and the h2 tag below it (and be responsive)

不确定我是否正确理解了任务。你是那个意思吗？ (结果如下)

---

已更新

h2 and paragraph tags should align centrally in the div but the h6 be at the top

我不得不添加另一个 block 来垂直对齐内容。没有它也可以完成，但似乎更容易。

the red line needs to be vertical rather than horizontal, and fill the space between the h6 at the top and h2 in the middle of the div

这条线的高度从h2开始向上，在h6的顶部设置了一个隐藏红线的背景

更新结果

#container {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 900px;
  min-height: 350px;
  padding: 1em;
  background: #ccc;
  overflow: hidden;
}

h6 {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 16px;
  padding-left: 16px;
  background: #ccc;
}

.inner {
  position: relative;
  z-index: -1;
  margin: auto 0;
}

.inner:before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 1px;
  height: 100vh;
  background: red;
}

* {
  padding: 0;
  margin: 0;
}

<div id='container'>
  <h6>should align at top</h6>
  <div class="inner">
    <h2>Should be the start of the central text area</h2>
    <p>Lorem ipsum dolor sit amet, mei ne verear incorrupte interpretaris, est at justo habemus. Ne paulo atomorum his, cu has illum everti fierent, eos dicit audiam ea.</p>
    <p>Illud fabulas an sit. Et est case reque deleniti, ubique constituam te quo. Prima dolorum deleniti vis in, no eos senserit salutandi.</p>
  </div>
</div>

以及关于 Codepen 的示例