https://qiita.com/takepon_it/items/694636fc139d9ac1109a
↑の記事の続き的な物を書いていきます。
今回はFlexBoxを使って簡単なレイアウトを作っていきます！
#1.プロパティについて
FlexBoxってプロパティめちゃくちゃあって結局何使えばいいんだってなりません？
まぁ多分大半の物は"覚えなくても"大丈夫なんじゃないかなぁって思います。
そこで今回の記事でFlexBoxってこうやって使うんだなぁくらいのイメージが出来たらいいです！
#2.完成品のイメージ
こんな感じでブログの記事一覧みたいな物を作っていきます！
#3.早速コーティングしていこう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8">
<title>FlexBox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="group">
<div class="box">
<img src="ここに画像">
<h1>好きなタイトル</h1>
<p>好きな文</p>
</div>
<div class="box">
<img src="ここに画像">
<h1>好きなタイトル</h1>
<p>好きな文</p>
</div>
<div class="box">
<img src="ここに画像">
<h1>好きなタイトル</h1>
<p>好きな文</p>
</div>
</div>
</body>
htmlの記述はこんな感じでいいです！
ここは特に説明する箇所もないので早速CSSの方に移ります！
#4.CSSもかいていこう！
.group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
/*ここは自分の好きなようにしてください！*/
}
CSSはこうです！
これを解説していくと
まず.groupっていう箱を作りたいので
display;flex
で.groupを箱にします(親要素という)
①の説明をしますね
これは
flex-wrap: wrap;
というプロパティを使っていて、何故これを使うのかと説明すると
親要素にしたばかりで何もしないと、只々横一列に並ぶだけなんですよね。
しかしこのプロパティを指定して親要素にwidth等を指定すると、下にいくようになります！便利ですね！
そして②の説明ですが、これは図が汚すぎて申し訳ないんですが等間隔っていうことを伝えたい矢印です！
justify-content: space-between;
を使うことによって横並びになっているアイテムを等間隔に設置してくれるめちゃくちゃ便利なプロパティです！
一々margin等を使わなくても綺麗に揃えれるということですね！
この二つのプロパティを使うことによって、完成図みたいなブログの記事一覧っぽい画面を作れました！
.boxはご自身の好みで作ってみてください！
#4.最後に
どうでしたでしょうか？
FlexBoxを使えば簡単に綺麗にレイアウトを作れることが分かったと思います。
今回紹介したプロパティは本当にごく一部なものですが、それだけでも十分にいい感じの物が作れます！
この記事が自分と同じような初学者の参考になったらうれしいです！