CSS : 如何做换行的反转

Question

经过一些搜索，我没有找到相反的方法，我给个高度，第二个div在第一个下面，第三个div在右边

.wrapper {
  border: 1px solid black;
  width: 30px;
}

.left {
  border: 1px solid red;
  display: inline;
}

<div class="wrapper">
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
</div>

谢谢

Answer 1

您可以在列 flex-direction 中使用包裹的 flexbox - 请参阅下面的演示：

.wrapper {
  border: 1px solid black;
  height: 40px;
  display: flex; /* Define a flexbox*/
  flex-wrap: wrap; /* Allow wrapping*/
  flex-direction: column; /*Column direction*/
  align-items: flex-start; /* Override default stretching*/
  align-content: flex-start; /* aligning wrapping lines */
}

 .left {
  border: 1px solid red;
  display: inline;
}

<div class="wrapper">
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
</div>

Answer 2

更多关于 kukkuz 的回答。进一步阅读 Flexbox

弹性方向

这建立了主轴，从而定义了弹性项目在弹性容器中的放置方向。 Flexbox 是（除了可选的包装之外）单向布局概念。将弹性项目视为主要以水平行或垂直列布局。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认）：在ltr中从左到右；从右到左 rtl
row-reverse：从右到左在ltr；从左到右 rtl
column：与 row 相同，但从上到下
column-reverse：与 row-reverse 相同，但从下到上

CSS : 如何做换行的反转

CSS : How to do the reverse of line wrapper

html

css

flexbox

display