CSS：如何反转行包装器

Question

经过一番搜索，我找不到如何反过来， 我会给出一个高度，第二个div在第一个下面，第三个div在右边。

https://jsfiddle.net/qq3n52vg/

.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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

更多 kukkuz 回答。有关Flexbox

的进一步阅读

<强>挠曲方向

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

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

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