flexboxのレスポンシブデザインについて

Question

現在flexboxを使用してレスポンシブデザインのコーディングを行っているのですが、実現できない表示があり困っています。

下記のようなソースで「.leftColumn」「.centerColumn」「.rightColumn」のwidthをそれぞれ

・スマートフォン：全て100％で縦に並べる
・タブレット：「.leftColumn」「.rightColumn」をそれぞれ50％、「.centerColumn」を100％としてleft・rightの下に表示
・PC：「.leftColumn」「.rightColumn」をそれぞれ25％、「.centerColumn」を50％として1：2：1の割合で表示

としたいのですが、タブレットでの表示がうまくいきません。
flexboxでの表示順位指定する「order」プロパティを入れてみたのですがcenterColumnがうまく下に落ちてくれませんでした。
どのように組めば想定した表示が可能でしょうか。どうかお力をお貸しください。

＜html＞

<code>
<div class="container">
  <div class="leftColumn order1">
    <div class="contentBox">
　        ～コンテンツ～
    </div><!-- /contentBox -->
  </div><!-- /leftColumn -->

  <div class="centerColumn order3">
    <div class="contentBox">
　        ～コンテンツ～
    </div><!-- /contentBox -->
  </div><!-- /centerColumn -->

  <div class="rightColumn order2">
    <div class="contentBox">
　        ～コンテンツ～
    </div><!-- /contentBox -->
  </div><!-- /rightColumn -->
</div><!-- /container -->
</code>

＜css＞

<code>
.leftColumn,
.centerColumn,
.rightColumn {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
}

.contentBox {
  margin-bottom: 1em;
}

/* メディアクエリ media query */
@media screen and (max-width: 480px) {
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  .container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
  .leftColumn,
  .rightColumn {
    width: 50%;
  }
  .centerColumn {
    width: 100%;
  }
  .order1 {
    order: 1;
  }
  .order2 {
    order: 2;
  }
  .order3 {
    order: 3;
  }
}
@media screen and (min-width: 769px) {
  .container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
  .leftColumn {
    width: 25%;
  }
  .centerColumn {
    width: 50%;
  }
  .rightColumn {
    width: 25%;
  }
}
</code>

Comments

[kei344]

（質問文は編集できます）質問文のコード(HTML/CSS)はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[kei344]

<code></code>は含まれるのですか？CSSにそれを入れると崩れる原因になりますが。

[退会済みユーザー]

すみません、<code></code>は含みません。
先ほどの編集にあたって「```（バッククオート3つ）で囲ってさらに<code>で囲む」ものと勘違いしました。

Answer 1

デフォルトではflex-wrapがnowrapになっているんで、widthを100%にしても一行にまとめられてしまうからですねー
.containerに対してflex-wrapが折り返し可能だと示してやってくださいなー

<div class="container">
  <div class="leftColumn order1">
    <div class="contentBox">
      ～コンテンツ1～
    </div>
    <!-- /contentBox -->
  </div>
  <!-- /leftColumn -->

  <div class="centerColumn order3">
    <div class="contentBox">
      ～コンテンツ2～
    </div>
    <!-- /contentBox -->
  </div>
  <!-- /centerColumn -->

  <div class="rightColumn order2">
    <div class="contentBox">
      ～コンテンツ3～
    </div>
    <!-- /contentBox -->
  </div>
  <!-- /rightColumn -->
</div>
<!-- /container -->

.leftColumn,
.centerColumn,
.rightColumn {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
}

.contentBox {
  margin-bottom: 1em;
}


@media screen and (min-width: 481px) and (max-width: 768px) {
  .container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap; /*ついかだよー*/
  }
  .leftColumn,
  .rightColumn {
    width: 50%;
  }
  .centerColumn {
    width: 100%;
  }
  .order1 {
    order: 1;
  }
  .order2 {
    order: 2;
  }
  .order3 {
    order: 3;
  }
}
@media screen and (min-width: 769px) {
  .container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
  .leftColumn {
    width: 25%;
  }
  .centerColumn {
    width: 50%;
  }
  .rightColumn {
    width: 25%;
  }
}

Comments

[退会済みユーザー]

迅速なご回答ありがとうございました！
今までこの手の構築はfloatを使うことが多かったものでflexboxの基本がわかっていませんでした。
「flex-wrap」も調べてはいたのですが、入れる場所が悪くて想定する表示にならなかったんですね～。
(折り返したいのはcenterColumnなので、「.centerColumn」の中にflex-wrapを入れてしまっていました。)

[退会済みユーザー]

適用対象は仕様とかにふつーにかいてあるとおもうんで、どの要素にプロパティをつけりゃいいかとかは、
まずはしよーかｍｄｎとかをあたってみてくださいなー

[退会済みユーザー]

ご指摘ありがとうございます。
次に詰まったときは一度仕様を改めて確認してみることにしますm(_ _)m