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

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

本日のINDEX
  1. align-items はアイテム全部の垂直方向の揃え方を決める
  2. align-self はアイテムを個別に指定できる
  3. align-content は複数行になったときの揃え方

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 の時)は、右揃えになります。

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 を指定しました。

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 を試してみました。

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文書での順番はそのままで、プレビューでの順序のみを変えます。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.