Flex Grid: Alternate Left And Right

Using Flexbox: I'd like to place a series of divs vertically down a containing div some left some right. Where each div L & R is 70% width of the container div. L div must be p

Solution 1:

Make a flex container that has flex-direction: column, then align each child item based on it's class with align-self:

* {
  box-sizing: border-box;
}

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

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

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

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

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

Solution 2:

you can use float:left and float:right together with :nth-child selector

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>