Zenn
🎃

【Flexboxの解説付き】Flexboxを用いて、大きさが異なる画像をきれいに並べてみた

2022/08/16に公開
CSS
web制作
Flexbox
ecサイト
tech

こんにちは！ PeiWebです。
今回は、Flexboxの復習も兼ねて、複数の画像をきれいに並べてみたので残しておきます。
flexboxの基礎的なことなのでいい復習になりました。
まずは、完成図から、

完成図 (PC版)

PC版完成イメージPC版完成イメージ

完成図 (sp版)

sp版完成イメージsp版完成イメージ

次に、コードを見ていきます。

HTML

HTML
<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>PeiWeb-フレックスボックス</title>
 <link rel="stylesheet" href="css/style1.css">
</head>

<body>
 <div class="container">
   <div class="flex">
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image1.jpg" alt="" class="item-image">
       </div>
     </div>
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image2.jpg" alt="" class="item-image">
       </div>
     </div>
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image3.jpg" alt="" class="item-image">
       </div>
     </div>
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image4.jpg" alt="" class="item-image">
       </div>
     </div>
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image5.jpg" alt="" class="item-image">
       </div>
     </div>
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image6.jpg" alt="" class="item-image">
       </div>
     </div>
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image7.jpg" alt="" class="item-image">
       </div>
     </div>
     <div class="flex-item">
       <div class="item-image__wrap">
         <img src="./image/image8.jpg" alt="" class="item-image">
       </div>
     </div>
   </div>
 </div>
</body>

</html>

画像を8点ほど用意して、タグで囲ってあげています。

CSS

CSS
.container{
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}

@media  and (max-width: 1200px) {
  .container{
    width: 90%;
  }
}

.flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.flex-item{
  background-color: #ccc;
  flex-basis: 25%;
  flex-grow: 1;
}

@media screen and (max-width:770px) {
  .flex-item {
      flex-basis: 50%;
    }
}

.item-image__wrap{
  width: 100%;
  height: 25vh;
  overflow: hidden;
}

@media screen and (max-width:770px) {
  .flex-item__wrap {
  height: 50vh;
  }
}

.item-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

詳しく見ていきます。

justify-content

flexboxのプロパティの一つです。
機能として、フレックスアイテムの横方向の揃え位置を指定しています。
justify-contentは、フレックスコンテナ（今回は、flexクラス）に対して指定します。

下記に、justify-contentで使える値を示します。

値 説明
flex-start フレックスコンテナの横軸の起点に配置。通常、左端に配置。
flex-end フレックスコンテナの横軸の終点に揃えます。通常、右端に配置。
center フレックスコンテナの横軸の幅の中央に揃える。通常、左右中央に配置。
space-between フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置。
flex-start フレックスコンテナの主軸の起点に配置。通常、左端に配置。
space-around フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。 space-betweenと異なり、起点・終点との間にも間隔が生じる。

今回は、幅を固定しているため、space-betweenを用いて等間隔で要素をならべています。

align-items

flexboxのプロパティの一つです。
機能として、フレックスアイテムの縦方向の揃え位置を指定しています。
justify-contentは、フレックスコンテナ（今回は、flexクラス）に対して指定します。

下記に、align-itemsで使える値を示します。

値 説明
stretch(初期値) フレックスコンテナのクロス軸の幅に合わせて、flexboxアイテムを伸縮
flex-start フレックスコンテナのクロス軸に合わせて、上部に配置。
flex-end フレックスコンテナのクロス軸に合わせて、下部に配置。
center フレックスコンテナのクロス軸に合わせて、中央に配置。
baseline フレックスアイテム（フレックスコンテナの子要素)のベースラインに合わせて配置。

今回は、画像の大きさを揃えているのでなんでもよかったですが、flex-startを用いて要素の上部を揃えています。

flex-wrap

flexboxのプロパティの一つです。
機能として、フレックスアイテムの折り返し方法を指定しております。
flex-wrapは、フレックスコンテナ（今回は、flexクラス）に対して指定します。

下記に、flex-wrapで使える値を示します。

値 説明
nowrap(初期値) フレックスアイテムは折り返されない
wrap フレックスアイテムは折り返され、複数行で表示。通常は上から下に折り返され、2行目以降のアイテムは左から右に配置。
wrap-reverse フレックスアイテムは折り返され、複数行で表示。ただし、wrapとは逆に、下から上に折り返す。

今回は、画像を左から順番に並べていき、ある地点まできたら折り返して欲しいので、wrapを用いています。

flex-basis

flexboxのプロパティの一つです。
機能として、フレックスアイテムの基本の幅を指定しております。
flex-basisは、フレックスアイテム（フレックスコンテナの子要素、つまり、今回はflex-itemクラス）に対して指定します。

下記に、flex-basisで使える指定方法を示します。

値 説明
auto(初期値) フレックスアイテムの内容に合わせて自動的に幅を指定
数値＋単位(px,remなど) フレックスアイテムの幅を単位付きの数値で指定
数値＋% 値を指定。値はフレックスコンテナの幅に対する割合。

今回は、画像をPC版の時は4つ並べたいので25%、sp版の時は2つ並べたいので50%と指定します。

flex-grow

flexboxのプロパティの一つです。
機能として、フレックスアイテムの幅の伸び率を指定しております。
flex-basisは、フレックスアイテム（フレックスコンテナの子要素、つまり、今回はflex-itemクラス）に対して指定します。

下記に、flex-growで使える指定方法を示します。

値 説明
0(初期値) フレックスアイテムの幅に合わせて自動的に幅が指定
1 余った枠に対して、伸びる
2 下記で説明

flex-growが、2のとき、余った枠に対しての比率を表しております。
言葉で言われても???だと思うので、下記の場合で考えます。

.flex-item1 {
width:20%;
flex-grow:2;
}

.flex-item2 {
width:20%;
flex-grow:1;
}

の時、イメージはこんな感じ。。

flex-item1とflex-item2の余った余白60%をflex-growで指定した比率で割り当てる。
つまり、flex-item1 : flex-item2 = 2:1 (40% : 20%)のような比率で余白を割り当てます。

今回は、余った時に伸びるようにするので、1を指定します。

こんな感じで実装完了ですね^^

最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。

Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
https://twitter.com/pei_traveler

Discussion