flexboxで内部のブロック列を折り返す - CSS

flexboxで内部のブロック列を折り返すコードを紹介します。

概要

flexboxで内部のブロック列を折り返すには、flex-wrap プロパティを利用します。

書式

flex-wrap: (折り返しモード);

折り返しモードには次の値を設定できます。

値	意味
wrap	外側の枠の幅に応じて、折り返して表示します。
wrap-reverse	外側の枠の幅に応じて、折り返して表示しますが、逆順に表示します。
nowrap	折り返しをせずに1行で表示します。

プログラム例

コード

下記のHTML, CSSファイルを作成します。

FlexboxWrap.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="FlexboxWrap.css" />
</head>
<body>
  <div class="Frame">

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト1です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト2です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト3です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト4です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト5です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト6です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト7です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

    <div class="ContentTile">
      <div class="ContentTileImage"><img src="image.png" /></div>
      <div>テスト8です。ペンギンがぺんぎんクッキーをぱくぱく、ぺくぺく食べるよ。</div>
    </div>

  </div>
</body>
</html>

FlexboxWrap.css

body {
  background-color:#C0C0C0;
}

.Frame {
  display: flex;
  background-color: #E0E0E0;
  flex-wrap:wrap;
}

.ContentTile {
  width: 240px;
  background-color: #FFFFFF;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
  padding:0.5rem 0.5rem 0.5rem 0.5rem;
}

.ContentTileImage {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
}

 .ContentTileImage img {
  width:100%;
 }