nix

  • Docs
Docs Menu
  • nix
    • Display
    • Flexbox
    • Float
    • Margin
    • Sizing
    • Padding
    • Position
    • Text
    • Others

Display guide

display

CLASSDESCRIPTION
.nix-display_noneThe element is completely removed
.nix-display_inlineDisplays an element as an inline element. Any height and width properties will have no effect
.nix-display_inline-blockDisplays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
.nix-display_blockDisplays an element as a block element. It starts on a new line, and takes up the whole width
.nix-display_tableLet the element behave like a table element
.nix-display_table-cellLet the element behave like a td element
.nix-display_table-rowLet the element behave like a tr element
.nix-display_flexDisplays an element as a block-level flex container
.nix-display_inline-flexDisplays an element as an inline-level flex container
<div class="nix-display_flex"></div>
xxxxxxxxxx
 
1
<div class="nix-display_flex"></div>

Responsive example

CLASSDESCRIPTION
.nix-display_none--xs--xs suffix only affects device widths of 768px and lower.
.nix-display_block--sm--sm suffix only affects device widths of 1024px and lower.
.nix-display_flex--md--md suffix only affects device widths of 1200px and lower.

Contribute on Github! Edit this section.

  • display34 sec read
  • Responsive example11 sec read
    Copy