弹性格网：左右交替

Question

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

L
      R
L
L
      R
      R
      R
L

Answer 1

制作一个具有的flex容器flex-direction: column，然后根据其子类将每个子项与对齐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>