Updateサイトのレイアウトにおいて最近はFlexboxを採用するケースがほとんどなのではないでしょうか。言っても完璧に理解しているという方はどれくらいいるのでしょうか。様々なバリエーションがあり便利なFlexboxを今回はじっくりとまとめていきます。数がとても多いので全2回に分けてまとめていきたいと思います。今回はFlexboxレイアウトについての基本的な知識と、親要素のFlexコンテナーに指定するプロパティになります。基本:Flexboxを構成する要素についてまずは基本的なことになりますが、FlexboxはFlexコンテナーという親要素とFlexアイテムという子要素で構成されています。下記のようなFlexコンテナーとFlexアイテムの親子関係が成り立ちます。flex;」を指定することで、Flexboxレイアウトが適用され、子要素の「.flex-item」が横に並びフレキシブルに対応することが可能になります。SafariやiOS用に「-webkit-」のベンダープレフィックスをつけておきます。inline-flex;」を指定させます。-webkit-inline-flex;}これで要素をFlexboxレイアウトとして扱えるようになりました。これだけだと横に並んだだけになります。以下で説明する様々なプロパティでいろんな指定を行うことができるのがFlexbox最大の強みです。実践:親要素の「Flexコンテナー」の振る舞いを指定するまずは親要素である「Flexコンテナー」に対して様々な指定を行ってきたいと思います。親要素に含まれる子要素がどのような順番で並びどの場所から配置されるかと指定できます。(プレフィックスを付ける場合は「-webkit-flex-direction」となります)row左端から右端へと行内へ水平に子要素が並んで配置されます。row-reverse右端から左端へと行内へ水平に子要素が並んで配置されます。column上端から下端へと列内へ垂直に子要素が並んで配置されます。column-reverse下端から上端へと列内へ垂直に子要素が並んで配置されます。子要素の配置折り返しを指定できます。子要素を横一行に収めたいか、幅を保持して折り返したいかで使い分けます。(プレフィックスを付ける場合は「-webkit-flex-wrap」となります)nowrap子要素は折り返しされず必ず一つの横行内に収まります。wrap子要素は行内のサイズを超えると折り返され複数行に渡って配置されます。wrap-reverse子要素は行内のサイズを超えると折り返され複数行に渡って配置された上で、下段行から並び変わります。子要素を水平方向に揃えたい場合に指定します。flex-directionがcolumnなどの場合は垂直方向になり-reverseの指定がついているとflex-startとflex-endが逆になります。(プレフィックスを付ける場合は「-webkit-justify-content」となります)flex-start親要素の左端に寄せて子要素が配置されます。center親要素の水平方向中央に寄せて子要素が配置されます。flex-end親要素の右端に寄せて子要素が配置されます。space-between親要素の左右両端に子要素を揃えた上で、等間隔に配置されます。space-around親要素内で子要素が全て同じ間隔で配置されます。子要素を垂直方向に揃えたい場合に指定します。単一行が対象となるのでflex-wrapでnowrapを指定する必要があります。(プレフィックスを付ける場合は「-webkit-align-items」となります)stretch親要素の高さにあわせて子要素の高さが引き延ばされるように配置されます。flex-start親要素の上端に寄せて子要素が配置されます。center親要素の垂直方向中央に寄せて子要素が配置されます。flex-end親要素の下端に寄せて子要素が配置されます。baseline親要素のベースラインに合わせて子要素が配置されます。複数行にわたる子要素を垂直方向に揃えたい場合に指定します。複数行が対象となるのでflex-wrapでwrapを指定する必要があります。(プレフィックスを付ける場合は「-webkit-align-content」となります)stretch親要素の高さを占めるように均等に広がって配置されます。余白がある場合は均等にそれぞれの子要素の後ろにつきます。flex-start親要素の上端に集められて子要素が配置されます。center親要素の垂直方向中央に集められて子要素が配置されます。flex-end親要素の下端に集められて子要素が配置されます。space-between親要素の上端と下端に揃えられて、残りの行が等間隔に配置されます。space-around親要素内でそれぞれの行が等間隔に配置されます。親要素内の並びと配置、そして折り返し有無の指定をまとめてできます。flex-directionからflex-wrapの順に指定します。}いかがでしょうか、今回はFlexboxレイアウトにおける親要素のFlexコンテナーに指定するプロパティをまとめました。引き続き次回記事「CSSのFlexboxレイアウトをマスターするためのまとめ(Flexアイテム編)」で親要素のFlexアイテムに指定するプロパティをまとめていきたいと思います。ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちらデザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。コメントをキャンセル記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。メールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となります。コメント内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。配色と書体からターゲット別の女性向けデザインを考えてみる。