文本排版
Framework7 提供了很多额外的 CSS 辅助类，以帮助您进行额外的样式化和格式化。
内容间距
外边距
| 外边距 | |
|---|---|
| margin | 针对所有边应用外边距 |
| margin-left | 针对左边应用外边距 |
| margin-right | 针对右边应用外边距 |
| 边距顶部 | 应用于顶部的边距 |
| 边距底部 | 应用于底部的边距 |
| 边距水平 | 应用于左侧和右侧的边距 |
| 边距垂直 | 应用于顶部和底部的边距 |
| 边距一半 | 应用于所有侧面一半值的边距 |
| 边距左侧一半 | 应用于左侧一半值的边距 |
| 边距右侧一半 | 应用于右侧一半值的边距 |
| 边距顶部一半 | 应用于顶部一半值的边距 |
| 边距底部一半 | 应用于底部一半值的边距 |
| 边距水平一半 | 应用于左侧和右侧一半值的边距 |
| 边距垂直一半 | 应用于顶部和底部一半值的边距 |
| 无边距 | 删除边距 |
| 无边距左侧 | 删除左侧边距 |
| 无边距右侧 | 删除右侧边距 |
| 无边距顶部 | 删除顶部边距 |
| 无边距底部 | 删除底部边距 |
| 无边距水平 | 删除左侧和右侧边距 |
| 无边距垂直 | 删除顶部和底部边距 |
例如
<p class="margin-left">Text with left margin</p>
<p class="margin-right">Text with right margin</p>内边距
| 内边距 | |
|---|---|
| 内边距 | 应用于所有侧面的内边距 |
| 内边距左侧 | 应用于左侧的内边距 |
| 内边距右侧 | 应用于右侧的内边距 |
| 内边距顶部 | 应用于顶部的内边距 |
| 内边距底部 | 应用于底部的内边距 |
| 内边距水平 | 应用于左侧和右侧的内边距 |
| 内边距垂直 | 应用于顶部和底部的内边距 |
| 内边距一半 | 应用于所有侧面一半值的内边距 |
| 内边距左侧一半 | 应用于左侧一半值的内边距 |
| 内边距右侧一半 | 应用于右侧一半值的内边距 |
| 内边距顶部一半 | 应用于顶部一半值的内边距 |
| 内边距底部一半 | 应用于底部一半值的内边距 |
| 内边距水平一半 | 应用于左侧和右侧一半值的内边距 |
| 内边距垂直一半 | 应用于顶部和底部一半值的内边距 |
| 无内边距 | 删除内边距 |
| 无内边距左侧 | 删除左侧内边距 |
| 无内边距右侧 | 删除右侧内边距 |
| 无内边距顶部 | 删除顶部内边距 |
| 无内边距底部 | 删除底部内边距 |
| 无内边距水平 | 删除左侧和右侧内边距 |
| 无内边距垂直 | 删除顶部和底部内边距 |
例如
<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>
元素显示
| display-block | 元素将显示为块级元素 |
| display-inline | 元素将显示为内联元素 |
| display-inline-block | 元素将显示为内联块状元素 |
| display-flex | 元素将显示为 flex 元素 |
| display-inline-flex | 元素将显示为内联 flex元素 |
| display-none | 元素将被隐藏 |
例如
<div class="display-flex">
<div>Hello</div>
<div>World!</div>
</div>Flexbox
有若干帮助程序类可用来控制弹性模型
弹性方向
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 属性定义浏览器在作为 flexbox 容器的容器的交叉轴上如何分配和分隔各个内容项之间和周围的空间。
| 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 | 拉伸“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;
}