柔性网格：交替左右 [英] Flex grid: Alternate left and right

问题描述

使用Flexbox ：我想将一系列的div垂直放置在一个包含div的位置，并保留一些权利。凡每个L& R是容器div的70％宽度。 L div必须固定在容器的左侧，R div固定在容器的右侧。

  L 
 R 
 L 
 L 
 R 
 R 
 R 
 L 
  

解决方案

创建一个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;背景：黄色; text-align：right;} < div class = 列 > < 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>  

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 pinned to the left side of the container and R div is pinned to the right hand side of the container.

L
      R
L
L
      R
      R
      R
L

解决方案

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

这篇关于柔性网格：交替左右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！