html - flex 网格 : Alternate left and right

Question

使用 Flexbox:我想将一系列 div 垂直放置在一个包含 div 的下方，一些在左边，一些在右边。其中每个 div L & R 是容器 div 宽度的 70%。 L div 必须固定在容器的左侧，R div 必须固定在容器的右侧。

L
      R
L
L
      R
      R
      R
L

Answer 1

制作一个具有 flex-direction: column 的 flex 容器，然后根据其类与 align-self 对齐每个子项:

* {
  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;
  background: orange;
}

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

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