使用 CSS flex，我怎样才能得到一行(如 hr 元素)从我的标题开始到行尾

Question

我想在标题后面添加一些看起来像一行的东西：

.d-flex {
  display: flex;
}
.text-right {
  text-align: right;
}
.text-primary {
  color: white;
}
.d-flex h2.text-primary {
 background: blue;
 flex: 0 0 3rem;
}
.d-flex h2:not(.text-primary) {
  background: red;
  flex: 1;
}
.hr {
  height: 2px;
  background: cyan;
}

<b>This is aligned left</b>
<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>
<b>This is aligned right</b>
<div class="d-flex">
  <H2 class="text-primary">2&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>
<b>This should have a "hr" <u>after</u> the title to the end of the line</b>
<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <div class="hr"></div>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>
<b>This should have a "hr" <u>before</u> the title to the beggining of the title line</b>
<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <div class="hr"></div>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>

在我的第三个示例中，我添加了div.hr.

使用弹性框，是否可以：

1. 使其显示在标题之后
2. 位于第一个标题行
3. 稍后，我还需要实现相同的目标，但从行首到标题（对于右对齐的文本）。

Answer 1

以下是实现

此效果的方法，无论 Bootstrap 如何：

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 1px solid #ccc;
  margin: 0 1rem;
}
.divider:before {
  margin-left: 0;
}
.divider:after {
  margin-right: 0;
}
.divider[data-position="right"]:after,
.divider[data-position="left"]:before {
  content: none;
}

<h2 class="divider" data-position="left">Divider</h2>
<span class="divider">Divider</span>
<div class="divider" data-position="right">Divider</div>

可以与任何非空元素一起使用）。

增大到父宽度或max-width值。

SCSS版本，允许设置颜色，描边，填充和选择器：

$divider-selector: ".divider";
$divider-line-color: #ccc;
$divider-padding: 1rem;
$divider-stroke: 1em;
#{$divider-selector} {
  display: flex;
  align-items: center;
  padding: 0 $divider-padding;
  &:before,
  &:after {
    content: '';
    flex: 0 1 100%;
    border-bottom: $divider-stroke solid $divider-line-color;
    margin: 0 $divider-padding;
    transform: translateY(#{$divider-stroke} / 2)
  }
  &:before {
    margin-left: 0;
  }
  &:after {
    margin-right: 0;
  }
  &[data-position="right"]:after,
  &[data-position="left"]:before {
    content: none;
  }
}

小提琴。

Answer 2

将标题设置为 display: flex ，align-items: baseline在同一行中设置水平线和文本。然后将标题文本放入<span>，并添加带有div .hr flex: 1以使其宽度增加到完整。看一下演示：

.d-flex {
  display: flex;
}
.text-right {
  text-align: right;
}
.text-primary {
  color: white;
}
.d-flex h2.text-primary {
 background: blue;
 flex: 0 0 3rem;
}
.d-flex h2:not(.text-primary) {
  background: red;
  flex: 1;
}
.hr-baseline {
  display: flex;
  align-items: baseline;
}
.hr {
  height: 2px;
  background: cyan;
  flex: 1;
}

<b>This is aligned left</b>
<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>
<b>This is aligned right</b>
<div class="d-flex">
  <H2 class="text-primary">2&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>
<b>This should have a "hr" <u>after</u> the title to the end of the line</b>
<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="hr-baseline"><span>Hello World</span><div class="hr"></div></H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>
<b>This should have a "hr" <u>before</u> the title to the beggining of the title line</b>
<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right hr-baseline"><div class="hr"></div><span>Hello World</span></H2>
    <P class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>