字体排印

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

Flexbox

有几个辅助类来控制弹性模型：

Flex方向

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从开始打包flex项
justify-content-center围绕中心打包项
justify-content-flex-end从结束打包flex项
justify-content-space-between均匀分布项目。第一个项目与开始处对齐，最后一个项目与末尾处对齐
justify-content-space-around均匀分布项目。项目在两端各有一个半大小的空间
justify-content-space-evenly均匀分布项目。项目周围有相等的空间
justify-content-stretch均匀分布项目。将'auto'-尺寸的项目拉伸以适应容器
justify-content-start从开始处打包项目
justify-content-end从末尾处打包项目
justify-content-left从左侧打包项目
justify-content-right从右侧打包项目

对齐内容

CSS align-content 属性定义了浏览器如何在弹性容器的交叉轴上分布内容项之间的空间。

align-content-flex-start从开始打包flex项
align-content-flex-end从结束打包flex项
align-content-center围绕中心打包项
align-content-space-between均匀分布项目。第一个项目与开始处对齐，最后一个项目与末尾处对齐
align-content-space-around均匀分布项目。项目在两端各有一个半大小的空间
align-content-stretch均匀分布项目。将'auto'-尺寸的项目拉伸以适应容器

对齐项

CSS align-items 属性定义了浏览器如何在弹性项的交叉轴上分布空间。这意味着它像 justify-content 一样工作，但在垂直方向上。

align-items-flex-start从开始打包flex项
align-items-flex-end从结束打包flex项
align-items-center围绕中心打包项
align-items-stretch均匀分布项目。将'auto'-尺寸的项目拉伸以适应容器

对齐自身

对齐自身CSS属性对当前行的flex项进行对齐，覆盖align-items的值。如果任何项目的交叉轴边距设置为auto，则忽略对齐自身。

align-self-flex-start将flex项放在开始处
align-self-flex-end将flex项放在结束处
align-self-center将项目围绕中心放置
align-self-stretch拉伸'auto'-尺寸的项目以适应容器

Flex收缩

flex-shrink CSS属性指定了flex项的flex收缩因子。当flex项的默认宽度比flex容器更宽时，flex项将根据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;
}
改进此文档
在本页上