FlexBoxの使い方(7)〜 flex-wrapについて

FlexBoxの使い方(7)〜 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 Boxレイアウト関連記事