CSS | Hazu Labo - パート 2

2019年9月4日2020年3月8日

【CSS / HTML】img に入る隙間って何だろう？

img の下に入る隙間

margin も padding も 0 なのに、なぜか img の下に隙間が入ってしまう。何ででしょう？
これ、地味に困るんですよね。
レイアウトが若干ずれるし、ネガティブマージンで見出しを画像に重ねようとしても、計算通りいかない・・・

原因は、img はインラインレベルの要素なので、デフォルトで vertical-align: baseline となっているからです。空間に引かれたベースラインの上に、画像が表示されるという考え方です。ベースラインに揃えられた画像の下には、任意の隙間ができます。

＜① vertical-align で上または下に揃える＞
img タグに vertical-align: top または vertical-align: bottom を指定することで、画像を上揃えか下揃えにして、ベースラインの下の隙間が無くなります。

img {
vertical-align: bottom; /* または vertical-align: top; */
}

＜② display で img をブロックレベルの要素化にする＞
display: block でブロックレベルの要素化することで、インラインレベルの配置にまつわるベースラインは消えます。ですが、ブロックレベルとして扱われるので、基本的には、隣接する要素とは縦方向に並びます。（横方向に並びません。）

img {
display: block;
}

ブロックレベル、インラインレベル、それぞれの特徴をよく知ることが大切ですね。

img の横に入る隙間

img と img を横並びに隙間なしに表示させたいのに、こんな風に、間に隙間が入ることがあります。

これは、html の書き方によります。
次の様に、二つの img タグを改行して記述して書いた場合です。

<img src="cat-dog.jpg">
<img src="hedgehog.jpg">

隙間を消すためには、これを改行せずにつなげて記述します。

<img src="cat-dog.jpg"><img src="hedgehog.jpg">

これで隙間が消えます。小さなことですが、気を付けなくてはいけないことですね。

2019年9月2日2020年3月8日

【CSS】margin の相殺を理解する

きっちり計算してレイアウトを作ったのに、大きさが合わない・・・。
margin が思ったように反映されない？どうして？
margin の相殺を理解していないと、そんなことになったりしますよね。
どんな場合に margin の相殺が起きるのか、起きないのかのまとめです。

どんな時に margin の相殺が起こるのか

細かな条件や例外を除いて、ざっくり言ってしまえばこれです。

「縦方向に接するブロックレベルの要素間の margin は相殺される」

隣接する margin は大きい方が適用されます。
要素同士が親子関係である場合、横方向の margin も接しますが、縦方向は相殺が起こり、横方向は起こりません。

margin の相殺例外：兄弟関係の要素

兄弟関係の要素に以下のモジュールやプロパティが指定されている場合、相殺は起こりません。

フレックスボックス・レイアウト
グリッド・レイアウト
position プロパティ（fixed、absolute が指定されている）
float プロパティ（left、right が指定されている）

margin の相殺例外：親子関係の要素

親子関係の要素に以下のモジュールやプロパティが指定されている場合、相殺は起こりません。

フレックスボックス・レイアウト
グリッド・レイアウト
position プロパティ（fixed、absolute が指定されている）
親要素に border が指定されている
（border-top 指定 → margin-top は相殺なし）
（border-bottom 指定 → margin-bottom は相殺なし）
親要素に padding が指定されている
（padding-top 指定 → padding-top は相殺なし）
（padding-bottom 指定 → padding-bottom は相殺なし）
親要素の heigh に数値が指定されている場合、margin-bottom は親要素のものが採用される
（heigh: auto の場合、相殺が起こる）

margin の相殺の特殊ケース：空要素

空要素（コンテンツの高さがゼロ）の場合のみ、margin の相殺は特殊です。

まず、空要素の中の margin-top と margin-bottom の間で相殺が起こります。大きい方が採用されます。
次に、空要素と隣接する要素との間に相殺が起こります。上の要素の margin-bottom、下の要素の margin-top、空要素の margin で一番大きいものが採用されます。

2019年8月28日2020年3月8日

【CSS】メディアクエリを使ってレスポンシブWebを作る

メディアクエリと、Flexboxを使って、PC・タブレット・スマホと、3段階の画面サイズに合わせてレスポンシブWebを作ってみました。
サンプルページ：https://exp.hazu.jp/media-query/media-query.html
仕組みをまとめてみたいと思います。

どのように表示させたいのか

スマホ縦 → １カラン
スマホ横・タブレット縦 → ２カラン
タブレット横・PC → ３カラン

ディバイスによるブレイクポイント

3段階の画面サイズに合わせて切り替えたいのですが、ブレイクポイントは何ピクセルにするのか、というのが問題ですね。Googleのディベロッパーツールによれば、こうなっています。
（以下の単位はCSS で利用する「CSS ピクセル」で「画面解像度」ではありません。iOS では「csspx」、Android では「dp」。）

スマートフォン

対応	横幅	高さ
iPhone 5/SE	320	568
iPhone 6/7/8	375	667
iPhone 6/7/8 Plus	414	736
iPhone X	375	812
Android（ほとんどのスマホ）	360	640

タブレット

端末	横幅	高さ
iPad	768	1024
iPad Pro	1024	1366
Android Sサイズ	600	960
Android Mサイズ	768	1024
Android Lサイズ	800	1280

これより、こんな3段階にしてみました。

メディアクエリ区分け（width）

スマホ縦：～499px
スマホ横＋タブレット縦：　500px ～ 800px
タブレット横＋PC：　801px～

メディアクエリ

＜ HTMLのメタ情報＞
まず、HTML の<head>の部分で、で、「ビューポート＝ディバイスの画面サイズ」になるように指示します。
（「ビューポート」については、前回、まとめました。→ 【CSS】よく使う単位 & ビューポート単位）

<meta name="viewport" content="width=device-width,initial-scale=1">

＜メディアクエリの書き方＞
CSS のメディアクエリを利用して、ブレイクポイントごとに条件分けしていきます。

@media screen and (max-width:499px) { /* １カランになるよう記述 */ }
@media screen and (min-width:500px) and (max-width:800px) { /* ２カランになるよう記述 */ }
@media screen and (min-width:801px){ /* ３カランになるよう記述 */ }

＜ CSS例＞

/* スマホ縦対応 1カラン */
@media screen and (max-width:499px) { 
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 100%;
}
}

/* スマホ横＆タブレット縦対応 ２カラン */
@media screen and (min-width:500px) and (max-width:800px) {
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 50%;
}
}

/* タブレット横＆ＰＣ対応 3カラン */
@media screen and (min-width:801px){
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 33.3%;
}
}

2019年8月26日2020年3月8日

【CSS】よく使う単位 & ビューポート単位

最近よく見かけるビューポート単位。ビューポートという概念自体もなんとなくしか分かっていないので、前から CSS でよく使われている単位と一緒にまとめてみます。

絶対的な単位

単位	説明	ピクセル換算
in	1インチ = 2.54センチメートル	96px
cm	1センチメートル = 10ミリメートル	約37.80px
mm	ミリメートル	約3.78px
pt	1ポイント = 1/72インチ	約1.33px
pc	1パイカ = 12ポイント	16px
px	ピクセル	1px

文字に使われる相対的な単位

単位	説明
em	親要素のフォントサイズが基準
rem	ルート要素（普通はHTML）のフォントサイズが基準
%	その要素のサイズが基準
ex	その要素の小文字「x」の高さが基準
ch	その要素の数字「0」の幅が基準

ビューポートを基準にした相対的な単位

ビューポートとは：ブラウザが Web ページをレンダリングする際に想定する仮想的な「表示領域」

っていうことなんですが、分かりづらいですよね。色々調べたんですが、こんな感じかと思います。
（以下の「px」は「画面解像度」ではありません。CSS で利用する「CSS ピクセル」です。）

ビューポートの幅 500px と設定したとする。仮想で500pxのウィンドウでレタリングしますよーということ。
実際の画面幅が、500pxより大きければ、拡大されて表示される。
実際の画面幅が、500pxよりちいさければ、縮小されて表示される。

色々試して見たのですが、色々な条件が絡み合って、必ずしもそうとは言えないのですが、ざっくりとした考え方としてはそんな感じです。

ビューポートは HTML の head の meta 要素で指定します。ビューポート幅 500px の場合はこうなります。

<meta name="viewport" content="width=500">

仕組みとしてはこうなんですが、レスポンシブ Web デザインを考える場合、ディバイスの画面サイズに合わせて、ビューポートを合わせる、というのが理想になります。

<meta name="viewport" content="width=device-width,initial-scale=1">

「width=divice-width」と指定することで、ディバイスの画面サイズに合わせて、ビューポートの幅をフレキシブルに変化させる、ということになります。

ビューポートがフレキシブルに変化するとなると、それぞれの要素の大きさも、相対的に変化します。そこで、ビューポートの幅や高さを基準とした、相対的な単位を利用する方がいいのではないか、という考えに基づいて利用されるのが、「ビューポートを基準にした相対的な単位」とういうことになります。

単位	説明
vw	ビューポートの幅に対する1/100の単位
vh	ビューポートの高さに対する1/100の単位
vmin	ビューポートの幅と高さのうち、小さい方の値に対する1/100の単位
vmax	ビューポートの幅と高さのうち、大きい方の値に対する1/100の単位

2019年8月21日2020年3月8日

【CSS】overflow-wrap (word-wrap) と word-break の違い

HTMLで文章を書く場合、表示範囲の一番最後まで来た時の改行は、何も指定していない場合、以下の通りです。

日本語：単語の途中であろうと、自動改行（禁則処理あり）
英数字（適当なスペースあり）：スペースに合わせて自動改行（禁則処理あり）
英数字（表示範囲を超える連続する長いもの）：改行されずはみ出す

特に、この長い英数字の改行を制御するのに便利な CSSプロパティ、overflow-wrap (word-wrap) と word-break 、違いは何なんでしょう？

① word-break : 表示範囲最後まで来た時、（単語が長かろうが短かろうが）単語の途中で改行させるかどうか

② overflow-wrap (word-wrap) : 表示範囲に収まらない長い連続する文字列を、途中で改行させるかどうか

（②ですが、word-wrap が古い名称で、サポートされていないブラウザもあるため、新しい名称の overflow-wrap と併記した方がいいようです。）

↓このような文字列がどのように表示されるか、それぞれ見ていきます。

例）CSSで改行が指定されていないデフォルト

word-break プロパティ

word-breakは3つの値（normal, break-all, keep-all）が取れます。

１．word-break: normal
デフォルトと同じです。

２．word-break: break-all
表示範囲を超える長さの英数字の文字列、適当なスペースの入っている短い文字列、どちらにしろ、範囲に収まるように、単語の途中で自動改行
されます。
日本語はデフォルトと同じく、単語の途中で自動改行されます。

３．word-break: keep-all
表示範囲を超えたとしても、決められた場所でしか改行しません。
英数字: 「スペース（空白）」「?」「-」
日本語: 「句読点（、。）」「スペース（空白）」「？」「－（全角ハイフン）」

overflow-wrap (word-wrap) プロパティ

overflow-wrap は２つの値（normal, break-word）がとれます。

１．overflow-wrap: normal
デフォルトと同じです。

２．overflow-wrap: break-word
表示範囲を超える長いの英数字の文字列: 範囲に収まるように、単語の途中で自動改行
適当なスペースの入っている短い英数字の文字列: 単語の切れ目で自動改行
日本語はデフォルトと同じく、単語の途中で自動改行されます。

overflow-wrap (word-wrap) が効かない場合

一般的な文章なら、overflow-wrap: break-word が一番利用しやすい感じがしますが、「内容が定まるまで幅の決まらない要素」がある場合、効きません。

１．shrink-to-fit width
Flexbox（親要素が display:flex）や、display:inline-block、float、position:absolute は、内容によって幅が決まるので、自動改行が効いていないように振る舞います。
→ 回避策　width:auto になっているので、幅（width）や最大幅（max-width）を明示する。

２．テーブル
テーブルの親要素（table-layout:auto）、子要素（display:table-cell）の場合、子要素に overflow-wrap: break-word を指定しても自動改行が無視されます。
→ 回避策　親要素に対して、固定レイアウトアルゴリズム table-layout:fixed を指定する。

2019年8月19日2020年3月8日

【CSS / HTML】width の外になぜはみ出すの？基本の基本の復習

先日ですね、PHP で吐き出される文字列が、改行させずに、なぜか width で指定した幅からはみ出してしまう・・・ということがあって。
どうしてだろう？どうしてだろう？PHP の方が間違っているのかと思い込んで、散々考えても分からなかったので、人に聞いてみたら、「CSS で普通に word-wrap: break-word とか word-break: break-all で制御すればいいだけなんじゃないの？」と言われ、言われてみればそうですね。一発で改行されました。思い込みって怖いなー。盲目になってしまった時は、人に聞くのが一番ですね・・・。

word-wrap: break-word と word-break: break-all については、また考察したいのですが、width を無視して要素がはみ出る場合について、ごく基本の基本に立ち返って、まとめてみたいと思います。

インラインの非置換要素

HTMLの要素は、インライン、インラインブロック、ブロックと3つのレベルに分けられます。
さらにインラインの要素は、width、height の指定できる置換要素、width、height の指定できない非置換要素があります。

インラインの置換要素（width、height を指定できる）

img　iframe　video　embed　audio　canvas　object

インラインの非置換要素（width、height を指定できない）

span　ruby　sub　sup　strong　em　mark　b　i　small　br　u　s　ins　del
cite　q　abbr　dfn　code　kbd　samp　var　bdo　label

要するに、span 等のインラインレベルの非置換要素に、width を指定しても無視されます。

margin、border、padding を考慮せず、width:100% に指定

width:100% とは、content の幅です。左右の margin、border、padding の数値が「0」でなければ、その分、親要素の width からはみ出します。

回避策①　calc()関数を使う

margin:0;　border:2px;　padding:2px の場合、左右のはみ出しの合計は 8px。calc()関数を使って、8px を引きます。
width: calc(100% – 8px)
「-」と「+」の演算子の前後にはスペースを入れるルールあり

回避策②　入れ子にする

外側の要素を width:100% でいっぱいに広げ、内側の要素の margin、border、padding、content（width:auto）を包むという考え方です。

回避策③　box-sizing プロパティの利用

box-sizing: border-box
と記述することで、要素に指定した width および height の中で border、padding を取るようにブラウザに指示。
margin は含まれない点に注意。

box-sizing を利用する際は、プレフィックスも記述した方がいいようです。
-webkit-box-sizing: border-box; /* Webkit */
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box; /* 標準 */

width の幅を超える連続する英数字

日本語や、適度にスペースの入った英語等の文章は、width で指定された幅に合わせて、自動改行されますが、切れ目のはっきりとしない連続する英数字は、width の幅からはみ出して表示されます。長いURL など、そういう例ですね。
この場合は、word-wrap: break-word や word-break: break-all を使って制御を掛けるのですが、長くなりそうなので、それはまた次回、じっくりまとめたいと思います。

2019年5月28日2020年3月8日

【CSS】Flexboxを使いこなす – その４まとめ

CSS Flexboxは、プロパティがたくさんあって、初めは覚えるのが大変だと思いましたが、一通り使ってみて思ったのは、レイアウトの実現が楽で、プロパティが多くてもストレスレスな感じですね。
Flexコンテナ（親要素）とFlexアイテム（子要素）、それぞれに記載するプロパティを図にしてみました。

Flexコンテナ（親要素）に記述するプロパティ

以下、詳細へのリンクと、要約です。

Flexboxの基本の記述
「desplay: flex」と最初に記述。必須。

flex-direction
方向の指定　値：row, row-reverse, column, column-reverse

flex-wrap
改行可否の指定　値：nowrap, wrap, wrap-reverse

flex-flow
「flex-direction」「flex-wrap」を一緒に記載するショートハンド

justify-content
水平方向の配置　値：flex-start, flex-end, center, flex-between, flex-around

align-items
垂直方向の配置　値：flex-start, flex-end, center, baseline, stretch

align-content
行の配置　値：flex-start, flex-end, center, flex-between, flex-around, stretch

Flexアイテム（子要素）に記述するプロパティ

以下、詳細へのリンクと、要約です。

flex-grow
flexアイテムの伸長倍率　値：数値（マイナス無効）

flex-shrink
flexアイテムの短縮倍率　値：数値（マイナス無効）

flex-basis
flexアイテムのサイズ　値：auto, 数値（pxなど）

flex（ショートハンド）
「flex-grow」「flex-shrink」「flex-basis」を一緒に記述するショートハンド

align-self
各Flexアイテムの垂直方向の配置　値：flex-start, flex-end, center, baseline, stretch

order
Flexアイテムの並べ替え　値：数値

2019年5月27日2020年3月8日

【CSS】Flexboxを使いこなす – その３ Flexアイテム（子要素）のプロパティ

CSS Flexboxを使いこなす – その1、CSS Flexboxを使いこなす – その2　の続きです。

前回までにまとめたこと

これまでのプロパティは、Flexコンテナ（親要素）の方に記述をして、Flexコンテナ内のFlexアイテム全体に値を指定していましたが、今回のプロパティは、各Flexアイテム（子要素）にそれぞれに値を指定します。

flex-grow プロパティ
flex-shrink プロパティ
flex-basis プロパティ
flex プロパティ（ショートハンド）
align-self プロパティ
order プロパティ

flex-grow プロパティ（Flexアイテムの伸びる倍率）

Flexコンテナ（親要素）に全てのFlexアイテム（子要素）を格納してなおスペースが余る場合、そのスペースを自動的に埋めるための各Flexアイテムの伸びる倍率を指定します。

（デフォルト　flex-grow: 0　マイナスの値は無効）

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-webkit-box-flex: 0;
	-ms-flex-positive: 0;
	flex-grow: 0;
	}

例）
Flexコンテナ（親要素）に、widthが30px の6個のFlexアイテム（子要素）は入っています。
左詰めで、右側に96pxの余りのスペースがあります。

全てのFlexアイテム（子要素）に、flex-grow:0と、同じ値を指定すると、余りのスペースは6等分され、96px÷6=16pxで、各Flexアイテムは16pxずつ伸びます。

flex-growに異なる値を指定すると、余りのスペースはその割合で分配されます。
↓の図の場合、2番目のFlexアイテムのみflex-grow:3で、他はflex-grow:1なので、2番目は他に比べて3倍伸びます。

サンプルページ： flex-grow.html

flex-shrink プロパティ（Flexアイテムの縮む倍率）

Flexアイテム（子要素）のサイズの合計が、Flexコンテナ（親要素）のサイズを上回ってしまう場合、自動的にFlexコンテナの中に収めるために、各Flexアイテムの縮む倍率を指定します。

（デフォルト　flex-shrink: 1 マイナスの値は無効）

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-negative: 1;
	flex-shrink: 1;
	}

例）
Flexコンテナ（親要素）に、widthが50px の6個のFlexアイテム（子要素）は入っています。Flexアイテムの幅の合計は、Flexコンテナより48px小さいです。

全てのFlexアイテム（子要素）に、flex-shrink:1と、同じ値を指定すると、はみ出した部分は6等分され、48px÷6=8pxで、各Flexアイテムは8pxずつ縮みます。

flex-shrink:0とすると、そのFlexアイテムは、オリジナルのサイズを維持します。それ以外の数値を指定されたFlexアイテムが、その数値の比率で縮みます。
↓の図の場合、2番目と3番目ののFlexアイテムのみflex-shrink:0なので、オリジナルの50pxを維持します。他はflex-grow:1なので分割され縮みます。

サンプルページ： flex-shrink.html

flex-basis プロパティ（Flexアイテムのサイズを指定）

各Flexアイテム（子要素）のサイズを指定できます。widthとほぼ同じですが、後に記述するflexショートハンドに含められるので便利です。

（デフォルト　flex-basis: auto）

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
	}

例）
Flexアイテム（子要素）に、flex-basis:autoを指定すると、元のサイズを維持します。
↓の図の場合、5番目のFlexアイテムのみ、flex-basis:150pxが指定されているので、サイズ変更されています。

サンプルページ： flex-basis.html

flex プロパティ（flex-grow、flex-shrink、flex-basisをまとめて指定するショートハンド）

flex-grow、flex-shrink、flex-basisを個別に指定するよりも、flexプロパティを利用してまとめて指定する方を、W3Cで推奨しているようです。

（デフォルト　flex: 0 1 auto）

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-flex: 0 1 auto;
	flex: 0 1 auto;
	}

「flex:」に続けて、スペースを開けて、「flex-grow」「flex-shrink」「flex-basis」の順に指定します。

「flex: 0 1 auto」なら、「flex-grow: 0」「flex-shrink: 1」「flex-basis: auto」となります。

また、「flex: auto」「flex: none」という値も指定できます。
「flex: auto」＝「flex: 1 1 auto」
「flex: none」＝「flex: 0 0 auto」

サンプルページ： flex-shorthand.html

align-self プロパティ（各Flexアイテムの垂直方向の配置を指定）

align-items プロパティでは、Flexコンテナ（親要素）の中にある全てのFlexアイテム（子要素）に対して同じ配置を指定しますが、align-selfは、それぞれのFlexアイテムに個別に配置を指定します。

（デフォルト　align-self: auto）

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-item-align: auto;
	-ms-flex-grid-row-align: auto;
	align-self: auto;
	}

align-self プロパティに指定できる値は、align-items プロパティと同じです。

「align-self: auto」align-items プロパティで指定された値を維持
「align-self: flex-start」上揃え
「align-self: flex-end」下揃え
「align-self: center」中央揃え
「align-self: baseline」ベースライン揃え
「align-self: stretch」Flexコンテナの高さ、もしくはコンテンツが一番多いFlexアイテムに合わせる

「align-self」の値は、「align-items」より優先されます。

サンプルページ： align-self.html

order プロパティ（Flexアイテムの並べ替え）

HTMLの記述の順番を変えずに、Flexアイテムの配置の順番を変えられます。

（デフォルト　order: 0）

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	}

サンプルページ： order.html

おしまい！

⇒　次回、CSS Flexboxまとめです。

⇒　 Flexbox を使いこなす – その1

⇒　 Flexbox を使いこなす – その2

2019年5月20日2020年3月8日

【CSS】Flexboxを使いこなす – その２ Flex コンテナ（親要素）のプロパティ・続き

CSS Flexboxを使いこなす – その1　の続きです。

前回は、以下の3点についてまとめました。

今回は、以下の3点です。

justify-content プロパティ
align-items プロパティ
align-content プロパティ

justify-content プロパティ（水平方向の揃え方の指定）

flex-direction プロパティで指定した方向に対して、Flex アイテム（子要素）の配置を指定できます。

（デフォルト　justify-content: flex-start）

justify-content: flex-start（並列の場合「左揃え」、縦列の場合「上揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

サンプルページ： justify-content-flex-start.html

justify-content: flex-end（並列の場合「右揃え」、縦列の場合「下揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

サンプルページ： justify-content-flex-end.html

justify-content: center（「中央揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

サンプルページ： justify-content-center.html

justify-content: space-between（最初と最後のアイテムは端に、それ以外は等間隔に配置）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

サンプルページ： justify-content-space-between.html

justify-content: space-around（最初と最後のアイテムも含め、全てのアイテムを等間隔に配置）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-pack: distribute;
	justify-content: space-around;
}

サンプルページ： justify-content-space-around.html

align-items プロパティ（垂直方向の配置の指定）

全てのFlexアイテムに対して、垂直方向の配置を指定します。

（デフォルト　align-items: stretch）

align-items: flex-start（並列の場合「上揃え」、縦列の場合「左揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

サンプルページ： align-items-flex-start.html

align-items: flex-end（並列の場合「下揃え」、縦列の場合「右揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

サンプルページ： align-items-flex-end.html

align-items: center（「中央揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

サンプルページ： align-items-center.html

align-items: baseline（ベースラインを揃えて配置）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

サンプルページ： align-items-baseline.html

align-items: stretch（Flexアイテムの高さが指定されてない場合、一番コンテンツの多いものに高さを合わせる）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

サンプルページ： align-items-stretch.html

align-content プロパティ（行の配置）

flex-wrap プロパティで「nowrap」以外に設定した場合、複数行になります。その時の行の配置を指定します。

（デフォルト　align-content: stretch）

align-content: flex-start（並列の場合「上揃え」、縦列の場合「左揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: start;
	align-content: flex-start;
}

サンプルページ： align-content-flex-start.html

align-content: flex-end（並列の場合「下揃え」、縦列の場合「左揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: end;
	align-content: flex-end;
}

サンプルページ： align-content-flex-end.html

align-content: center（「中央揃え」）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: center;
	align-content: center;
}

サンプルページ： align-content-center.html

align-content: space-between（最初と最後の行は端に、他の行は等間隔）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: justify;
	align-content: space-between;
}

サンプルページ： align-content-space-between.html

align-content: space-around（最初と最後の行も含め、全ての行が等間隔）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: distribute;
	align-content: space-around;
}

サンプルページ： align-content-space-around.html

align-content: stretch（最初の行は端に揃え、行の後に等間隔のスペース）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: stretch;
	align-content: space-stretch;
}

サンプルページ： align-content-stretch.html

ここまで！

⇒　 Flexbox を使いこなす – その1

⇒　 Flexbox を使いこなす – その3

2019年5月18日2020年3月8日

【CSS】Flexboxを使いこなす – その１基本と Flex コンテナ（親要素）のプロパティ

並列、縦列レイアウトの切り替えがシンプルなコードで行える Flexbox が使いこなせると、レスポンシブデザインが簡単にできますね。サンプル用のウェブページも作ってみました。ソースと合わせて動きを見てもらえればと思います。
プロパティがかなり多いので、今回は以下の3点をまとめます。

flexboxの基本の記述
flex-direction プロパティ
flex-wrap プロパティ
flex-flow プロパティ

Flexbox とは

Flexコンテナ（親要素）の中に、いくつかの Flexアイテム（子要素）を内包する構成です。
Flexコンテナ内でのFlexアイテムの配置、伸縮などを指定することができます。

↓ の HTML において、クラス item の6つの要素の配置、サイズを、順々にCSS Flexbox を利用して指定していきます。

HTML

<div class="flex-container">
   <div class="item one">１番目の要素</div>
   <div class="item two">２番目の要素</div>
   <div class="item three">３番目の要素</div>
   <div class="item four">４番目の要素</div>
   <div class="item five">５番目の要素</div>
   <div class="item six">６番目の要素</div>
</div>

Flexboxの基本の記述

CSSに「desplay: flex」と指示することで、要素が並列になります。

CSS

.flex-container {
	display: flex;
}

対応していないブラウザもあるかもしれないので、プレフィックスのも記述した方がいいでしょう。（以後、全て、プレフィックスも記します。）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

サンプルページ： flex-01.html

flex-directionプロパティ（方向の指定）

flex-directionを使うと、HTMLはそのままで、Flexコンテナの主軸の方向を設定することができます。

（デフォルト　flex-direction: row）

flex-direction: row（並列　左から右へ）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

サンプルページ： flex-direction-row.html

flex-direction: row-reverse（並列　右から左へ）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

サンプルページ： flex-direction-row-reverse.html

flex-direction: column（縦列　上から下へ）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

サンプルページ： flex-direction-column.html

flex-direction: column-reverse（縦列　下から上へ）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

サンプルページ： flex-direction-column-reverse.html

flex-wrapプロパティ（改行可否の指定）

縮小して1行に収めるか、幅を超えたら改行するかを指定できます。

（デフォルト　flex-wrap: nowrap）

flex-wrap: nowrap（縮小して1行に収める）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

サンプルページ： flex-wrap-nowrap.html

flex-wrap: wrap（縮小しないで複数行に配置　左から右へ　上から下へ）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

サンプルページ： flex-wrap-wrap.html

flex-wrap: wrap-reverse（縮小しないで複数行に配置　左から右へ　下から上へ）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}

サンプルページ： flex-wrap-wrap-reverse.html

flex-flowプロパティ（flex-direction, flex-wrapをまとめて指定するショートハンド）

（デフォルト　flex-flow: row nowrap）

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
}

「flex-flow:」に続けて、スペースを開けて、「flex-direction」「flex-wrap」の順に指定します。

サンプルページ： flex-flow.html

ここまで！続きは・・・

⇒　CSS Flexboxを使いこなす – その2

⇒　CSS Flexboxを使いこなす – その3