flex-grow:
伸び率
デフォルト 0
フレックスコンテナの主軸の幅に余白がある場合の、フレックスアイテムの伸び率を指定する。
flex-shrink:
縮み率
デフォルト 1
すべてのフレックスアイテムの幅の合計がフレックスコンテナの主軸の幅よりも大きい場合の、フレックスアイテムの縮み率を指定する。
flex-basis:
基本の幅
デフォルト auto
フレックスアイテムの基本の幅を指定する。
このページの内容は、Intersection Observer でスクロール中のビューポートを検知し、索引キーワードを捕捉する。捕捉した索引リストを Sticky でページに固定する。モバイルでの解説はBootstrap v5 のモーダルを設置してボタンをタップするとモーダルがフルスクリーンで開くというアイデアである。
各索引が構成する内容は、索引の項目に関する関連情報(ページ情報、外部リファレンスなど)の全てを網羅することである。
スクロール中のビューポートを検知し、索引キーワードを捕捉する。スクロールイベント(ページがスクロールされたタイミングで発火するイベント)は Intersection Observer を使うと確実に簡単に実装できることになる、素晴らしい。
「要素と交差したタイミング(スクロールして特定位置にきたタイミング)でイベントが発火する」場面に、このAPIが活用できる。
Intersection Observer
要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置される。オフセットは他の要素の配置には影響を与えない。
ほとんどの場合、絶対位置指定要素に height および width が auto が設定されると、内容に合うように大きさが調整される。しかし、非置換要素で絶対位置指定要素は、 top および bottom を指定して height を指定しない (つまり auto の) ままにすることで、利用できる垂直の空間を埋めることができる。同様に、 left および right を指定して width を auto のままにすることで、利用できる水平の空間を埋めることができる。
scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM(CSS Object Model) のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定する。以下はルート要素に指定した例である。
html {
scroll-behavior: smooth;
}
このプロパティがルート要素(<html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれる。)に指定された場合は、代わりにビューポートに適用される。このプロパティが body 要素に指定された場合は、ビューポートには適用されない。他のすべての要素は、この要素の子孫として配置しなければならない。
モーダルは Modal (モーダル) ・ Bootstrap v5.0 を導入した。簡単に設置できるし、デフォルトでモバイルだとフルスクリーンサイズで開くから、リサイズの手間が省ける。
本ページのレイアウトは索引に特化しているため、解説の段落が収まらない。だから、フルスクリーンサイズでモーダルを開いて快適に閲覧していただけるように設置した。
モーダルは HTML、CSS、JavaScript で構築される。モーダルはドキュメント内の他のすべてのものの上に配置され、<body> からスクロールを取り除き、モーダルのコンテンツがスクロールするようにする。
モーダルの「背景」をクリックすると、自動的にモーダルが閉じる。
定義句や文の文脈の中で定義している用語を示すために用いられる。<dfn> の直近の祖先である <p> 要素、 <dt>/<dd> の組み合わせ、 <section> 要素が用語の定義とみなさる。
そこで、以下のようなデザイン・レイアウトを施してみた。
<dl style="display: -webkit-flex; display: -moz-flex; display: flex;flex-wrap: wrap; align-items: stretch; width: 100%; border: 3px solid #3371c1; border-radius: 6px; background-color: #f7f7f7;">
<!-- dlタグ直下にdivタグが使用できる -->
<dt style="margin: 0; padding: .5em 1em; font-weight: bold; background-color: #c9dfec; border-top-left-radius: 3px;">
<dfn style="display: block; font-style: normal;">Are U experienced?
</dfn>
</dt>
<dd style="margin: 0; padding: 0; padding-top: .5em; padding-bottom: .5em;">
<ul style="list-style: circle; padding:0 16px;">
<li>これは、私の ウェブ制作者としての Portfolio (ポートフォリオ)のタイトルです。</li>
<li>クリエイターとして実用的アイデアや必要不可欠のスキルを駆使したライブラリーです。</li>
</ul>
</dd>
</dl>
略語と定義の両方を使用した書き方
The IAEA
<p>The <dfn><abbr title="International Atomic Energy Agency">IAEA</abbr></dfn>
HATWG HTML では、<dl> 要素内でそれそれの名前と値のグループを、<div> 要素でまとめることができる。これはスタイルを設定するために大いに役立つ。
〈Type A〉
<dl class="definition-list">
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dd>
<div class="div1">A free, open source, cross-platform,
graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
</div>
<div class="div2">read more ...
</div>
</dd>
</dl>
〈Type B〉display: inline-grid; を使った例
<dl style="display: inline-grid; grid-template-columns: 3fr 7fr; grid-auto-rows: auto; width: 100%; margin: 0 auto; padding: 0;">
<div style="padding: 12px; margin: 3px; font-size: 16px; background-color: #daf5b8;">
<dt style="font-size: 16px; background-color: #daf5b8; padding: 0; margin: 0;">Firefox</dt>
<dt style="font-size: 16px; background-color: #daf5b8; padding: 0; margin: 0;">Mozilla-Firefox</dt>
</div>
<div style="padding: 6px; margin: 3px; font-size: 16px; background-color: #f7f7f7;">
<dd>
Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。
</dd>
</div>
</dl>
用語 <dt> (definition term)と説明 <dd> (definition description)を<dl>(definition list) で囲んで、説明リストを表す。
<dt> は HTML の要素で、説明または定義リストの中で用語を表す部分であり、 <dl> の子要素としてのみ用いることができる。普通は <dd> 要素が続く。しかし、複数の <dt> 要素が続くと、複数の用語がすぐ後に続く <dd> 要素で定義されていることを表す。
後に続く <dd> (詳細説明)要素は、 <dt> を用いて指定した用語について、定義やその他の関連する文字列を表す。
<dd> (definition description) は HTML の要素で、説明リスト要素 <dl> 内で、その前の用語 <dt> の説明、定義、値などを示す。この要素は <dt> または他の <dd> の後に使うことができる。
一つの定義語に対し、複数の定義内容をあてることができる。
grid-template-columns および grid-template-rows、grid-template-areas でつくられたグリッドセルが明示的なグリッドセル(グリッド格子)と呼ばれる。
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
height: 100%;
}
制作の過程でグリッドアイテムを追加する。このとき、暗黙のグリッドで自動的に作成される行の既定値は、大きさが自動になっている。しかし、以下のように grid-auto-rows プロパティを事前に定義しておくと、新しく生成される行の高さや既存の行の高さを制御することができる。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: 15%;
height: 100%;
}
grid-auto-rows の値がひとつであれば、その内容で暗黙的な行は統一される。値が複数であれば、そのパターンで row を繰り返す。
例えば、「grid-auto-rows: 20%;」とグリッドコンテナに指定してアイテムを追加する場面では、各々のアイテムの行の高さは「20%」で生成される。
この関数は CSS グリッドのプロパティである grid-template-columns と grid-template-rows の中で使うことができる。
次の例では、はじめに 20px のトラックを持ち、続けて 6 つの 1fr トラックのセクション、最後に 20px のトラックを持つグリッドを作成する。
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
繰り返し記法はトラック列挙も取るので、トラック列挙の繰り返しパターンの作成にも利用できる。この次の例で、グリッドは10 のトラックで構成されており、それは1fr トラックに 2fr トラックが続くパターンを5回繰り返したものだ。
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
一列に並ぶ数を限定せず、画面の幅に合わせてボックスを折り返して次の行に表示させていきたい。そんな時は繰り返しの数値の部分を「auto-fit」にする。auto-fit を使えばボックスを折り返しながら親要素の余ったスペースを埋めていくことができる。親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められる。
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
関連ページ
グリッドレイアウトを極める 2
指定したグリッドセルに入れ子になるグリッドレイアウトでタイトルが納まる幅を指定しレスポンシブに仕上げる。モバイルのPortrait(縦方向)では横一列ではタイトルが入らないので、このようなレイアウトに変更した。正方形にレイアウトを執るには padding-top: 100%; を使う。
background-image を使ってイメージを配置するとき、background-position を使って最適な配置を試みる。
関連ページ
グリッドレイアウトでタイトルを作る
アイテムを配置する方法は二通りある。ライン番号で指定する方法とエリアに名前を付けて指定する。
/* コンテナ */
#container {
display: grid;
grid-template-rows: 100px 50px;
grid-template-columns: 150px 1fr;
}
/* アイテム */
#item {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
/* コンテナ */
#container {
display: grid;
grid-template-areas:
"areaA areaB"
"areaA areaC";
}
/* アイテム */
#itemA {
grid-area: areaA;
background: #fecb2f;;
}
関連ページ
グリッドレイアウトを極める 3
文章は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをグリッドレイアウトで実装するテクニック。利用可能なスペースを占める柔軟な単位であるfrを左右に配置する
.wrapper {
display: grid;
grid-template-columns:
1fr
min(40ch, 100%)
1fr;
}
グリッドレイアウトでレスポンシブを考えると、テキストの扱いが一番問題になる。特にモバイルを想定すると、テキストが収まりきらずに溢れてしまう現象に遭遇する。だから、極端にモバイルだけは、グリッドレイアウト自体を別のレイアウトで組むことがある。以下のサンプルがそうだ。
ここでひとつの解決策となるキーワードがある。「min-content」は大きさのキーワードで、「width: min-content;」というふうに使うことができ、コンテンツの内在的な最小幅を表す。テキストコンテンツの場合は、コンテンツがすべてのソフトラッピングの機会を使用した場合に、最も長い単語と同じくらい小さくなることを意味する。
height: min-content;
フォントサイズが最小10pxのせいで、レイアウトが簡単に崩れてしまい、モバイルだけ違うレイアウトにしたという経験があるだろう。しかし、10px以下のフォントサイズが表示できないChromeでもCSSで対応できる方法がある。 transform を使って縮小できる。以下は補足説明である。
scale()関数では、2つの数値で 2D 縮尺比率を指定する。 1つ目の数値はX方向、2つ目の数値はY方向の比率。 2つ目の数値は省略することができる。→transform: scale(0.8,0.8);
.tiny{
display:block;
font-size: 10px;
transform: scale(0.8);
transform-origin:0 0;
}
「PCでは全体レイアウトを70%対30%でコンテンツの横方向を分配し、次にメインの70%の部分を二段組みにする。」といった処理が簡単に作れてしまうのがグリッドレイアウトだ。
次のページでは、PC では 3 column、モバイルの portrait では 1 column、landscape では 2column(上図) というふうに表示している。
関連情報: スワイプ・レスポンシブ・レイアウト
グリッドレイアウトでは縦方向と横方向の比率が問題になる。分かりやすいのは正方形のグリッドラインが背面にあれば位置決定の強烈な手助けになる。
グリッドアイテムに aspect-ratio: 1 / 1; を設定することで、正方形のグリッドアイテムが出来上がる。
#item {
grid-row: 2 / 3;
grid-column: 2 / 3;
aspect-ratio: 1 / 1;
}
関連情報: グリッドレイアウトを極める 13
minmax() を grid-auto-rows の値に使用すると、最小サイズでありながら、コンテンツの高さに合わせて成長する行を作成することができる。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
minmax()を使用して、幅が200pxから300pxまでの限度のサイズを指定する。
.grid {
display: grid;
grid-template-columns: minmax(200px, 300px) 1fr 1fr;
}
グリッドの最大50%を占めるが、300pxより小さくならないようにしたい場合。
.grid {
display: grid;
grid-template-columns: minmax(300px, 50%) 1fr 1fr;
}
minmax()を使用するのが便利なレイアウトがたくさんある。その中で Media Queries 無しでレスポンシブデザインができるというのがある。
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
関連情報: Media Queries無しでレスポンシブデザイン
repeat() 記法は CSS の関数で、トラック列挙のすべてまたは一部を繰り返し、列や行の繰り返しをよりコンパクトに書くことができる。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* grid-template-columns: 1fr 1fr 1fr; と同義 */
}
例えば、「子要素が200px以上になることを前提に、入るだけ横に並べる」を実現できる。
.grid: repeat(auto-fit, minmax(200px, 1fr));
「grid-template-rows」に「fr」を定義すると、グリッドの高さが変化すると行も変化し、グリッドの応答性が向上する。
ページの全レイアウトに「grid-template-rows: min-content 1fr min-content;」を定義してみる。
「height: 100vh」より「min-content」と「min-content」のコンテンツ内容の高さを引いたサイズが「1fr」に割り当てられる。「min-content」+「min-content」+「1fr」の合計が「100vh」のとき、実際のコンテンツの高さに依存することなく、この割り当てられたサイズを保つ。このときフッターは画面下部に張り付くように配置される。割り当てられたサイズを越えて「100vh」を越えるとき「overflow: auto;」を定義すれば、高さはコンテンツのサイズへ伸張する。
grid-template-rows: min-content 1fr min-content;
align-self / flex
flex-grow / flex-shrink / flex-basis
CSS フレックスボックスレイアウトは CSS のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義する。基本構造はコンテナとアイテムで構成され、それぞれに定義されるプロパティが用意されている。
Flexboxレイアウトの基本的な書き方は、Flexコンテナと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れる。親要素に「display: flex;」を入れると完了である。
このように、要素を簡単に横並びにしたいときに使われることが多い。要素と要素の空白、配置を定義するプロパティを加えてバランスを調整していく。
<div style="display: flex;">
<div class="cercle">1</div>
<div class="cercle">2</div>
<div class="cercle">3</div>
<div class="cercle">4</div>
<div class="cercle">5</div>
</div>
(例) .container { flex-direction: row; }
flex-direction: row;(初期値)
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
gap は CSS のプロパティで、行や列の間のすき間 (溝) を定義する。これは row-gap および column-gap の一括指定である。このプロパティは <"row-gap"> の値と、任意で <"column-gap"> の値を続けて指定します。 <"column-gap"> が省略された場合、 <"row-gap"> と同じ値が設定される。フレックスレイアウトの場合、以下のように使う。
#flexbox {
display: flex;
flex-wrap: wrap;
width: 300px;
gap: 20px 5px;
}
(例) .container { flex-wrap: wrap; }
nowrap(初期値)
wrap
wrap-reverse
※単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がない。であるから、「align-content: 」を定義する場合は「flex-wrap: wrap; 」が必須である。
× align-content: flex-start; flex-wrap: nowrap;
align-content: strech;(初期値)
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
複数行にまたがるマルチラインのフレックスコンテナに対してのみ有効であるプロパティが「align-content」である。行間でのスペース分配を制御する。
折り返したflexアイテムの配置を決定するという性質上、flex-wrap: wrap; もしくは flex-wrap: wrap-reverse; の指定が必要である。
(例) .container { justify-content: flex-end; }
flex-start(初期値)
flex-end
center
space-between
space-around
/*justify-content: center; アイテムを中央に寄せる */
/*justify-content: start; アイテムを先頭に寄せる */
/*justify-content: end; アイテムを末尾に寄せる */
/*justify-content: flex-start; フレックスアイテムを先頭に寄せる */
/*justify-content: flex-end; フレックスアイテムを末尾に寄せる */
/*justify-content: left; アイテムを左端に寄せる */
/*justify-content: right; アイテムを右端に寄せる */
/* 均等配置 */
/*justify-content: space-between; 各アイテムを均等に配置し
最初のアイテムは先頭に寄せ、
最後のアイテムは末尾に寄せる */
/*justify-content: space-around; 各アイテムを均等に配置し
各アイテムの両側に半分の大きさの
間隔を置く */
/*justify-content: space-evenly; 各アイテムを均等に配置し
各アイテムの周りに同じ大きさの間隔を置く */
/*justify-content: stretch; 各アイテムを均等に配置し
サイズが 'auto' であるアイテムは、
コンテナーに合わせて引き伸ばす */
align-content と justify-content の一括指定。最初の値は align-content プロパティの値で、2 番目の値は justify-content の値である。
(例) .container { place-content: center start; }
center start
/* 位置による配置 */
/* align-content は left および right の値を取らない
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center; */
/* ベースラインによる配置 */
/* justify-content は baseline の値を取らない
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;*/
/* 均等配置 */
/*place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly; */
order は CSS のプロパティで、フレックスコンテナやグリッドコンテナの中で、アイテムを並べる順序を設定する。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置される。
(例) .item-1 { order: 5; }
flex プロパティは、フレックスアイテムの幅をまとめて指定するショートハンドである。フレックスアイテムをフレックスコンテナの領域に収めるために、 [flex-grow]、[flex-shrink]、[flex-basis] をまとめて指定する。
flex-grow:
伸び率
デフォルト 0
フレックスコンテナの主軸の幅に余白がある場合の、フレックスアイテムの伸び率を指定する。
flex-shrink:
縮み率
デフォルト 1
すべてのフレックスアイテムの幅の合計がフレックスコンテナの主軸の幅よりも大きい場合の、フレックスアイテムの縮み率を指定する。
flex-basis:
基本の幅
デフォルト auto
フレックスアイテムの基本の幅を指定する。
(例) .item-1 { flex: 0 1 30%; }
(例) .item1 { align-self: flex-end; }
(例) .item-1 { align-self: auto; } .item-2 { align-self: auto; } .item-3 { align-self: auto; }
(例) .item-3 { align-self: flex-start; }
(例) .item-3 { align-self: center; }
(例) .item-2 { align-self: stretch; }
(例) .item-2 { align-self: baseline; }
上述の 3つのプロパティの値を指定する代わりに、以下のキーワードを指定することも可能である。
initial
「0 1 auto」と同じ。主軸の幅に余白があってもフレックスアイテムの幅は伸びない。主軸の幅が小さいときは縮む。
auto
「1 1 auto」と同じ。主軸の幅に余白があるとき、フレックスアイテムの幅は伸びる。主軸の幅が小さいときは縮む。
none
0 0 auto」と同じ。フレックスアイテムの幅は伸縮しない。
/* 単位がない数値を 1 つ指定: flex-grow
flex: 2; */
/* 幅または高さを 1 つ指定: flex-basis
flex: 10em;
flex: 30%;
flex: min-content; */
/* 値を 2 つ指定: flex-grow | flex-basis
flex: 1 30px; */
/* 値を 2 つ指定: flex-grow | flex-shrink
flex: 2 2; */
/* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis
flex: 2 2 10%; */
flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定する。flex-growプロパティ・ flex-shrinkプロパティ・ flex-basisプロパティについては、 各プロパティで個別に指定するのではなく、 これら3つの値をまとめて指定できる flex プロパティを使用することが推奨されている。
(例)flex: 1;とは?、「flex-grow: 1; flex-shrink: 1; flex-basis: 0;」と同じ意味になり、「flex: 1 1 0;」とも同じである。
container
display: flex; gap:1px; flex-wrap: wrap; flex-direction: column;
item
(item1:)flex: 1 1 0;
(item2:)flex: 1 1 0;
(item3:)flex: 1 1 0;
次に、上の「(例)flex: 1;の場合」との違いは、コンテナの高さを少し伸ばしてみた。このように最も一般的な使用例である 「flex: 1;」 は、Flex アイテムを拡張して「flex-direction:」に定義した方向の利用可能なスペースを埋めることができる。
container
display: flex; gap:1px; flex-wrap: wrap; flex-direction: column;
item
(item1:)flex: 1 1 0;
(item2:)flex: 1 1 0;
(item3:)flex: 1 1 0;
(例)flex-direction: row; (初期値)の場合で見てみよう。
container
display: flex; flex-wrap: nowrap;
item
(item1:)flex: 1 1 0;
(item2:)flex: 1 1 0;
(item2:)flex: 1 1 0;
さて、今度は最初の「(例)flex: 1;の場合」の、「flex-basis: 0;」を「flex-basis: auto;」 へ変更してみるが、相違は認められない。「flex: auto」と「flex: 1 1 auto」は同じである。ここまでの検証では「flex: 1;」=「flex: auto」となりそうだが、そんなことはないだろう!?、…なった!?…不明である。
container
display: flex; gap:1px; flex-wrap: wrap; flex-direction: column;
item
(item1:)flex: 1 1 auto;
(item2:)flex: 1 1 auto;
(item3:)flex: 1 1 auto;
container
display: flex; gap:1px; flex-wrap: wrap; flex-direction: column;
item
(item1:)flex: auto;
(item2:)flex: auto;
(item3:)flex: auto;
(例)アイテムを伸ばしたい場合、flex: <number> の構成で、flex の値は flex-grow の値をとる。
container
display: flex; flex-wrap: nowrap;
item
(item1:)flex: 1;
(item2:)flex: 2;
(item2:)flex: 3;
(例)アイテムを縮めたくない場合は「flex-shrink: 0;」をアイテムに定義する。
container
display: flex; flex-wrap: wrap;
item
(item1:)flex-basis: 250px; flex-shrink: 0; /*縮めたくない要素に指定*/
(item2:)flex-basis: 50px;
(item2:)flex-basis: 50px;
(例)flex または flex-shrink を無使用、width だけ設定した場合
container
display: flex; flex-wrap: nowrap;
item
(item1:)width: 250px;
(item2:)width: 300px;
(item2:)width: 450px;
(例)幅もしくは高さを固定したい場合
container
display: flex; flex-wrap: nowrap; flex-direction: column;
item
(item1:)flex: 0 0 24px;
(item2:)flex: 0 0 24px;
(item2:)flex: 0 0 24px;
flex-grow は CSS のプロパティで、フレックスアイテムの主軸方向の寸法のフレックス伸長係数を設定する。このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定する。主軸方向の寸法は、アイテムの幅または高さのどちらかで、 flex-direction の値に依存して決まる。残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものである。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って分配される。
container
display: flex; flex-wrap: nowrap;
item
─
container
display: flex; flex-wrap: nowrap;
item
flex-grow:1;
container
display: flex; flex-wrap: nowrap;
flex-direction: row;(初期値 行のテキストの方向に配置 )
item
flex-basis:24px;
flex-grow: 0;
container
display: flex; flex-wrap: nowrap;
flex-direction: row;(初期値 行のテキストの方向に配置)
item
(item1:) flex-basis:24px; flex-grow:1;
(item2:) flex-basis:24px; flex-grow:1;
「flex: 0 0 24px;」をフレックスアイテムに設定するとフレックスアイテムの幅もしは高さが flex-basis の値で固定される。
container
display: flex; flex-wrap: nowrap; flex-direction: column;
item
flex: 0 0 24px;
container
display: flex; flex-wrap: nowrap;
flex-direction: column; 積み重なるように配置す
item
flex-basis:24px;
flex-grow:1;
container
display: flex; flex-wrap: nowrap;
flex-direction: column; 積み重なるように配置する
item
(item1:) flex-basis:24px; flex-grow:1;
(item2:) flex-basis:24px; flex-grow:1;
flex-shirnk は CSS のプロパティで、フレックスアイテムの主軸方向の寸法のフレックス縮小係数を設定する。このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス縮小係数) を設定する。主軸方向の寸法は、アイテムの幅または高さのどちらかで、 flex-direction の値に依存して決まる。残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものである。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って分配される。
container
display: flex; flex-wrap: nowrap;
item
─
container
display: flex; flex-wrap: nowrap;
item
flex-shirnk:1;
container
display: flex; flex-wrap: nowrap;
flex-direction: row;(初期値 /* 行のテキストの方向に配置 */)
item
flex-basis:24px;
flex-shirnk: 0;
container
display: flex; flex-wrap: nowrap;
flex-direction: row;(初期値 /* 行のテキストの方向に配置 */)
item
(item1:) flex-basis:24px; flex-shirnk:1;
(item2:) flex-basis:24px; flex-shirnk:1;
「flex: 0 0 24px;」をフレックスアイテムに設定するとフレックスアイテムの幅もしは高さが flex-basis の値で固定される。
container
display: flex; flex-wrap: nowrap; flex-direction: column;
item
flex: 0 0 24px;
container
display: flex; flex-wrap: nowrap;
flex-direction: column; /* 積み重なるように配置する */
item
flex-basis:24px;
flex-shirnk:1;
container
display: flex; flex-wrap: nowrap;
flex-direction: column; /* 積み重なるように配置する */
item
(item1:) flex-basis:24px; flex-shirnk:1;
(item2:) flex-basis:24px; flex-shirnk:1;
flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定する。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義する。flex-basis プロパティは、content キーワードまたは <'width'> で指定する。
親要素のサイズやflex-growプロパティ、flex-shrinkプロパティが指定されている場合、必ずしも指定した幅で表示されるとは限らず、自動的に調整されたうえで収まるように表示される。
「bootstrap」では、例えば「.col-7」のようなクラス名でフレックスボックスの幅が設定されている。この場合は「-ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%」である。
container
display: flex; flex-wrap: nowrap; flex-direction: row; (初期値)
item
flex-grow: 1; flex-shirnk: 1;
container
display: flex; flex-wrap: nowrap; flex-direction: column;
item
flex-basis: content;
container
display: flex; flex-wrap: nowrap; flex-direction: row; (初期値)
item
flex-basis: content;
container
display: flex; flex-wrap: nowrap; flex-direction: row; (初期値)
item
(item1:)flex-basis:auto;(初期値)
(item1:)flex-basis:auto;(初期値)
(item1:)flex-basis:auto;(初期値)
container
display: flex; flex-wrap: nowrap; flex-direction: column;
item
(item1:)flex-basis:auto;
(item1:)flex-basis:auto;
(item1:)flex-basis:auto;
container
display: flex; flex-direction: row; (初期値)
item
flex-shirnk:1;
container
display: flex; flex-wrap: nowrap;
flex-direction: row;(初期値 行のテキストの方向に配置 )
item
flex-basis:24px;
flex-shirnk: 0;
container
display: flex; flex-wrap: nowrap;
flex-direction: row;(初期値 行のテキストの方向に配置 )
item
(item1:) flex-basis:24px; flex-shirnk:1;
(item2:) flex-basis:24px; flex-shirnk:1;
例えば「flex: 0 0 24px;」をフレックスアイテムに設定するとフレックスアイテムの幅もしくは高さが flex-basis の値で固定される。
flex-growプロパティ・ flex-shrinkプロパティ・ flex-basisプロパティについては、 各プロパティで個別に指定するのではなく、 これら3つの値をまとめて指定できる flex プロパティを使用することが推奨されている。
container
display: flex; flex-wrap: nowrap; flex-direction: column;
item
flex: 0 0 24px;
container
display: flex; flex-direction: row;
item
flex: 0 0 24px;
container
display: flex; flex-wrap: nowrap;
flex-direction: column; 積み重なるように配置する
item
flex-basis:24px;
flex-shirnk:1;
container
display: flex; flex-wrap: nowrap;
flex-direction: column; 積み重なるように配置する
item
(item1:) flex-basis:24px; flex-shirnk:1;
(item2:) flex-basis:24px; flex-shirnk:1;
このセクションでは、まず「説明リスト」を記述する。この説明リストをフレックスボックスを使ってレイアウトしてみる。
<dl>
<dt>用語</dt>
<dd>用語に対する説明</dd>
</dl>
上の html を参考にして用語と説明を記述する。各領域を分かりやすく背景色を付けてみよう。
上のレイアウトをフレックスボックスを使って横並びにする。説明リストを包括する <dl> にコンテナを指定して、<dt> と <dd> をアイテムとする。アイテムに flex: <number>(幅の割合) を指定する。
<dl style="display: flex; flex-direction: row; ">
<dt style=" flex: 1; margin: 4px; background: #daf5b8; padding: 16px;">
Firefox
</dt>
<dd style="flex: 4; margin: 4px; background: #f5f5f5; padding: 16px;">
Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。
</dd>
</dl>
「display: flex;」で横に並べる。
各々のアイテムの文字を長くして幅を確保し余白を調整したいので、「flex-basis: 18%;」と「padding: 0 12px;」を追加する。
各々のアイテムのスペースがほしいので、コンテナに「gap: 6px;」を追加する。
全体のバランスを整えるために、直前行った「gap」の処理を取りやめて、その代わりに各アイテムを均等に配置し、各アイテムの両側に半分の大きさの間隔を置くために、「justify-content: space-around;」を定義する。
このセクションでは、右端に「日付」左にナビボタンを 3つ配置してみよう。
使用するプロパティは「justify-content: space-between;」である。各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる。この通りだ。
ナビボタンを囲ってひとつのブロックにする。そのブロックをフレックスアイテムにする。「gap」を使って各ボタンの空白を作る。
このセクションでは、PC では横に並ぶ段落がモバイルでは縦一列に並ぶ、というのはお馴染みの手法である。これをフレックスボックスレイアウトでやる。PC でブラウザを開いている場合は、ブラウザの幅を狭めると確かめることができる。モバイルでは横と縦の表示で確認できる。
メディアクエリーを使って、「flex-direction: row;」を「flex-direction: column;」へ変更するだけである。
.main-column {
display: flex;
flex-directhion: row; /* デフォルト */
}
@media screen and (max-width: 700px) {
.main-column {
flex-direction: column; /* モバイル */
}
}
各カードの中身の量が異なる場合、カードはグリッド領域やフレックスコンテナーの高さに引き伸ばされる。そして、カードの内部では通常のブロックレイアウトが用いられる。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまう。
フレックスボックスはこれを解決できる。カード自身もフレックスコンテナにして、flex-direction: column を指定する。そしてカードの本文領域に flex: 1 を指定する。これは flex: 1 1 0 の一括指定だ。アイテムは 0 の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文領域だけの場合、本文領域はフレックスコンテナ内の空間をすべて取り込み、フッターを下端に張り付かせる。 flex プロパティを削除すると、フッターが本文の真下に移動するのを確認できる。
This card doesn't have much content.
This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.
<div class="card">
<div class="content">
<p>This card has … to the same height.</p>
</div>
<footer style="background-color: #ddeeb3; border-top: #dfdfdf 1px solid; padding: 10px;">Card footer</footer>
</div>
.card {
display: flex;
flex-direction: column;
}
.card .content {
flex: 1 1 0;
padding: 10px;
}
Media Object というレイアウト手法を用いると、メディア クエリを使用せずに、画面スペースに応じて異なるレイアウトを行うコンポーネントを作成することができる。たとえば、モバイルでは積み重ね、デスクトップでは 2列になるように表示する。これは、数行の CSS で実現できる。
「flex: 1 1 250px」という使い方が Media Object を形成する。DEMO と説明をご覧いただきたい。
Googleは、現時点でこちらの記述を推奨している。
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
応急措置として、下記のように特定の幅に設定する方法もある。表示がうまくいかない時などには有効ですが、こちらはGoogle非推奨の方法である。
<head>
<meta name="viewport" content="width=320">
</head>
モバイルデバイスでは、viewport 指定を省略した場合、デフォルトの width 値内に収まるように表示される。デフォルトのwidth値)は 980px である。
関連情報: 伸縮する fex DEMO