かんたんCSS3 flex 1行に詰めたり折り返しを指定する

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

CSS3のフレックスでは、コンポーネントの配置を変える方法がほんの数行でできるようになりました。

そしてフレックスは、配置だけでなくそれに関係する細かい設定もたくさんあります。

今回はコンテンツの行詰め・折り返しの方法です。2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

flex-wrap 1行に詰めたり折り返しを指定する

フレックスでは、すべてのアイテムを1行に詰めたり、折り返しを指定したり、その折り返しの方向を変えたりすることができます。

デフォルト指定も含めて3つの指定ができます。

指定方法

  • 1行に詰める(デフォルト)
  • 複数行で折り返し
  • 逆方向に複数行で折り返し

なんか分からないものがありますね?(3番目。)1つずつ見ていきましょう。

コンテナに指定します。

フレックスのしくみが分からないと、理解するのに苦しむので図を載せます。

css3 flex image

nowrap 1行に詰める(デフォルト)

.container {
  flex-wrap: nowrap;
}

"display: flex"でフレックスを指定すると、アイテムが1行に詰めて表示されます。これは、flex-wrapがデフォルトで"nowrap"になっているからです。

デフォルトの動きをフレックスの4方向のサンプルで見ていきます。

左に向かって1行に詰める

まずはCSSから。ボックスに見栄えをつけるのと、フレックスのクラスを作ります。

CSS
.sample .container .box {
  background: rgba(255, 144, 130, 0.7);
  color: #fff;
  margin: 3px;
  padding: 0 3px;
  text-align: center;
}
.sample .flex {
  display: flex;
}

次にHTMLです。

HTML
<div class="sample">
<div class="container flex">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
  <div class="box">14</div>
  <div class="box">15</div>
  <div class="box">16</div>
  <div class="box">17</div>
  <div class="box">18</div>
  <div class="box">19</div>
  <div class="box">20</div>
  <div class="box">21</div>
  <div class="box">22</div>
  <div class="box">23</div>
  <div class="box">24</div>
  <div class="box">25</div>
  <div class="box">26</div>
  <div class="box">27</div>
  <div class="box">28</div>
  <div class="box">29</div>
  <div class="box">30</div>
</div>
</div>
left -> right
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

左に向かって1行に詰められます。アイテムの開始位置が左にあるからです。

flex-direction row image

注意が必要なのは、詰めきれないものは、はみ出してしまうことです。

はみ出した部分は、ほかのコンテンツと重なります。(どっちが上になるかはz-indexプロパティが影響する)

クロス軸はcross startから動きません。クロスサイズは0です。1行に詰めるか折り返すかのポイントはこのクロス軸の動きです。

右に向かって1行に詰める

CSSに新たにクラスを追加します。

CSS
.sample .direction-row-reverse {
  flex-direction: row-reverse;
}

HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-row-reverse">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
right -> left
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

右に向かって1行に詰められます。アイテムの開始位置がリバースされて右にあるからです。

flex-direction row-reverse image

同じようにはみだしが発生します。

上に向かって1行に詰める

CSSに新たにクラスを追加します。

CSS
.sample .direction-column {
  flex-direction: column;
}
.sample .height {
  height: 200px;
}

次にHTMLです。コンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column height">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">20</div>
</div>
</div>

heightプロパティを指定しないと、コンテナが無限にタテに広がって折り返しされません。折り返しを見るには、コンテナのheightプロパティに値を指定する必要があります。

top -> bottom
1
2
3
4
5
6
7
8

上に向かって1行に詰められます。アイテムの開始位置が上にあるからです。

flex-direction column image

同じようにはみだしが発生します。

Webページが崩れたように見えるはずです。サンプルですが『こうなるよ』という意味で残しておきます。

Webページのバグではありません。

下に向かって1行に詰める

CSSに新たにクラスを追加します。

CSS
.sample .direction-column-reverse {
  flex-direction: column-reverse;
}

HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column-reverse height">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">20</div>
</div>
</div>
bottom - > top
1
2
3
4
5
6
7
8

下に向かって1行に詰められます。アイテムの開始位置がリバースされて下にあるからです。

flex-direction column-reverse image

1行に詰めるnowrapは、はみ出したり他のコンテンツに重なります。

自動で1行に詰める便利さはありますが、『限度がある』ことには注意が必要です。

それでも、今まで自動で詰めてくれるのは無かったので、とても便利な機能です。

1行に詰めるときは、すべてのアイテムを同じように縮小します。

ここでは説明しませんが、縮小もプロパティの指定でコントロールできます。

フレックスアイテムの拡大・縮小・サイズ指定

詰める方向は、配置の方向(flex-direction)によって変わります。配置の基準の方向に向かって1行に詰めようとします。

サンプルでは、『1』のアイテムが基準になります。(アイテムの中で一番最初にHTMLに書かれたタグ)

wrap 複数行で折り返す

.container {
  flex-wrap: wrap;
}

次は、複数行で折り返す"wrap"です。コンテナの幅や高さまでくるとアイテムを折り返して配置します。

スクロールを使って幅・高さを伸ばせるようにすると折り返しません。1行にアイテムを配置します。

変更は、コンテナのCSSに"flex-wrap: wrap;"を追加するだけです。

左上 -> 右に配置して複数行に折り返す

CSSに新たにクラスを追加します。

CSS
.sample .wraps {
  flex-wrap: wrap;
}

HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex wraps">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
left -> right
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

flex-directionが未指定なので、ヨコの基準は左になります。でもタテの基準は指定できません。ここではタテの基準はデフォルトの上になります。

これで、アイテムの開始位置は左上になります。

flex-wrap wrap row image

1行に詰めるときはクロスサイズが0でした。折り返しのときはcross endが動いてクロスサイズが計算されます。この動きで折り返しが行われます。

右上 -> 左に配置して複数行に折り返す

CSSに変更はありません。HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-row-reverse wraps">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
right -> left
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

flex-directionがrow-reverseなので、ヨコの基準は右になります。でもタテの基準は指定できません。ここではタテの基準はデフォルトの上になります。

これで、アイテムの開始位置は右上になります。

flex-wrap wrap row-reverse

左上 -> 下に配置して複数行に折り返す

CSSに変更はありません。HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column height wraps">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
top -> bottom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

タテに折り返しされました。

flex-directionがcolumnなので、タテの基準は上になります。でもヨコの基準は指定できません。ここではヨコの基準はデフォルトの左になります。

これで、アイテムの開始位置は左上になります。

flex-wrap wrap column

左下 -> 上に配置して複数行に折り返す

CSSに変更はありません。HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column-reverse height wraps">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
bottom -> top
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

下から上に向かう配置は、Webページの性質上、ユーザエクスペリエンス(UX, ユーザーの使いやすさ)の点からもあまり使う場面はないと思います。

(高度なWebアプリではあるかもしれませんが。)

こういうこともできるという程度でいいでしょう。

flex-directionがcolumn-reverseなので、タテの基準は下になります。でもヨコの基準は指定できません。ここではヨコの基準はデフォルトの左になります。

これで、アイテムの開始位置は左下になります。

flex-wrap wrap column-reverse

wrap-reverse 折り返しの開始位置を変える

.container {
  flex-wrap: wrap-reverse;
}

最後に、『折り返しの開始位置を変える』です。これが一番分かりにくいと思います。

でも説明を聞くとかんたんです。wrapのところで、何度も『flex-directionで指定できないからデフォルトが...』と言ってきました。画像のクロス軸(黄色)の矢印です。

wrap-reverseは、このクロス軸の矢印をリバースします。

wrapでは、基準にできないものがあるのに気づいたでしょうか?

  • ヨコ向き -> 左下, 右下はできない。
  • タテ向き -> 右上, 右下はできない。

この基準にできない部分がwrap-reverseで基準にできます。

  • ヨコ向き -> 左下, 右下が基準になる。
  • タテ向き -> 右上, 右下が基準になる。

すべてのパターン(4つ)でwrap-reverseしてみましょう。

HTMLはwrapのものをそのまま使います。CSSはflex-wrapだけを変更します。

比較のためにwrapの結果も表示します。

左上 -> 右に配置して複数行に折り返す(のリバース)

CSSに新たなクラスを追加します。

CSS
.sample .wraps-reverse {
  flex-wrap: wrap-reverse;
}

HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex wraps-reverse">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
left-top -> right - reverse -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

wrapでは『上か下か』の指定ができませんでした。それをwrap-reverseで指定します。『左上のリバース』なので『左下』が基準になります。

flex-wrap wrap-reverse row image

"reverse"では、クロス軸のcross startとcross endを交代して方向をリバースします。

右上 -> 左に配置して複数行に折り返す(のリバース)

CSSに変更はありません。HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-row-reverse wraps-reverse">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
right-top -> left - reverse -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

wrapでは『上か下か』の指定ができませんでした。それをwrap-reverseで指定します。『右上のリバース』なので『右下』が基準になります。

flex-wrap wrap-reverse row-reverse image

左上 -> 下に配置して複数行に折り返す(のリバース)

CSSに変更はありません。HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column height wraps-reverse">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
left-top -> bottom - reverse -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

wrapでは『左か右か』の指定ができませんでした。それをwrap-reverseで指定します。『左上のリバース』なので『右上』が基準になります。

flex-wrap wrap-reverse column image

左下 -> 上に配置して複数行に折り返す(のリバース)

CSSに変更はありません。HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column-reverse height wraps-reverse">
  <div class="box">1</div>
  <!-- 省略 -->
  <div class="box">30</div>
</div>
</div>
left-bottom -> top - reverse -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

wrapでは『左か右か』の指定ができませんでした。それをwrap-reverseで指定します。『左下のリバース』なので『右下』が基準になります。

flex-wrap wrap-reverse column-reverse image

flex-flow ショートハンド

flex-wrapプロパティは、コンテンツの並びの方向を指定するflex-directionプロパティと同時指定ができるショートハンドを持っています。

コンテナに指定します。

.container {
  flex-flow: <flex-direction> || <flex-wrap>;
}
初期値row nowrap
||半角スペース区切り。順不同。1つ指定可。

.container {
  // 順序はどうでもいい
  flex-flow: wrap row; // row nowrapと同じ
}
.container {
  // flex-wrapの省略
  flex-flow: row; // row nowrapと同じ
}
.container {
  // flex-directionの省略
  flex-flow: wrap; // row wrapと同じ
}

まとめ

フレックスを使って、コンテンツを1行に詰めたり折り返しをしたりする方法をご紹介しました。

フレックスのすごいところはこれだけではありません。まだまだほかにもあります。

ここで説明すると長くなるのでとりあえずここまでにします。

前のページ
かんたんCSS3 flex サクッと並びとその方向を変える方法
かんたんCSS3 order フレックスアイテムの並びの順序を変える
次のページ
HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!