写真を並べてみる〜CSS編〜

Flexboxとは？
シャッフルコンテンツを読み込む	[シャッフル] 写真を並べてみる〜ファイルの作成と画像の追加〜
[シャッフル] 写真を並べてみる〜HTML編〜
[シャッフル] 写真を並べてみる〜CSS編〜
[シャッフル] Flexbox実戦課題
[シャッフル] Flexbox実戦課題答えの例 ×1

いよいよCSSを追加します。

Flexboxを使うと左から順に並べてくれます。
style.cssにこちらを追加してください。

.images-wrap {
    display: flex;
    flex-wrap: wrap;
}

これで左から順に並ぶようになっています。
上のdisplay が左から並べる役割で、下の flex-warp が右まで行ったら折り返すという役割を担っています。

しかし実は、このままで表示しても思ったように表示されません。

なぜかというと、画像の幅が指定されていないので、画面いっぱいの幅の画像を左から並べている状態になっており、そのためただ上から下へと並んでいるだけになっているからです。

これを解消するには画像の幅を指定すれば大丈夫です。
先ほどのcssに .image についての部分を追加します。

.image {
    width: 33%;
}

33%は$\displaystyle \frac{1}{3}$ を表しています。
再度読み込むと、これできちんと3列に並んで表示されます。

最終更新: 2021/02/15 10:38