贊助者成為贊助者

字體排版

Framework7 附帶許多額外的 CSS 輔助類別，以協助您進行額外的樣式設定和格式化。

內容間距

外距

外距
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-left套用內距至左側
padding-right套用內距至右側
padding-top套用內距至頂部
padding-bottom套用內距至底部
padding-horizontal套用內距至左右側
垂直內距在頂部和底部套用內距
半內距在所有側邊套用半值內距
左半內距在左側套用半值內距
右半內距在右側套用半值內距
上半內距在頂部套用半值內距
下半內距在底部套用半值內距
水平半內距在左右側套用半值內距
垂直半內距在頂部和底部套用半值內距
無內距移除內距
無左內距移除左內距
無右內距移除右內距
無上內距移除上內距
無下內距移除下內距
無水平內距移除左右內距
無垂直內距移除上下內距

例如

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

浮動元素

左浮動元素會浮動在包含區塊的左側
右浮動元素會浮動在包含區塊的右側
無浮動停用浮動

例如

<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>

文字對齊

靠左對齊內嵌內容會對齊在行框的左邊緣
靠右對齊內嵌內容會對齊在行框的右邊緣
置中對齊內嵌內容會置中在行框內
兩端對齊內嵌內容會兩端對齊

例如

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

元素顯示

區塊顯示元素會顯示為區塊元素
內嵌顯示元素會顯示為內嵌元素
內嵌區塊顯示元素會顯示為內嵌區塊元素
彈性顯示元素會顯示為彈性元素
內嵌彈性顯示元素會顯示為內嵌彈性元素
隱藏元素會被隱藏

例如

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

彈性盒

有幾個輔助類別可以控制彈性模型

彈性方向

CSS justify-content 屬性定義瀏覽器如何沿著其容器的主軸在內容項目之間和周圍分配空間。

橫向彈性方向以線條方式排列
反向橫向彈性與 flex-direction-row 相同，但反向
縱向彈性堆疊線條的方向
反向縱向彈性與 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平均分配項目。將「自動」大小的項目延伸以符合容器

自動對齊

align-self CSS 屬性會對齊目前彈性線的彈性項目，覆寫 align-items 值。如果任何項目的橫軸邊界設定為自動，則會忽略 align-self。

align-self-flex-start將彈性項目置於開始處
align-self-flex-end將彈性項目置於結束處
align-self-center將項目置於中心周圍
align-self-stretch將「自動」大小的項目延伸以符合容器

彈性收縮

flex-shrink CSS 屬性指定彈性項目的彈性收縮因子。當彈性項目的預設寬度大於彈性容器時，彈性項目會收縮以填滿容器，依據 flex-shrink 數字而定。

flex-shrink-0設定 CSS 屬性 flex-shrink: 0
flex-shrink-1設定 CSS 屬性 flex-shrink: 1
flex-shrink-2設定 CSS 屬性 flex-shrink: 2
flex-shrink-3設定 CSS 屬性 flex-shrink: 3
flex-shrink-4設定 CSS 屬性 flex-shrink: 4
flex-shrink-5設定 CSS 屬性 flex-shrink: 5
flex-shrink-6設定 CSS 屬性 flex-shrink: 6
flex-shrink-7設定 CSS 屬性 flex-shrink: 7
flex-shrink-8設定 CSS 屬性 flex-shrink: 8
flex-shrink-9設定 CSS 屬性 flex-shrink: 9
flex-shrink-10設定 CSS 屬性 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 變數

以下是相關 CSS 變數（CSS 自訂屬性）清單。

:root {
  --f7-typography-padding: 16px;
  --f7-typography-margin: 16px;
}
改善此文件
在此頁面