フレックス練習

HTML

<div id="photo">
<div><img src="画像1のURL" alt=""></div>
<div><img src="画像2のURL" alt=""></div>
<div><img src="画像3のURL" alt=""></div>
<div><img src="画像4のURL" alt=""></div>
<div><img src="画像5のURL" alt="">
　　　< img src="画像6のURL" alt=""></div>
<div id="big"><img src="最初の画像のURL" alt=""></div>
<div><img src="画像7のURL" alt="">
　　　< img src="画像8のURL" alt=""></div>
<div><img src="画像9のURL" alt=""></div>
<div><img src="画像10のURL" alt=""></div>
<div><img src="画像11のURL" alt=""></div>
<div><img src="画像12のURL" alt=""></div>

HTML説明

  1. 親要素のdivにID「photo」を設定します（ID名は何でもOK）。
  2. 1行目に配置する画像はdivを設定しそれぞれのdivに挿入します。
  3. 2行1列目及び3行1列目に配置する画像は同じdiv内に半角スペースを介して挿入します。
  4. ページを開いたとき画面中央に表示させる画像は、ID名を「big」に指定したdivの挿入します（ID名は何でもOK）。
  5. 2行4列目及び3行4列目に配置する画像は同じdiv内に半角スペースを介して挿入します。
  6. 4行目に配置する画像は1行目と同様にdivを設定しそれぞれのdivに挿入します。

CSS

#photo {
width: 100%;{
display:flex; フレックスを指定します。
flex-wrap: wrap; フレックスアイテムの折返しを許可します。
align-items:center; フレックスアイテムを縦方向中央に配置します。
}
#photo div:not(#big) { #photo内のdiv（IDをbigに指定したdivを除く）
width: 25%; 幅を25%に指定
}
#big {
width: 50% 幅を25%に指定
}
#photo > div img{
width:99%; 画像の幅を指定
}
フレックス模式図