html - 如何使标题停留在顶部，以及如何使标题与内容之间保持空隙的线

我试图找出：


为什么h6标签不在顶部而不是中间对齐（因为它具有justify-self: flex start）
如何使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>

Codepen：https://codepen.io/ns91/pen/OJLwdPm

感谢您的任何帮助和想法。

最佳答案

为什么h6标签没有在顶部而不是在中间对齐（因为它具有证明自己：flex start）


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


  显示：flex;


在这种情况下，您不需要为容器使用flexbox，因为子元素是块元素，并且将位于彼此下方


  如何使h6以下的红线填充自身及其下方的h2标签之间的空间（并做出响应）


不知道我是否正确理解了任务。你是那个意思吗（结果如下）



更新


  h2和段落标签应在div中居中对齐，但h6在顶部


我必须添加另一个块以使内容垂直对齐。没有它也可以完成，但似乎更容易。


  红线必须是垂直的，而不是水平的，并填充div顶部的h6和div中间的h2之间的空间


这条线的高度从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上的示例