排版设计

Framework7带有许多额外的CSS辅助类，以帮助您进行额外的样式和格式设置。

Content Spacing

Margin

Margin
margin	应用于所有边的外边距
margin-left	应用于左边的外边距
margin-right	Applies margin to the right
margin-top	Applies margin to the top
margin-bottom	Applies margin to the 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	Removes top margin
no-margin-bottom	Removes bottom margin
no-margin-horizontal	移除左右的外边距
no-margin-vertical	移除上下的外边距

For example:

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

Padding

Padding
padding	应用于所有边的内边距
padding-left	应用于左边的内边距
padding-right	Applies padding to the right
padding-top	Applies padding to the top
padding-bottom	Applies padding to the bottom
padding-horizontal	Applies padding to the left and right
padding-vertical	Applies padding to the top and bottom
padding-half	Applies half-value padding to all sides
padding-left-half	Applies half-value padding to the left
padding-right-half	Applies half-value padding to the right
padding-top-half	Applies half-value padding to the top
padding-bottom-half	Applies half-value padding to the bottom
padding-horizontal-half	Applies half-value padding to the left and right
padding-vertical-half	Applies half-value padding to the top and bottom
no-padding	Removes padding
no-padding-left	Removes left padding
no-padding-right	Removes right padding
no-padding-top	Removes top padding
no-padding-bottom	Removes bottom padding
no-padding-horizontal	Removes left and right paddings
no-padding-vertical	Removes top and bottom paddings

For example:

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

Float Elements

float-left	The element will float on the left side of its containing block
float-right	The element will float on the right side of its containing block
float-none	Disable floating

For example

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

text-align-left	The inline contents are aligned to the left edge of the line box
text-align-right	The inline contents are aligned to the right edge of the line box
text-align-center	The inline contents are centered within the line box
text-align-justify	The inline contents are justified

For example:

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

Element Display

display-block	Element will be displayed as block element
display-inline	Element will be displayed as inline element
display-inline-block	Element will be displayed as inline block element
display-flex	Element will be displayed as flex element
display-inline-flex	Element will be displayed as inline flex element
display-none	Element will be hidden

For example:

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

Flexbox

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

Flex Direction

CSS的justify-content属性定义了浏览器沿其容器的主轴如何在内容项之间和周围分配空间。

flex-direction-row	方向沿一条线排列
flex-direction-row-reverse	类似于flex-direction-row，但是是相反的方向
flex-direction-column	The direction in which lines are stacked
flex-direction-column-reverse	Like flex-direction-column, but reversed

Justify Content

CSS的justify-content属性定义了浏览器如何在容器的主轴上分配空间，以及围绕内容项之间的空间分布。

justify-content-flex-start	Pack flex items from the start
justify-content-center	Pack items around the center
justify-content-flex-end	Pack flex items from the end
justify-content-space-between	Distribute items evenly. The first item is flush with the start, the last is flush with the end
justify-content-space-around	Distribute items evenly. Items have a half-size space on either end
justify-content-space-evenly	Distribute items evenly. Items have equal space around them
justify-content-stretch	Distribute items evenly. Stretch 'auto'-sized items to fit the container
justify-content-start	Pack items from the start
justify-content-end	Pack items from the end
justify-content-left	Pack items from the left
justify-content-right	Pack items from the right

Align Content

The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container.

align-content-flex-start	Pack flex items from the start
align-content-flex-end	Pack flex items from the end
align-content-center	Pack items around the center
align-content-space-between	Distribute items evenly. The first item is flush with the start, the last is flush with the end
align-content-space-around	Distribute items evenly. Items have a half-size space on either end
align-content-stretch	Distribute items evenly. Stretch 'auto'-sized items to fit the container

Align Items

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.

align-items-flex-start	Pack flex items from the start
align-items-flex-end	Pack flex items from the end
align-items-center	Pack items around the center
align-items-stretch	Distribute items evenly. Stretch 'auto'-sized items to fit the container

Align Self

The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the item's cross-axis margin is set to auto, then align-self is ignored.

align-self-flex-start	Put the flex item at the start
align-self-flex-end	Put the flex item at the end
align-self-center	Put the item around the center
align-self-stretch	Stretch 'auto'-sized items to fit the container

Flex Shrink

flex-shrink CSS属性指定了flex项目的收缩因子。当flex项目的默认宽度大于flex容器时，根据flex-shrink的数值，flex项目将收缩以填充容器。.

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

For example:

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