本文介绍了柔性网格:交替左右的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

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

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

1403页,肝出来的..

09-06 14:25