左右 div 与包含一行的普通 div 交替

Question

我收到了我在此处发布的问题的答案Flex grid: Alternate left and right。

但我的要求刚刚改变，我正在努力完成这个任务。与链接的问题一样，我希望 L & R div 占其容器的 70%，但现在我需要在每个 L & R div 末尾有一条线（虚线），但该线必须运行容器的 100%。我让它可以左右浮动，但需要它是 Flexbox，Flexbox 的变量和属性太多，很难知道从哪里开始。

L
-------------
            R
-------------
            R
-------------
            R
-------------
L

Answer 1

您可以使用伪元素:after来创建虚线边框

我编辑了您提供的答案的片段

* {
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

div.left,
div.right {
  width: 70%;
  padding: 5px 10px;
}

div.left {
  align-self: flex-start;
}

div.right {
  align-self: flex-end;
  text-align: right;
}

.column div::after {
  content: '';
  border-bottom: 1px dotted #000;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  margin:0 10px;
}

<div class="column">
  <div class="left">L</div>
  <div class="right">R</div>
  <div class="left">L</div>
  <div class="right">R</div>
  <div class="left">L</div>
  <div class="left">L</div>
  <div class="right">R</div>
  <div class="right">R</div>
  <div class="right">R</div>
  <div class="left">L</div>
</div>