弹性网格：左右交替

Question

使用Flexbox ：我想将一系列div垂直放置在一个包含div的部分，有些则留下一些权利。每个div L＆amp; R是容器div的70％宽度。 L div必须固定在容器的左侧，R div固定在容器的右侧。

L
      R
L
L
      R
      R
      R
L

Answer 1

创建一个包含flex-direction: column的弹性容器，然后根据它与align-self的类对齐每个子项：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将float:left和float:right与:nth-child选择器

一起使用

div:nth-child(odd) {
  float: left;
  width: 70%;
  background: red;
}

div:nth-child(even) {
  float: right;
  width: 70%;
  background: blue;
}

div {
  height: 50px;
}

<div>
  L
</div>
<div>
  R
</div>
<div>
  L
</div>
<div>
  R
</div>
<div>
  L
</div>