FlexBoxの使い方（7）〜 flex-wrapについて（動画あり）

flex-wrapの動画
Web動画記事一覧

flex-wrapの動画

floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定した幅はしばしば無視されてしまうことがあります。

次の例はフロートを使用した固定レイアウトの例です。フロートレイアウトをFlexBoxでレイアウトした時に起こる現象です。

サンプル

<div class="info">
  <ul>
    <li><img src="images/miyazaki1.jpg" alt="宮崎観光案内"></li>
    <li><img src="images/miyazaki2.jpg" alt="宮崎観光案内"></li>
    <li><img src="images/miyazaki3.jpg" alt="宮崎観光案内"></li>
    <li><img src="images/miyazaki4.jpg" alt="宮崎観光案内"></li>
    <li><img src="images/miyazaki5.jpg" alt="宮崎観光案内"></li>
    <li><img src="images/miyazaki6.jpg" alt="宮崎観光案内"></li>
  </ul>
</div>

.info{
  width:960px;
  margin:auto;
  overflow: hidden;
}
.info li{
  width:300px;
  float:left;
  margin:0 10px 10px 0;
  list-style-type: none;
}
.info li:nth-child(3){
  margin-right:0;
}
.info img{
  max-width:100%;
  vertical-align: bottom;
}

単純に「display:flex」を使用するとwidthの値は無視されて横1列に並びます。今回は画像のwidthを100％としてフルードイメージにしていますので縮小されて横並びになります。
サンプル

.info{
  width:960px;
  margin:auto;
}
.info ul{
  display:flex;
}
.info li{
  width:300px;
  margin:0 10px 10px 0;
  list-style-type: none;
}
.info img{
  max-width:100%;
  vertical-align: bottom;
}

flex-wrap:wrapを使用すると画像はフロートレイアウトのように2行3列の配置になります。
サンプル

.info{
  width:960px;
  margin:auto;
}
.info ul{
  display:flex;
  flex-wrap:wrap;
}
.info li{
  width:300px;
  margin:0 10px 10px 0;
  list-style-type: none;
}
.info li:nth-child(3){
  margin-right:0;
}
.info img{
  max-width:100%;
  vertical-align: bottom;
}

flex-wrapの動画

Web動画記事一覧