flex-directionを一部解除したい

Question

前提・実現したいこと

下記サンプルコードにあるcontent1とulは横並びに表示して、
content2だけulの下に表示したいです。

何か方法はありますか。

該当のソースコード

<div class="wrapper">
    <div class="container">
        <div class="content1"></div>
          <ul><li></li></ul>
        <div class="content2"></div>
    </div>
</div>

.wrapper {
    display: flex;
    flex-direction: column;
}
.container {
    .content1 {
        .li{
           }
    }
    .content2 {
    }
}

試したこと

下記のコードやdisplay:block;を入れてみましたが、変わりませんでした。

    .content2 {
        flex-direction: row;
    }

Answer 1

下記でどうでしょうか。

.container {
  display: flex;
  flex-wrap: wrap;
}
.content2 {
    width: 100%;
}

display: flex; は設定した要素の子要素のレイアウトを指定する（規定は横並び）。
flex-wrap: wrap;で折り返しを許可する。
.content2の幅を100%にすることで折り返されて下にくる。

---

gridでもいいでしょう。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.content2 {
  grid-column: 1 / 3;
}

Comments

[scottie320]

ありがとうございます。gridの方法で実装を行いました。
大変参考になりました。