display:flex で縦書きのような配置にしたい

Question

前提・実現したいこと

HTML/CSS(/JS)を使って縦書きのような配置にしたいです。

７４１
８５２
９６３

発生している問題・エラーメッセージ

想定した並びにならない

３２１
６５４
９８７

１４７
２５８
３６９

該当のソースコード

<div class="wrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

.wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;      // 縦並び
  flex-direction: row-reverse; // 左から右
  max-width: 300px;
  max-height: 300px;
}
.item {
  width: 100px;
  height: 100px;
}

試したこと

.wrap {
  flex-direction: column row-reverse; // 複数の値は適応されなかった
}

Answer 1

こうですね。

  direction: rtl;
  flex-direction: column;

Comments

[aqswdefr]

できました。ありがとうございます。

Answer 2

flex-direction: column; でやるなら、列ごとにdivで分けるとか。
もしくは、それを使わずに親要素wrapの幅を各itemの3つ分の幅にすれば自動折り返しになりませんかね？

Comments

[aqswdefr]

列ごとに分けるのも考えたのですが、力業な気がしたのでやめました。
回答ありがとうございました。