Question

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

希望以下单词可以描述视觉意图。

我有一个移动版式，它将成为博客文章。

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

对于文本的某些部分（也许是重要的段落），我想使用不同的样式-我称这种样式为“标注”

我希望此样式具有一条细的蓝色垂直线（大约10像素）-与左侧齐平。

然后在这条蓝色细线的右侧，我希望标注文本的样式略有不同。

蓝线的垂直高度将等于附带的标注文字的高度。

我有一个尽力而为的示例，请参见codepen链接（看起来很恐怖）。该示例中包含一些注释，希望可以使我的意图清楚。

https://codepen.io/snowman8003/pen/vPrEzJ

以下是相关的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%;
}

下图。希望可以弄清楚。

感谢您的输入，

标记

Answer 1

padding-left应该可以解决问题！

编辑：正如@arieljuod所提到的，<em>也可以使用。这样，不再需要2个<div>。

.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, body {
 /*  https://material.io/design/typography/the-type-system.html# */
/* light: 300; regular: 400; medium: 500*/

  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-weight: normal;

/*  this sets 1rem = 16px*/
  font-size: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  height: 100%;
/*  border:1px solid rgba(250,0,0,1);*/
}

p {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.5px;
}

div .call-out {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content:space-evenly;
  
}

em {
  padding-left: 10px;
  border-left: 5px solid blue;
}

.call-out-text {
  flex 1;
  width: 100%;
  
  padding-left: 10px;
  border-left: 5px solid blue;
}

<head>
  <meta charset="UTF-8">
  <title>FlexBox Nav</title>

  <!-- light: 300; regular: 400; medium: 500 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>

<div class="wrap">
  <article>
    <p>ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, beatae?</p>

    
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <!-- EDIT -->
    <em>Qwerty!</em>
    
    <!-- Original option -->
    <div class="call-out">
      <div class="call-out-text">
        <p><i>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</i></p>
      </div>
    </div>

    <p>Now we are back to normal text...</p>
  </article>
</div>

Answer 2

您似乎可以仅使用CSS（左边框和左边框）来实现该功能，请问使用Flex hack的任何理由吗？并且我建议您使用“ EM”标记来强调文本的某些部分，这样做在语义上会更好。

Date                  
01-01-2016 00:00           382187.0
01-01-2016 01:00           382187.0
01-01-2016 02:00           382187.0
01-01-2016 03:00           382187.0
01-01-2016 04:00           382187.0
01-01-2016 05:00           402061.0
01-01-2016 06:00           402061.0
01-01-2016 07:00           402061.0
01-01-2016 08:00           402061.0
01-01-2016 09:00           402061.0
01-01-2016 10:00           402061.0
01-01-2016 11:00           402061.0
01-01-2016 12:00           402061.0
01-01-2016 13:00           402061.0
01-01-2016 14:00           402061.0
01-01-2016 15:00           402061.0
01-01-2016 16:00           402061.0
01-01-2016 17:00           382187.0
01-01-2016 18:00           382187.0
01-01-2016 19:00           382187.0
01-01-2016 20:00           382187.0
01-01-2016 21:00           382187.0
01-01-2016 22:00           382187.0
01-01-2016 23:00           382187.0

然后只是填充和边框

<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>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

Flexbox样式一些标注文字

2 个答案: