フレックスアイテムの折り返しと配置方向（flex-wrap,flex-direction）

CSS
HTML/CSS

フレックスアイテムの折り返しと配置方向
（flex-wrap,flex-direction）

この記事にはプロモーションが含まれています。

投稿：2021・05・19

更新：2022・02・26

display: flex;ではフレックスアイテムを横並びにすることができますが、フレックスアイテムの数が多くてボックス内に納まりきらないこともあり得ます。また、フレックスアイテムを手前ではなく奥から詰めていきたいという場合もあります。今回はそんな時に役立つCSSを紹介します。

動画内容：flex-wrap flex-directionについて

スマホなどからWebサイトを閲覧する場合、display: flex;で横並びにしたフレックスアイテムが表示領域内に入りきらない場合が多々あります。例えばサイトメニューを横並びにすることはとても多いですが、そのメニューを無理やりボックス内に納めようとすると、

HOME

ABOUT

CONTACT

…みたいに、変なところで改行が入ってしまうこともあります。これだとなんだか見栄えが悪くてスッキリしないですよね。こうなるぐらいなら、

HOME

ABOUT

CONTACT

…このように、ボックス内に入りきらないアイテムは折り返すようにした方が、変なところで改行が入って見にくくなってしまうのを防ぐことができます。あるいは、

HOME

ABOUT

CONTACT

…というふうに、縦並びに切り替えるという方法もあります。

HTMLに記述したブロックレベルのタグは元々縦並びなので、「display: block;にするだけでしょ？」と思うかもしれませんが、「スマホページではメニューリストを縦並びにしつつ、並び順を変えたい」という場合もあります。そのような場合、display: flex;を解除してしまうとorderプロパティが使えなくなり、並び順の変更がCSSではできなくなります。（orderプロパティについての記事は ▶︎こちら）
display:flex;は、普通に使うと要素を横並びにするCSSプロパティですが、実は横並びにしないこともできるので、今回はそういった使い方も紹介していきます！

◆ flex-wrap とは ◆

flex-wrap（フレックスラップ）とは、display: flex; などで横並びにしたアイテムがフレックスボックスに入りきらない場合、フレックスアイテムを折り返すか否かを指定するCSSプロパティです。

display:flex;などと同じように、フレックスボックス（親要素）に設定します。

flex-wrapには以下のキーワード値を設定することができます。

＊flex-wrapの値＊

値	効果
nowrap	アイテムを折り返さない（デフォルト）
wrap	アイテムを折り返す
wrap-reverse	アイテムを逆に（下から上に向かって）折り返す

＊flex-wrapの構文例＊
■ セレクタ { flex-wrap: wrap; }

それでは、それぞれのサンプルコードと表示を実際に見て確認していきましょう。

＊flex-wrap:nowrap;の場合＊

   <div class="flex_wrapbox1">
      <div class="flexwrap1">
        <p>box1</p>
      </div>
      <div class="flexwrap2">
        <p>box2</p>
      </div>
      <div class="flexwrap3">
        <p>box3</p>
      </div>
      <div class="flexwrap4">
        <p>box4</p>
      </div>
      <div class="flexwrap5">
        <p>box5</p>
      </div>
    </div>

    .flex_wrapbox1 {
      display: flex;
      flex-wrap: nowrap;
      align-items:center;
      overflow-x: scroll;
      background-color: #f4ffda;
      padding: 1rem;
    }
    .flex_wrapbox1 div {
      padding: 5%;
      margin: 0 5%;
      background-color: lightblue;
    }
    .flex_wrapbox1 p {
      width: max-content;
    }
    .flex_wrapbox1 div:nth-child(1n+2) {
      background-color: lightblue;
    }
    .flex_wrapbox1 div:nth-child(2n) {
      background-color: lightgreen;
    }

フレックスアイテムがボックスにおさまらないケース。※ボックス内で右にスクロールできます

box1

box2

box3

box4

box5

flex-wrap:nowrap;はデフォルト値なので、あえてCSSに記載する必要はないのですが、分かりやすくするために記載しています。また、overflow-x:scroll;としているのでボックスからはみ出ずにスクロールできるようになっていますが、これがなければボックスからはみ出してしまいます。

それでは次に、フレックスアイテムを折り返すパターンを見ていきましょう。

＊flex-wrap:wrap;の場合

    <div class="flex_wrapbox1">
      <div class="flexwrap1">
        <p>box1</p>
      </div>
      <div class="flexwrap2">
        <p>box2</p>
      </div>
      <div class="flexwrap3">
        <p>box3</p>
      </div>
      <div class="flexwrap4">
        <p>box4</p>
      </div>
      <div class="flexwrap5">
        <p>box5</p>
      </div>
    </div>

    .flex_wrapbox1 {
      display: flex;
      flex-wrap: wrap;
      align-items:center;
      background-color: #f4ffda;
      padding: 1rem;
    }
    .flex_wrapbox1 div {
      padding: 5% 0;
      margin: 1rem 5%;
      width: 23%;
      background-color: lightblue;
    }
    .flex_wrapbox1 p {
      width: max-content;
      margin: 0 auto;
    }
    .flex_wrapbox1 div:nth-child(1n+2) {
      background-color: lightblue;
    }
    .flex_wrapbox1 div:nth-child(2n) {
      background-color: lightgreen;
    }

box1

box2

box3

box4

box5

ボックスに入りきらないアイテムは自動で折り返されるようになりました。

flex-wrap:wrap;では、フレックスボックスの幅を％やvwで指定し、かつフレックスアイテムの幅をpx指定などで固定している場合、「フレックスボックスにアイテムが何個並んだ時点で折り返すか」という指定は、基本的にできません。

任意の個数で折り返すようにしたければ、フレックスアイテムの幅を、並べたい個数÷100（％）で指定するようにしましょう。
上の例では、フレックスアイテムの幅（width=23％）＋フレックスアイテムの左右の余白（margin-right + margin-left=10%）＝33％で、どのような画面幅のデバイスから見ても、フレックスアイテムが３個で折り返されるようになっています。
＊widthの設定について詳しく知りたい方は、▶︎こちらの記事をご覧ください。

そして、最後にflex-wrap:wrap-reverse;の確認です！

＊flex-wrap:wrap-reverse;の場合

    <div class="flex_wrapbox1">
      <div class="flexwrap1">
        <p>box1</p>
      </div>
      <div class="flexwrap2">
        <p>box2</p>
      </div>
      <div class="flexwrap3">
        <p>box3</p>
      </div>
      <div class="flexwrap4">
        <p>box4</p>
      </div>
      <div class="flexwrap5">
        <p>box5</p>
      </div>
    </div>

    .flex_wrapbox1 {
      display: flex;
      flex-wrap: wrap-reverse;
      align-items:center;
      background-color: #f4ffda;
      padding: 1rem;
    }
    .flex_wrapbox1 div {
      padding: 5% 0;
      margin: 1rem 5%;
      width: 23%;
      background-color: lightblue;
    }
    .flex_wrapbox1 p {
      width: max-content;
      margin: 0 auto;
    }
    .flex_wrapbox1 div:nth-child(1n+2) {
      background-color: lightblue;
    }
    .flex_wrapbox1 div:nth-child(2n) {
      background-color: lightgreen;
    }

box1

box2

box3

box4

box5

通常は上から順に下に向かって折り返されますが、下から上に折り返されているのが分かります。
ただ、このように折り返しを逆にしたいというケースはそんなにありません。活用シーンとしては、フォトギャラリーなどを作成する際、HTMLではフレックスアイテムを下に付け加える形で追加したいが、表示は最新のものが上に来るようにしたいというケースなどが考えられます。

POINT!

・flex-wrapプロパティで、フレックスアイテムの折り返しを指定できる！
・nowrapは、折り返しなし！
・wrapは、折り返しあり！（上から下）
・wrap-reverseは、折り返しあり！（下から上）

◆ flex-directionとは ◆

flex-direction（フレックスディレクション）とは、フレックスアイテムの並び順、フレックスアイテムを横並びにするか縦並びにするかの指定ができるCSSプロパティです。

こちらもflex-wrap同様、フレックスボックス（親要素）に指定し、値はキーワード値を取ります。

＊flex-directionの値＊

値	効果
row	フレックスアイテムを書字方向（日本語なら左から右）に並べる（デフォルト）
row-reverse	フレックスアイテムを書字方向と逆（右から左）に並べる
column	フレックスアイテムを縦に並べる（上から下）
column-reverse	フレックスアイテムを縦に並べる（下から上）

さっそくサンプルコードと表示結果を紹介していきますが、flex-direction:row;はデフォルトで普通に左から右に並べられるだけなので省略します。

＊flex-direction:row-reverse;の場合＊

    <div class="flex_wrapbox1">
      <div class="flexwrap1">
        <p>box1</p>
      </div>
      <div class="flexwrap2">
        <p>box2</p>
      </div>
      <div class="flexwrap3">
        <p>box3</p>
      </div>
      <div class="flexwrap4">
        <p>box4</p>
      </div>
      <div class="flexwrap5">
        <p>box5</p>
      </div>
    </div>

    .flex_wrapbox1 {
      display: flex;
      flex-wrap: wrap;
      flex-direction:row-reverse;
      align-items:center;
      background-color: #f4ffda;
      padding: 1rem;
    }
    .flex_wrapbox1 div {
      padding: 5% 0;
      margin: 1rem 5%;
      width: 23%;
      background-color: lightblue;
    }
    .flex_wrapbox1 p {
      width: max-content;
      margin: 0 auto;
    }
    .flex_wrapbox1 div:nth-child(1n+2) {
      background-color: lightblue;
    }
    .flex_wrapbox1 div:nth-child(2n) {
      background-color: lightgreen;
    }

box1

box2

box3

box4

box5

ちなみにですが、flex-direction:row-reverse;と、flex-wrap:wrap-reverse;を組み合わせることで、HTMLでフレックスアイテムの一番下に追加した最新のものを、左上に持ってくることができます。最新投稿は右上ではなく左上に配置したいことが多いので、単にflex-wrap:wrap-reverse;とするよりも、こっちの方が実用的ですね。
以下、flex-direction:row-reverse;と、flex-wrap:wrap-reverse;を組み合わせた場合です。

    <div class="flex_wrapbox1">
      <div class="flexwrap1">
        <p>box1</p>
      </div>
      <div class="flexwrap2">
        <p>box2</p>
      </div>
      <div class="flexwrap3">
        <p>box3</p>
      </div>
      <div class="flexwrap4">
        <p>box4</p>
      </div>
      <div class="flexwrap5">
        <p>box5</p>
      </div>
    </div>

    .flex_wrapbox1 {
      display: flex;
      flex-wrap: wrap-reverse;
      flex-direction:row-reverse;
      align-items:center;
      background-color: #f4ffda;
      padding: 1rem;
    }
    .flex_wrapbox1 div {
      padding: 5% 0;
      margin: 1rem 5%;
      width: 23%;
      background-color: lightblue;
    }
    .flex_wrapbox1 p {
      width: max-content;
      margin: 0 auto;
    }
    .flex_wrapbox1 div:nth-child(1n+2) {
      background-color: lightblue;
    }
    .flex_wrapbox1 div:nth-child(2n) {
      background-color: lightgreen;
    }

box1

box2

box3

box4

box5

HTMLでbox6をbox5の下に追加したら、一番左上に追加されることになります。

それでは次に、flex-direction:column;の表示結果を確認していきましょう。

＊flex-direction:column;の場合

    <div class="flex_wrapbox1">
      <div class="flexwrap1">
        <p>box1</p>
      </div>
      <div class="flexwrap2">
        <p>box2</p>
      </div>
      <div class="flexwrap3">
        <p>box3</p>
      </div>
      <div class="flexwrap4">
        <p>box4</p>
      </div>
      <div class="flexwrap5">
        <p>box5</p>
      </div>
    </div>

    .flex_wrapbox1 {
      display: flex;
      height: 40vh;
      overflow-y: scroll;
      flex-direction:column;
      align-items:center;
      background-color: #f4ffda;
      padding: 1rem;
    }
    .flex_wrapbox1 div {
      padding: 5% 0;
      margin: 1rem 5%;
      width: 23%;
      background-color: lightblue;
    }
    .flex_wrapbox1 p {
      width: max-content;
      margin: 0 auto;
    }
    .flex_wrapbox1 div:nth-child(1n+2) {
      background-color: lightblue;
    }
    .flex_wrapbox1 div:nth-child(2n) {
      background-color: lightgreen;
    }

box1

box2

box3

box4

box5

あまり縦長になっちゃうとうっとうしいので、heightとoverflow-yプロパティを設定してます。display:flex;を設定しているのにも関わらず、表示形式がカラム（縦並び）になりました。
display:flex;を指定しておきながら縦並びにするなんて、そもそもdisplay:flex;にする意味がないんじゃないかと思われるかもしれませんが、冒頭でも言ったように、縦並びに変えた上で、フレックスアイテムの一部だけ順番を入れ替えたい（orderプロパティを使いたい）という場合など、display:flex;にしていなければ使用できないCSSを使用する際には、役立つテクニックです。

そして、今回の記事の最後に紹介するのが、flex-direction:column-reverseです。

＊flex-direction:column-reverse;の場合＊

<div class="flex_wrapbox1">
      <div class="flexwrap1">
        <p>box1</p>
      </div>
      <div class="flexwrap2">
        <p>box2</p>
      </div>
      <div class="flexwrap3">
        <p>box3</p>
      </div>
      <div class="flexwrap4">
        <p>box4</p>
      </div>
      <div class="flexwrap5">
        <p>box5</p>
      </div>
    </div>

    .flex_wrapbox1 {
      display: flex;
      height: 40vh;
      overflow-y: scroll;
      flex-direction:column-reverse;
      align-items:center;
      background-color: #f4ffda;
      padding: 1rem;
    }
    .flex_wrapbox1 div {
      padding: 5% 0;
      margin: 1rem 5%;
      width: 23%;
      background-color: lightblue;
    }
    .flex_wrapbox1 p {
      width: max-content;
      margin: 0 auto;
    }
    .flex_wrapbox1 div:nth-child(1n+2) {
      background-color: lightblue;
    }
    .flex_wrapbox1 div:nth-child(2n) {
      background-color: lightgreen;
    }

box1

box2

box3

box4

box5

縦並びかつ、逆順（下から上の並び）になりましたね。こちらも、お知らせ一覧などHTMLでは下に追加していきたい最新のフレックスアイテムを、上から順に表示させたい場合などに利用できます。

POINT!

・flex-directionプロパティで、フレックスアイテムの並び順の指定と、横並びから縦並びへの変更ができる！
・rowは左から右、row-reverseは右から左への並びに！
・columnは上から下への縦並び、column-reverseは下から上への縦並びに！

ワンポイントチェック

今回はフレックスアイテムの折り返しや配置順、縦並びへの変換など様々なCSSを一気に紹介したので、「どれがどれだっけ？」ってなってしまうこともあるかと思います。
個人的に、CSSの効果を把握するのに最も効果的なのは、CSS切り替えるとどうなるか実際に試してみることだと思います。（頭で記憶するより、視覚的に掴む感じ）
ということで今回も、ボタンで表示が切り替わる機能を実装しました！ボタンを押して色々と切り替えて遊んでみてくださいね。

box1

box2

box3

box4

box5

▲ボタンが全て表示されていない場合は右にスクロールできます。

フレックスアイテムがボックス内に入りきらない場合はボックス内でスクロールできるようにしています。
また、flex-wrapと、flex-direcitonを組み合わせることで、記事の中では紹介しきれなかった並びにもできます。普通は使う機会がない組み合わせも簡単に試せるので、新しい発見があったりして面白いですよ！

今回の動画で紹介したコード！

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .flexbox {
      background-color: lightyellow;
      max-width: 50vw;
      margin: 45rem auto;
      overflow: auto;
    }
    .flexbox p {
      padding: 2rem;
      margin: 2rem;
      min-width: max-content;
    }
    .flexbox p:nth-child(2n+1),.flexbox p:first-child {
      background-color: skyblue;
    }
    .flexbox p:nth-child(2n) {
      background-color: lightgreen;
    }
    .flexbox1 {
      display:flex;
      flex-wrap: nowrap;
    }
    .flexbox2 {
      display:flex;
      flex-wrap: wrap;
    }

    .flexbox3 {
      display:flex;
      flex-wrap: wrap-reverse;
    }

    .flexbox4 {
      display:flex;
      flex-direction: row;
    }

    .flexbox5 {
      display:flex;
      flex-direction: row-reverse;
    }

    .flexbox6 {
      display:flex;
      flex-direction: column;
    }

    .flexbox7 {
      display:flex;
      flex-direction: column-reverse;
    }
    </style>
  </head>
  <body>
    <div class="flexbox flexbox1">
      <p class="flexitem flexitem1">フレックスアイテム1</p>
      <p class="flexitem flexitem2">フレックスアイテム2</p>
      <p class="flexitem flexitem3">フレックスアイテム3</p>
      <p class="flexitem flexitem4">フレックスアイテム4</p>
      <p class="flexitem flexitem5">フレックスアイテム5</p>
      <p class="flexitem flexitem6">フレックスアイテム6</p>
    </div>

    <div class="flexbox flexbox2">
      <p class="flexitem flexitem1">フレックスアイテム1</p>
      <p class="flexitem flexitem2">フレックスアイテム2</p>
      <p class="flexitem flexitem3">フレックスアイテム3</p>
      <p class="flexitem flexitem4">フレックスアイテム4</p>
      <p class="flexitem flexitem5">フレックスアイテム5</p>
      <p class="flexitem flexitem6">フレックスアイテム6</p>
    </div>

    <div class="flexbox flexbox3">
      <p class="flexitem flexitem1">フレックスアイテム1</p>
      <p class="flexitem flexitem2">フレックスアイテム2</p>
      <p class="flexitem flexitem3">フレックスアイテム3</p>
      <p class="flexitem flexitem4">フレックスアイテム4</p>
      <p class="flexitem flexitem5">フレックスアイテム5</p>
      <p class="flexitem flexitem6">フレックスアイテム6</p>
    </div>

    <div class="flexbox flexbox4">
      <p class="flexitem flexitem1">フレックスアイテム1</p>
      <p class="flexitem flexitem2">フレックスアイテム2</p>
      <p class="flexitem flexitem3">フレックスアイテム3</p>
      <p class="flexitem flexitem4">フレックスアイテム4</p>
      <p class="flexitem flexitem5">フレックスアイテム5</p>
      <p class="flexitem flexitem6">フレックスアイテム6</p>
    </div>

    <div class="flexbox flexbox5">
      <p class="flexitem flexitem1">フレックスアイテム1</p>
      <p class="flexitem flexitem2">フレックスアイテム2</p>
      <p class="flexitem flexitem3">フレックスアイテム3</p>
      <p class="flexitem flexitem4">フレックスアイテム4</p>
      <p class="flexitem flexitem5">フレックスアイテム5</p>
      <p class="flexitem flexitem6">フレックスアイテム6</p>
    </div>

    <div class="flexbox flexbox6">
      <p class="flexitem flexitem1">フレックスアイテム1</p>
      <p class="flexitem flexitem2">フレックスアイテム2</p>
      <p class="flexitem flexitem3">フレックスアイテム3</p>
      <p class="flexitem flexitem4">フレックスアイテム4</p>
      <p class="flexitem flexitem5">フレックスアイテム5</p>
      <p class="flexitem flexitem6">フレックスアイテム6</p>
    </div>

    <div class="flexbox flexbox7">
      <p class="flexitem flexitem1">フレックスアイテム1</p>
      <p class="flexitem flexitem2">フレックスアイテム2</p>
      <p class="flexitem flexitem3">フレックスアイテム3</p>
      <p class="flexitem flexitem4">フレックスアイテム4</p>
      <p class="flexitem flexitem5">フレックスアイテム5</p>
      <p class="flexitem flexitem6">フレックスアイテム6</p>
    </div>

  </body>
</html>

記事のトップへ戻る