ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【HTML/CSS】横並びにしたいならdisplay: Flex;

displayflexで要素を横並び縦並び!html5

以前横並びにはFlexだけど、まだまだFloatも使うというような記事を書きました。

とはいえ便利なFlex、活用していきましょう。

Flexで横並び・縦並び配置を完全制覇すればレイアウトに関するコーディングレベルはぐっと上がると思います。

 

今回は「display; flex;」の使い方の基本のご説明から各プロパティ使用まとめも記載しています。

是非ご参考ください!

 

Flexはコンテナとアイテムの親子関係 

前回、position: relative/absolute;の説明の時にも親子関係だと説明しましたが、こちらもdisplay:flex;を指定する外側の囲みの部分を親(Flexコンテナ)、中身の横並びになる要素が子(Flexアイテム)となります。

display:flex;による横並びレイアウト、親子図。

 

子供たちは通常divなどブロック要素であれば縦に積まれてるはずですが、親にdisplay:flexが指定されている場合は「ほら!並びなさい!」ということでピシっと横並びになります。

この時中の子供たちはdivなど本来幅いっぱいに広がる要素でもインラインブロック要素のようにその中身の幅を基本に収縮します。

 

もう少し詳しく並び方を指定していなければさっきの図のように親の左上端から並ぶ状態。

横の並び方を詳しく指定するには

justify-content

を使います。

 

縦の並び方を指定するには

align-items

を使います。

 

以下のような感じ。

 

 

Flexを使いこなせばレイアウトが自由自在

flexを指定している親の要素にこの「justify-conetnt」と「align-items」を組み合わせるだけで縦横自在に並べられそうですね。

さらに細かくflexの子要素ひとつひとつにも指定する方法がありますが、それはまた今度ということで。

 

flex使いこなしていきましょう。

 

 

↓こちら私も愛用しているWebクリエイターボックスManaさんの作成されたチートシートが配布された記事です。おすすめ

www.webcreatorbox.com

 

 

↓上記と同じくWebクリエイターボックスManaさんの書かれた「HTML&CSSとWebデザイン入門講座」、デザインやWebの仕組みについても丁寧に触れて書かれている良書です。

 
↓フレックスやグリッドなど最新のレイアウトを網羅した書籍でおすすめです!
 

 

Flex以外にもPositionを使った配置や色々なCSS応用の解説記事もあるので是非ご参考頂ければ幸いです。

最後までお読み頂きありがとうございました!

 

webabc.hatenablog.jp

 

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp