ほんっとにはじめてのHTML5とCSS3：【18-3】Flexbox内の縦（垂直）方向を揃えよう

【18-3】Flexbox内の縦（垂直）方向を揃えよう

最終更新日：2017年11月15日　（初回投稿日：2016年10月08日）

Flexbox の続きです。
今回は align-items、align-self、align-contentプロパティを使ってみましょう。
この3つは、Flexアイテムの垂直方向の揃え方を決めるプロパティです。

本日のINDEX

Flexbox に関しては、記事を分けています。

【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）: display: flex で「Flexコンテナ」を作ります。
flex-basis、flex-grow、flex-shrink、justify-contentプロパティを使ってみます。
【18-2】Flexbox内のボックスの配置方法を指定しよう: flex-wrap、flex-directionプロパティを使います。
【18-3】Flexbox内の縦（垂直）方向を揃えよう　←今日はココ: align-items、align-self、align-contentプロパティを使います。
【18-4】Flexboxの orderプロパティで表示順を自由に変えよう: orderプロパティを使います。
（ちょっとメモ）Flexbox をシミュレーションできるサイト2件: シミュレーションしてみると、わかりやすい！
【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ: Flexboxの各ブラウザの対応やベンダープレフィックスについて。

参考資料：W3C CSS Flexible Box Layout Module Level 1

align-items はアイテム全部の垂直方向の揃え方を決める

前回までのサンプルでは、特に何も指定しなくても Flexアイテムが横に並ぶと高さが揃っていました。これは、align-itemsプロパティのデフォルト値が stretch だからです。
align-itemsプロパティでほかの値にすると、高さはコンテンツの内容によって変わり、指定した揃い方になります。

align-itemsプロパティは Flexコンテナの中の全部のアイテムを指定するものなので、display: flex を指定したコンテナに指定します。

align-items の値
stretch	これがデフォルト Flexアイテムをスペースいっぱいに広げてアイテムの高さが揃います。縦に並んでいる時は幅が揃います
flex-start	上揃え縦に並んでいる時は左揃え
flex-end	下揃え縦に並んでいる時は右揃え
center	中央揃え
baseline	テキストのベースラインで揃えます

値の継承	なし	適用できる要素	Flexコンテナな要素

サンプルでは、align-items: flex-end を指定しています。
横に並んでいる時は Flexアイテムは下揃えに、ウィンドウを狭めて、アイテムが縦に並んだ時（flex-direction: column の時）は、右揃えになります。

サンプルのCSSです。

div#container {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end}
div#container section {flex:1 0 100px}

@media only screen and (max-width: 400px){
	div#container {flex-direction:column}
}

align-self はアイテムを個別に指定できる

さっきの↑align-itemsプロパティが Flexコンテナへ指定するのに対して、align-selfプロパティは各アイテムの揃え方を個別に変えることができます。ですので各Flexアイテムに指定します。

サンプルでは、align-itemsプロパティは flex-start に指定しておいて、3つめの Flexアイテムだけ align-self: center を指定しました。

サンプルのCSSです。

div#container {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start}
div#container section {flex:1 0 100px}
div#container section:nth-child(3) {align-self:center}

@media only screen and (max-width: 400px){
	div#container {flex-direction:column}
}

align-selfプロパティの値は、align-itemsプロパティとほぼ同じで、auto が追加されてます。
デフォルトは auto で親に指定された align-itemsプロパティの値に従います。

align-self の値
auto	これがデフォルト親のFlexコンテナに指定されたalign-itemsプロパティの値になります
stretch	Flexアイテムをスペースいっぱいに広げてアイテムの高さが揃います。縦に並んでいる時は幅が揃います
flex-start	上揃え。縦に並んでいる時は左揃え
flex-end	下揃え。縦に並んでいる時は右揃え
center	中央揃え
baseline	テキストのベースラインで揃えます

値の継承	なし	適用できる要素	Flexアイテムな要素

align-content は複数行になったときの揃え方

align-contentプロパティ は justify-contentプロパティの「縦バージョン」ってかんじ。
Flexアイテムが複数行になった場合の揃え方を指定します。

align-contentプロパティの値は、justify-content と同じキーワード5つに加えて「stretch」があり、これがデフォルト値です。

align-content の値
flex-start	上揃え
flex-end	下揃え
center	中央揃え
space-between	両端揃えの均等間隔
space-around	両端に半分のスペースがある均等間隔
stretch	余裕のスペースでストレッチ。これがデフォルトスペースに余裕が無ければ flex-start と同じになります

値の継承	なし	適用できる要素	Flexコンテナな要素（マルチライン）

サンプルでは、align-contentプロパティの値は space-around を試してみました。

サンプルのCSSです。

div#container {
	min-height:500px;
	display:flex;
	flex-wrap:wrap;
	align-content: space-around}
div#container section {flex:1 0 100px}

@media only screen and (max-width: 400px){
	div#container {flex-direction:column}
}

次回予告

次回は orderプロパティを使ってみます。
これはFlexアイテムの表示の順番を入れ替えることができます。
HTML文書での順番はそのままで、プレビューでの順序のみを変えます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。