CSSフレックスボックスの使い方を初心者向けに解説!縦・横並び/間隔/幅の指定方法。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEWebCSS3CSSフレックスボックスの使い方を初心者向けに解説!縦・横並び/間隔/幅の指定方法。CSSフレックスボックスの使い方を初心者向けに解説!縦・横並び/間隔/幅の指定方法。2022.08.20CSS3初心者向けこの記事では、CSSのフレックスボックス(Flexbox)について基本的な使用方法を初心者向けに、また目的ごとに解説したい。フレックスボックスはその使い勝手の良さから既にCSSレイアウトの標準となりつつあるレイアウトモード。その仕組みは決して難しいものでは無いが、基本的なルールやプロパティの使い方を知っておかないとハマりやすいポイントでもある。複数行の配置フレックスボックス(Flexbox)とは?まずはフレックスボックスの概要を説明しておきたい。現在ではCSSを使ったレイアウト作成には大きく分けて3つの手法がある。従来のCSSレイアウトpositionやfloatといったプロパティを使用して画面の構成を指定していく方法。ウェブの誕生以来長く使われてきたが、使いこなすには慣れが必要。フレックスレイアウトCSS3より導入されたフレキシブルで直感的なレイアウト方法。コンテナ内にアイテムを配置してレイアウトをおこなう。グリッドレイアウト縦軸と横軸からなるグリッドと呼ばれるマップにアイテムを配置するレイアウト方法。UIデザインの世界では昔からある手法で理解しやすいが、変更に弱いのが弱点だった。CSSのグリッドレイアウトではそのような変更の際の煩わしさもうまく解消されている。実践では複数のレイアウト手法を組み合わせてデザインをおこなっていくが、大まかな方針は実装に入る前の打ち合わせで決めておきたい。フレックスボックスとは?フレックスボックスはグリッドレイアウトと共にCSS3より導入されたCSSにおける新しいデザインレイアウトの指定方法。従来のpositionやfloatなどを使用した画面配置よりもフレキシブルに、そして直感的にレイアウトをデザインすることができる。フレックスボックスは複数のアイテム(要素)とそれを格納するコンテナから構成される。フレックスボックスのアイテムにあたる要素をコンテナとして使用する(入れ子構造)ことも可能。フレックスボックスを使用したレイアウトの例フレックスボックスのサンプル(編集可能)この記事で使用するフレックスボックスのサンプルを貼り付けておくので、色々な設定を試してみてほしい。CodePen.サンプルのHTML・CSSコードは以下の通り。}フレックスボックスの使い方ではフレックスボックスの使い方を確認しよう。フレックスボックスを使用するフレックスボックスはコンテナとアイテムから構成される。displayプロパティをflexに指定すると、その要素がフレックスボックスのコンテナとなる。flex;}アイテムの方向(横並びと縦並び)フレックスボックスでは横並び/縦並びのいずれかを指定してデザインを指定していく。アイテムの並ぶ方向はflex-directionプロパティで指定することができる。アイテムを横並びにするプロパティを「row」に設定した、もしくはflex-directionを指定しない場合はアイテムは横並びとなる。この場合はX軸をメイン軸、Y軸をサブ軸として捉える。rowアイテムを縦並びにするflow-directionをcolumnに設定するとアイテムが上から下の方向へと並び変わる。この場合においてはY軸がメイン軸、X軸がサブ軸となる。columnアイテムの順番アイテムは通常html内で要素の順番通りに左から右、もしくは上から下へと配置される。アイテムの順番を逆にするアイテムを逆の順番で配置したい場合はflex-directionをrow-reverseかcolumn-reverseに設定する。row-reverseアイテムの順番をそれぞれ指定するアイテムの順番を指定したい場合はアイテムに対してorderプロパティを使用する。orderプロパティでは整数の値を使用して、数値が小さい順にアイテムが並び替わる。値を指定しない場合は0となる。例として以下のようにorderを指定した場合は以下のように写真のようにアイテムが並び替わる。次にコンテナ内でのアイテムの配置を調整してみよう。前項で説明したようにフレックスボックスではflex-dirctionで横並び(row)か縦並び(column)を指定しているかによって、メイン軸・サブ軸が入れ替わる。メイン軸の配置はjustify-contentプロパティにて、サブ軸の配置はalign-itemsによって指定する。アイテムを左寄せにするアイテムを左寄せにする場合はjustify-contentをflex-startに指定する。flex-directionがcolumnの場合はメイン軸の方向が変わるのでアイテムは上寄せとなる。アイテムを右寄せにするアイテムを右寄せにする場合はjustify-contentをflex-endに指定する。flex-directionがcolumnの場合はアイテムは下寄せとなる。アイテムを中央揃えにするアイテムを中央で揃えたい場合はjustify-contentをcenterに指定する。アイテムを等間隔に配置するアイテムをコンテナ内で等間隔に配置したい場合はjustify-contentをspace-betweenにする。アイテムの左右の余白を等しくするアイテムの左右の余白を等しく配置したい場合はjustify-contentをspace-aroundにする。アイテムとアイテムの間を埋める(スペーサー)ウェブサイトのヘッダー部分などにおいて、アイテムとアイテムの間を埋めるようにスペースを空けたいといったパターンもよくある。その場合はスペースを挟むアイテムにmargin-rightかmargin-leftにautoを指定する。columnの場合は横軸方向)の配置はalign-itemsで指定する。align-itemsで使用できる値はjustify-contentと同様だ。アイテムのサブ軸方向の配置を個別に変更したい場合はalign-selfプロパティをアイテムに使用する。stretchを指定している。次にアイテムの幅や高さを指定するプロパティについて見ていきたい。アイテムのベースサイズを指定するコンテナのサイズに余裕がある場合に適応されるアイテムの幅を指定するにはflex-basisを使用する。flex-basisにはpx・em・%といった単位を使用することができる。上の例ではアイテム1のflex-basisを160pxにアイテム2のflex-basisを10remに指定している。アイテムを伸長する空白を埋めるようにアイテムを伸長したい場合はflex-growプロパティを使用する。flex-growを指定したアイテムがコンテナの余白を分割するように伸長する。flex-growは正数で指定する。上の例ではアイテム1のflex-growを1にアイテム2を3で指定している。アイテムを縮小するアイテムの合計幅がコンテナの幅が小さいときに特定のアイテムを縮小したいことがあるだろう。いった時はflex-shrinkで縮小率を指定する。flex-growと同様に指定は正数でおこなう。flexプロパティflexプロパティではflex-grow・flex-shrink・flex-basisをひとつのプロパティで指定することができる。200px;複数行の配置ひとつのフレックスボックスに複数の行にまたがるアイテムを配置することもできる。アイテムを複数行に配置したい場合はflex-wrapプロパティをwrapに指定する。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07この記事では、CSSのレイアウト手法であるグリッドレイアウトについてその基本的な使い方を説明していきたい。この記事は以下のような人を対象にしている。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。