【HTML/CSS】横並びにしたいならdisplay: Flex;
以前横並びにはFlexだけど、まだまだFloatも使うというような記事を書きました。
とはいえ便利なFlex、活用していきましょう。
Flexで横並び・縦並び配置を完全制覇すればレイアウトに関するコーディングレベルはぐっと上がると思います。
今回は「display; flex;」の使い方の基本のご説明から各プロパティ使用まとめも記載しています。
是非ご参考ください!
Flexはコンテナとアイテムの親子関係
前回、position: relative/absolute;の説明の時にも親子関係だと説明しましたが、こちらもdisplay:flex;を指定する外側の囲みの部分を親(Flexコンテナ)、中身の横並びになる要素が子(Flexアイテム)となります。
子供たちは通常divなどブロック要素であれば縦に積まれてるはずですが、親にdisplay:flexが指定されている場合は「ほら!並びなさい!」ということでピシっと横並びになります。
この時中の子供たちはdivなど本来幅いっぱいに広がる要素でもインラインブロック要素のようにその中身の幅を基本に収縮します。
もう少し詳しく並び方を指定していなければさっきの図のように親の左上端から並ぶ状態。
横の並び方を詳しく指定するには
justify-content
を使います。
縦の並び方を指定するには
align-items
を使います。
以下のような感じ。
Flexを使いこなせばレイアウトが自由自在
flexを指定している親の要素にこの「justify-conetnt」と「align-items」を組み合わせるだけで縦横自在に並べられそうですね。
さらに細かくflexの子要素ひとつひとつにも指定する方法がありますが、それはまた今度ということで。
flex使いこなしていきましょう。
↓こちら私も愛用しているWebクリエイターボックスManaさんの作成されたチートシートが配布された記事です。おすすめ
↓上記と同じくWebクリエイターボックスManaさんの書かれた「HTML&CSSとWebデザイン入門講座」、デザインやWebの仕組みについても丁寧に触れて書かれている良書です。