Typography

    Framework7 comes with a lot of additional CSS helper classes to help you with extra styling and formatting.

    Content Spacing

    Margin

    Margin
    margin Applies margin to all sides
    margin-left Applies margin to the left
    margin-right Applies margin to the right
    margin-top Applies margin to the top
    margin-bottom Applies margin to the bottom
    margin-horizontal Applies margin to the left and right
    margin-vertical Applies margin to the top and bottom
    no-margin Removes margin
    no-margin-left Removes left margin
    no-margin-right Removes right margin
    no-margin-top Removes left margin
    no-margin-bottom Removes bottom margin

    For example:

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

    Padding

    Padding
    padding Applies padding to all sides
    padding-left Applies padding to the 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
    no-padding Removes padding
    no-padding-left Removes left padding
    no-padding-right Removes right padding
    no-padding-top Removes left padding
    no-padding-bottom Removes bottom padding

    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

    There are several helper classes to control flex model:

    Justify Content

    The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.

    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

    The flex-shrink CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.

    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>