Html Flexbox设置某些详图索引文本的样式

我正在尝试使用Flexbox设置一些标注文本的样式

希望以下文字能够描述视觉意图

我有一个移动布局，这将是一个博客文章

典型的文本只是一种标准样式

对于文本的某些部分，可能是一个重要的段落，我想用不同的方式来设置它的样式——我称之为样式标注

我希望这种风格有一条约10px的蓝色垂直线，与左手边齐平

然后在这条蓝色细线的右边，我想要一个稍微不同样式的标注文本

蓝线的垂直高度将等于随附详图索引文本的高度

我有一个例子，我尽了最大努力看到代码笔链接，这看起来很可怕。它在示例中包含了一些注释，希望这能让我的意图更加清晰

以下是相关CSS flex样式的副本：

div .call-out {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
justify-content:space-evenly;
}

div .call-out-bar {
flex: 1;
width: 10px;
background: blue;
}

div .call-out-text {
flex: 1;
width: 100%;
}

下图。希望能把事情弄清楚

谢谢你的意见

---

标记

看起来您可以只使用CSS来实现左边框和左填充。使用flex hack？有什么理由吗？。我建议您使用EM标记来强调文本的某些部分，这在语义上会更好

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

<p><em>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</em></p>

<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

左边的填充应该可以做到这一点

编辑： 正如@arieljuod提到的，也可以使用。这样就不再需要2

.call-out-text {
  flex 1;
  width: 100%;

  padding-left: 10px;
  border-left: 5px solid blue;
}

// EDIT
em {
  padding-left: 10px;
  border-left: 5px solid blue;
}

html，正文{ /* https://material.io/design/typography/the-type-system.html */ /*轻型：300；普通：400；中型：500*/ 字体系列：“Roboto”，无衬线； 线高：1.5； 字体大小：正常； /*这将设置1rem=16px*/ 字体大小：16px； 宽度：100%； 身高：100%； 保证金：0； 填充：0； } .包裹{ 宽度：100%； 身高：100%； /*边框：1px实心rgba250,0,0,1*/ } p{ 字体大小：0.875rem； 字体大小：300； 字母间距：0.5px； } 分区呼叫{ 显示器：flex； 弯曲方向：行； 对齐项目：拉伸； 柔性包装：nowrap； 对正内容：空间均匀； } em{ 左侧填充：10px； 左边框：5px纯蓝色； } .发出文本{ 弹性1； 宽度：100%； 左侧填充：10px； 左边框：5px纯蓝色； } FlexBox导航 ipsum dolor sit amet，为精英献身。消费品，比泰

lorem ipsum dolor sit amet，奉献精英。空之神，光明之神

Qwerty！ 这是一个标注栏。它显示一些重要的或不寻常的信息，应该为用户提供一些额外的信息

现在我们回到正常的文本

---

您的两个flex:1规则都缺少冒号。此外，所需的布局是什么？我认为文本不应该重叠，但是你已经在那里的水平空间很紧了。你想把一部分放到下一行吗？或者添加一个滚动条？或者您希望调用位于z索引较高的文本之上？所需布局的屏幕截图可能会有所帮助。谢谢@obsidiange。希望上面的图片能把事情弄清楚。看起来你只需要使用CSS就可以做到左边框和左填充。有什么理由使用flex黑客吗？。我建议您使用EM标记来强调文本的某些部分，这在语义上会更好@arieljuod在这种情况下语义正确的元素应该是blockquote:@joshas，OP从未提到过这是一个引号，对于他的描述，我理解他想强调文本的某些部分。我可以是一个报价虽然，只有OP没有指定。

.call-out-text {
  flex 1;
  width: 100%;

  padding-left: 10px;
  border-left: 5px solid blue;
}

// EDIT
em {
  padding-left: 10px;
  border-left: 5px solid blue;
}