cssのflexを利用して横配列と縦配列を再現したい

Question

CSSのflexを利用して以下のような構造を作りたいのですが、どのようにすればいいのでしょうか。

HTML的には以下のような構造です。

<main>
 <div id="main-content">
 </did>
 <div class="AD">
 </did>
 <div id="side-content">
 </did>
</main>

ADなしでの、main-contentとside-contentでは以下のCSSでできたのですが、ADを入れると当たり前ですが3カラムになります

main {
 display: flex;
}

ReactNativeのFlexboxレイアウト の記事を読んで、align-itemsを使うべきなのかと思いましたが、align-itemsではないようです。。。
教えていただけないでしょうか。。。

サイドバーにはめるべきADとside-contentをdivでくくってしまえば良いのですが、できればくくらないでいければなと思うのですが。

##追記
現在、divで囲ってやっているので、divで囲った状態で、 main-content と AD + side-content の高さを揃える方法を教えてください。
さらにADの数を増やせるようにしたいです。（高さの変化に対応する）

<main>
 <div id="main-content">
 </div>
 <div id="Sidebar">
 <div class="AD">
 </div>
 <div class="side-contents">
 </div>
 <div class="AD">
 </div>
</main>

main {
 display: flex;
}

Comments

[Lhankor_Mhy]

高さは固定ですか？　成り行きですか？

[2001Y]

高さは変動します。よろしくお願いします。

[Lhankor_Mhy]

main-content と AD + side-content の高さの大きい方に合わせる、という理解で合ってますか？

[2001Y]

はい。ADは高さが固定なので、side-content か main-contentが変動することになります。

[Lhankor_Mhy]

それはCSSだけだと難しいかと思います。全体の高さが固定であるならば可能かと思います。または、成り行きであればカラムの高さを合わせなくて良ければ方法がないこともないですが対応ブラウザが不安です。javascriptを使用するのが無難かな、と思います。

[Lhankor_Mhy]

質問の変更を拝見しました。ご提示のコードで（打ち間違いを直せば）問題なく想定の表示になると思うのですが、分からない部分はどれですか？

[2001Y]

12:27 - ですよね。追記の方での高さもJavaScriptが必要になりますね？100%などの指示ができないのですが。

[2001Y]

13:49 - 追記 をみてくださったのだと思いますが、divで囲って仕舞えばあのように表示ができます。最初はdivなしでやってみたかったのですが、ダメそうなのでdivで囲った上で、高さの変更に対応させたいなと思い追記させていただきました。

[Lhankor_Mhy]

では、解決ですか？　その場合は、自己解決の登録をお願いいたします。

[2001Y]

こちらの質問については解決したとさせていただきますが、divで囲った場合、中の要素の高さがそろいません。その部分について教えてくださると嬉しいです。

[Lhankor_Mhy]

当方で試したところ、問題なく要素の高さがそろいました。前記のとおり、ご提示のコードには何箇所か打ち間違いがありますが、それを修正しても想定する表示になりませんか？

[Lhankor_Mhy]

あ、そうか、高さが合わないケースありますね。失礼しました。

[2001Y]

大変申し訳ありません。完全な説明不足でした。#Sidebarは高さ変動するのですが、.side-contentsを高さに合わせたく、その方法がわかりません。また、追記のコードないのはdidは全てdivです。大変申し訳ありません。

Answer 1

こちらでいかがですか。
https://jsfiddle.net/1zu5gydq/

main{
  display:flex;
}
#Sidebar{
  display:flex;
  flex-flow: column wrap;
}
#Sidebar div{
  flex:1;
}

Comments

[Lhankor_Mhy]

あ、wrapの指定はいらないですね……

[2001Y]

サイドバーにflexを入れちゃえばよかったんですね！ありがとうございます！！
真ん中の大きさを変動させるためにはflex:1;。ありがとうございます！