Typography

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

    For example:

    Padding

    Padding
    paddingApplies padding to all sides
    padding-leftApplies padding to the left
    padding-rightApplies padding to the right
    padding-topApplies padding to the top
    padding-bottomApplies padding to the bottom
    padding-horizontalApplies padding to the left and right
    padding-verticalApplies padding to the top and bottom
    no-paddingRemoves padding
    no-padding-leftRemoves left padding
    no-padding-rightRemoves right padding
    no-padding-topRemoves left padding
    no-padding-bottomRemoves bottom padding

    For example:

    float-leftThe element will float on the left side of its containing block
    float-rightThe element will float on the right side of its containing block
    float-noneDisable floating

    For example:

    1. <p class="text-align-center">Center aligned text</p>
    2. <p class="text-align-right">Right aligned text</p>
    display-blockElement will be displayed as block element
    display-inlineElement will be displayed as inline element
    display-inline-blockElement will be displayed as inline block element
    display-flexElement will be displayed as flex element
    display-inline-flexElement will be displayed as inline flex element
    display-noneElement will be hidden

    For example:

    There are several helper classes to control flex model:

    justify-content-flex-startPack flex items from the start
    justify-content-centerPack items around the center
    justify-content-flex-endPack flex items from the end
    justify-content-space-betweenDistribute items evenly. The first item is flush with the start, the last is flush with the end
    justify-content-space-aroundDistribute items evenly. Items have a half-size space on either end
    justify-content-space-evenlyDistribute items evenly. Items have equal space around them
    justify-content-stretchDistribute items evenly. Stretch ‘auto’-sized items to fit the container
    justify-content-startPack items from the start
    justify-content-endPack items from the end
    justify-content-leftPack items from the left
    justify-content-rightPack 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.

    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-startPack flex items from the start
    align-items-flex-endPack flex items from the end
    align-items-centerPack items around the center
    align-items-stretchDistribute 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-startPut the flex item at the start
    align-self-flex-endPut the flex item at the end
    align-self-centerPut the item around the center
    align-self-stretchStretch ‘auto’-sized items to fit the container

    For example:

    1. <div class="display-flex justify-content-space-between align-items-flex-start">
    2.   <div class="flex-shrink-0">Item 1</div>
    3.   <div class="align-self-center">Item 2</div>