ABCウェブエンジニアblog

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

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

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

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

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

 

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

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

 

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

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

 

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

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

justify-content

を使います。

 

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

align-items

を使います。

 

以下のような感じ。

 

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

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

 

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

 

 

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

www.webcreatorbox.com

 

 

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