|WEBCSSのレイアウト構築で便利なFlexbox。横並びのレイアウトではよく利用され、横並びになった要素同士も高さが揃ってくれます。コンテンツの量の違いで、横並びの要素とコンテンツの高さと見た目が揃わないこともあります。Webデザインではコンテンツ量が違うことはよくありますし、レスポンシブの対応でも、幅の可変で要素の高さが変化することもあります。横並びとなったflexアイテムの子要素内にも、複数の要素で構築されていると、見た目の高さが揃わないこともあるので、うまく高さを調整していきたいところです。ここではサンプルを交えて、横並びの要素の見た目の高さを調整する方法をご紹介します。flexアイテムの高さを調整するFlexboxの横並びレイアウトの、簡単なサンプルをご用意しました。</div></section>layout-blockの親要素の中に、box-contsを子要素として用意。子要素はサムネイル画像とテキスト、リンクという構造です。flex;」とし、justify-contentプロパティを「space-between」として、flexアイテムの子要素を均等に配置、gapプロパティで余白と「2rem」つけました。flex;」とするだけで、子要素はflexアイテムとなり、flex-directionでflexコンテナの主軸の方向を変更しなければ、子要素は横並びになります。キレイに表示させていくには、横並びの要素の高さを揃えていきたいところ。子要素内のコンテンツの量によっては、見た目の高さが揃わないこともあります。flexアイテムとしては、子要素の高さはしっかりと揃っています。flex;」とした後に、flex-directionプロパティを「column」と縦方向にします。auto;」とします。表示を確認すると、ボタンの配置が調整されたのが確認できます。margin-topプロパティを「auto」とすることで、ボタン上の余白を自動で調整してくれるので、要素の1番下に配置されます。auto;」などを指定すると、横並びの要素と上下中央で揃えていくこともできます。要するに、marginで余白を調整することができるということです。ここまでのコードをまとめたものがこちら。}}以下、実際のレイアウトの表示(動き)です。動画(2分40秒)Flexboxの概念はレイアウト構築にとても便利です。flex-directionプロパティでの横並びや縦並び、justify-contentプロパティでの要素の配置や間隔のほか、よく利用するmarginプロパティも使うと、今まで以上に自由にレイアウトが調整することができるでしょう。Gridで構築することもあるでしょう。グリッドレイアウトの場合は、subgrid(サブグリッド)を指定することで手軽に要素の高さを揃えることができます。CSSのsubgridの指定方法については、以下の記事でご紹介しています。Gridで構築する際はぜひ参考にしてください。APIを利用して埋め込み動画に独自のサムネイルと再生ボタンを実装NEXT:Excelでのカンマ区切りのCSVデータのセルの分割や列と行の変換方法SEARCH検索PROFILEAkira元ボクサー、元トラックドライバーと不思議な経歴を持つ。納豆はご飯と分けて食べるタイプ。VOOMのタイムラインから手軽に情報にアクセスすることができます。Webエンジニアのブログ。