タイポグラフィ

Framework7には、追加のスタイリングやフォーマットを支援する多くの追加CSSヘルパークラスが付属しています。

コンテンツの間隔

マージン

Margin
margin	すべての側面にマージンを適用
margin-left	左側に余白を適用する
margin-right	右側にマージンを適用します。
margin-top	上に余白をつける
margin-bottom	下部に余白を適用する
margin-horizontal	左右の余白に適用する
margin-vertical	上下に余白を適用する
margin-half	全面に半値のマージンを適用
margin-left-half	左に半値のマージンを適用
margin-right-half	右側に半値のマージンを適用
margin-top-half	上に半値のマージンを適用
margin-bottom-half	下部に半値幅のマージンを適用
margin-horizontal-half	左と右に半値幅を適用する
margin-vertical-half	上下に半値の余白をつける
no-margin	余白の削除
no-margin-left	左マージンの削除
no-margin-right	右側の余白を削除します。
no-margin-top	トップマージンの削除
no-margin-bottom	下の余白を削除
no-margin-horizontal	左と右の余白を削除
no-margin-vertical	上と下の余白を削除

例：

<p class="margin-left">Text with left margin</p>
<p class="margin-right">Text with right margin</p>

パディング

Padding
padding	すべての辺にパディングを適用する
padding-left	左にパディングを適用する
padding-right	右側にパディングを適用します。
padding-top	上部にパディングを適用する
padding-bottom	下にパディングを適用します
padding-horizontal	左右にパディングを適用
padding-vertical	上と下にパディングを適用
padding-half	半値パディングをすべての辺に適用します。
padding-left-half	左に半値パディングを適用する
padding-right-half	右に半値のパディングを適用する
padding-top-half	上に半値のパディングを適用する
padding-bottom-half	下部に半値パディングを適用する
padding-horizontal-half	左と右に半値のパディングを適用
padding-vertical-half	上と下に半値のパディングを適用する
no-padding	パディングの削除
no-padding-left	左のパディングを削除します。
no-padding-right	右のパディングを削除
no-padding-top	上のパディングを削除
no-padding-bottom	下のパディングを削除
no-padding-horizontal	左と右のパディングを削除
no-padding-vertical	上と下のパディングを削除

例：

<p class="padding-left">Text with left padding</p>
<p class="padding-right">Text with right padding</p>

要素をフロートさせる

float-left	要素は、その要素を含むブロックの左側に浮きます。
float-right	要素が含まれるブロックの右側に浮きます。
float-none	フローティングを無効にする

例

<div class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!</p>
</div>
<div class="float-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!</p>
</div>

テキストの整列

text-align-left	インラインコンテンツは、ラインボックスの左端に配置されます。
text-align-right	インラインコンテンツはラインボックスの右端に配置されます。
text-align-center	行内コンテンツはラインボックス内で中央に配置されます。
text-align-justify	行内コンテンツの両端揃え

例：

<p class="text-align-center">Center aligned text</p>
<p class="text-align-right">Right aligned text</p>

要素の表示

display-block	要素をブロック要素として表示する
display-inline	エレメントはインラインエレメントとして表示されます。
display-inline-block	要素はインライン・ブロック要素として表示されます。
display-flex	エレメントはフレックスエレメントとして表示されます。
display-inline-flex	要素はインライン・フレックス要素として表示されます。
display-none	要素が非表示になる

例：

<div class="display-flex">
  <div>Hello</div>
  <div>World!</div>
</div>

フレックスボックス

フレックスモデルを制御するヘルパークラスがいくつかあります。

フレックス方向

CSS justify-content プロパティは、コンテナの主軸に沿って、ブラウザがコンテンツアイテムの間や周囲のスペースをどのように配分するかを定義します。

flex-direction-row	方向性はラインでレイアウトされます。
flex-direction-row-reverse	flex-direction-row`と似ていますが、逆になります。
flex-direction-column	行が積み重ねられる方向
flex-direction-column-reverse	flex-direction-column`と同じですが、逆になります。

コンテンツの両端揃え

CSS justify-contentプロパティは、ブラウザがコンテナの主軸に沿ってコンテンツアイテムの間や周囲のスペースをどのように配分するかを定義します。

justify-content-flex-start	最初からフレックスアイテムを詰める
justify-content-center	中央にアイテムをまとめる
justify-content-flex-end	フレックスアイテムを端から詰める
justify-content-space-between	アイテムを均等に配置します。最初のアイテムは開始点と同じ高さで、最後のアイテムは終了点と同じ高さになります。
justify-content-space-around	アイテムを均等に配置します。アイテムはどちらかの端に半分のサイズのスペースがあります
justify-content-space-evenly	アイテムを均等に配布します。アイテムの周囲に均等なスペースがある
justify-content-stretch	アイテムを均等に配置します。オートサイズのアイテムを容器に合わせて伸ばす
justify-content-start	最初からアイテムを詰める
justify-content-end	端からアイテムを詰める
justify-content-left	左から詰める
justify-content-right	右からアイテムを詰める

コンテンツの整列

CSS の align-content プロパティは、フレックスボックス コンテナとして機能しているコンテナの交差軸に沿って、ブラウザがコンテンツ アイテム間およびコンテンツ アイテム周辺のスペースをどのように配分するかを定義します。

align-content-flex-start	フレックスアイテムを最初から詰める
align-content-flex-end	フレックス アイテムを端から詰める
align-content-center	中央にアイテムを詰める
align-content-space-between	アイテムを均等に配置します。最初のアイテムは開始点と同じ高さで、最後のアイテムは終了点と同じ高さになります。
align-content-space-around	アイテムを均等に配置します。アイテムはどちらかの端にハーフサイズのスペースがある
align-content-stretch	アイテムを均等に配置します。自動」サイズのアイテムを容器に合わせて伸ばす

アイテムの整列

CSS align-itemsプロパティは、コンテナの横軸に沿って、ブラウザがフレックスアイテムの間や周囲のスペースをどのように配分するかを定義します。つまり、justify-contentと同じように動作しますが、直角方向に動作します。

align-items-flex-start	フレックス アイテムを最初から詰める
align-items-flex-end	フレックス アイテムを端から詰める
align-items-center	中央にアイテムを詰める
align-items-stretch	アイテムを均等に配置します。auto's-sizedアイテムをコンテナに合わせて伸ばす。

自己整列

align-self CSS プロパティは、現在のフレックスラインのフレックスアイテムを align-items の値よりも優先して整列させます。アイテムの軸間マージンが auto に設定されている場合は、align-self は無視されます。

align-self-flex-start	フレックス アイテムを最初に配置
align-self-flex-end	フレックス アイテムを最後に配置します。
align-self-center	アイテムを中央に配置する
align-self-stretch	auto'サイズのアイテムをコンテナに合わせて伸ばす

フレックスシュリンク

flex-shrink CSS プロパティは、フレックス アイテムのフレックス縮小率を指定します。フレックスアイテムのデフォルトの幅がフレックスコンテナよりも広い場合、フレックスアイテムはフレックスシュリンクの数値に応じてコンテナに合わせて縮小されます。

flex-shrink-0	Sets CSS property flex-shrink: 0
flex-shrink-1	Sets CSS property flex-shrink: 1
flex-shrink-2	Sets CSS property flex-shrink: 2
flex-shrink-3	Sets CSS property flex-shrink: 3
flex-shrink-4	Sets CSS property flex-shrink: 4
flex-shrink-5	Sets CSS property flex-shrink: 5
flex-shrink-6	Sets CSS property flex-shrink: 6
flex-shrink-7	Sets CSS property flex-shrink: 7
flex-shrink-8	Sets CSS property flex-shrink: 8
flex-shrink-9	Sets CSS property flex-shrink: 9
flex-shrink-10	Sets CSS property flex-shrink: 10

例：

<div class="display-flex justify-content-space-between align-items-flex-start">
  <div class="flex-shrink-0">Item 1</div>
  <div class="align-self-center">Item 2</div>
  <div class="align-self-flex-end">Item 3</div>
</div>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-typography-padding: 16px;
  --f7-typography-margin: 16px;
}