テキストの中央寄せに便利な
flexプロパティを徹底解説 #1/2

2023.07.29 flexプロパティを徹底解説

はじめに

概要

テキストを中央に寄せるためには、flexプロパティが便利です。このプロパティはレスポンシブにも対応しており、様々なブラウザでも正常に動作しますので、まずはこちらのプロパティを覚えることをおすすめします。以下の記事で詳しく理解を深めることができますので、ぜひ参考にしてください

目的

テキストの中央寄せ
重要なプロパティ
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

テキストの中央寄せ

まずは以下のようにプロパティを指定します。下記はheaderに指定したときの例です。

header {
  display: flex;
  height: 150px;
  justify-content: center;
  align-items: center;
}

テキストが中央寄せになるように、justify-content: center;を使用しています。また、align-items: center;を使用して、指定した高さの位置で上下中央に配置されます。

重要なプロパティ

flex-direction: row;

デフォルトでは、flex-directionの値はrowです。配置方向を水平方向（左から右）に指定するCSSプロパティです。つまり、Flexboxコンテナ内のアイテムは、左から右に水平方向に並べられます。

navの構築例:

flex-direction: column;

Flexboxコンテナ内のアイテムの配置方向を垂直方向（上から下）に指定するCSSプロパティです。つまり、Flexboxコンテナ内のアイテムは、上から下に垂直方向に並べられます。

justify-content: space-between;

Flexboxコンテナ内のアイテムを水平方向に均等に配置するためのCSSプロパティです。このプロパティを使用すると、Flexboxコンテナ内のアイテム間に均等なスペースが追加され、最初のアイテムはコンテナの左端に、最後のアイテムはコンテナの右端に配置されます。デザインを形成するのには欠かせないプロパティです。

メインビジュアルのタイトルとテキストを上下中央に配置する例: