html - 保持绝对 flex 元素与 block div 对齐

Question

我有文本和双竖线 (||)，我想让它们始终对齐。

线条下方有文字(“2016”)，但现在在调整窗口大小时，文字会稍微滑动。

当您调整窗口大小时，它会更清晰可见，因此布局会发生一点变化，文本和线条会与右侧对齐。

这是演示:https://jsfiddle.net/uh7ra6v5/ .

.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #B9D7D9;
  border-right: 0.13em solid #B9D7D9;
  height: 100%;
  width: 0.8rem;
  margin-left: 42%;
  box-sizing: border-box;
}
.verticalLine {
  position: relative;
  width: 10%;
  flex-shrink: 0;
}
.flex {
  display: flex;
}
.side {
  width: 45%;
}
.year {
  width: 100%;
  text-align: center;
  color: #B35300;
}
@media only screen and (max-width: 768px) {
  header h1 {
    font-size: 3rem;
  }
  .year {
    text-align: right;
  }
  .side {
    width: 90%;
  }
}

<div class="flex rev">
  <div class="side">test
    <br>test
    <br>test</div>
  <div class="verticalLine">
  </div>
</div>

<div class="year">
  2016
</div>

Answer 1

因为您已经在使用 flexbox，所以您可以使用 flex 属性完成布局。无需绝对定位。

.flex {
    display: flex;
}
.side {
    flex: 0 0 45%;                      /* 1 */
}
.verticalLine {
    display: flex;                      /* 2 */
    flex-direction: column;
    align-items: center;                /* 3 */ 
    flex: 0 0 10%;                      /* 1 */
}
.verticalLine:before {
  flex: 1;                              /* 4 */
  content: "";
  border-left: 0.13em solid #B9D7D9;
  border-right: 0.13em solid #B9D7D9;
  width: 0.8rem;
  box-sizing: border-box;
  
}
.year {
  color: #B35300;
}

<div class="flex rev">
  <div class="side">test<br>test<br>test</div>
  <div class="verticalLine">
       <div class="year">2016</div>
  </div>
</div>

jsFiddle

注意事项:

1. 通过结合原始代码中的 flex-shrink 和 width 来简化代码。
2. 使行元素成为列方向的嵌套 flex 容器。行(伪元素)和文本(DOM 元素)都是子元素，可以接受 flex 属性。
3. 将行和文本水平居中。
4. 行会占用容器中的所有可用空间。