Flexboxの威力を発揮し、仕組みが分かりやすいのが、画像を並べる場合です。
今回は、3列の画像を左上から右に向かって並べていく形をつくっていきます。
下の手順に沿って、準備を進めてください。
- 今回のプロジェクト用の「my_photos」フォルダを作成
- つくったフォルダの中に、
index.html と style.css を作成
- つくったフォルダの中に、好きな画像を9枚追加
- HTMLにテンプレートを追加
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
これで準備は完了です。
フォルダやファイルの名前などは自由に決めて問題ないので、好きな名前をつけてください。
