Formally, the display property sets an element's inner and outer display types. The outer type sets an element's participation in flow layout; the inner type sets the layout of children. Some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the CSS Flexible Box Model specification.
Is is possible to use the class .flex instead of .df for back-compatibility purpose and better self-explanatory layouts. Despite being defined in the display module of Air, detailed explanation of its usage are available in its dedicated section of the documentation.
Read also: aircss/typography/flexbox
If not specified, block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.
<span class="db"> display: block; </span> <span class="db w4"> display: block; </span>
Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
<span class="di"> display: inline; </span> <span class="di"> display: inline; </span>
Inline-block will wrap around content inline. It also allows you to set height and width properties on the element, which display inline does not allow you to do. It does render the white-space in-between elements, so if you set width: 25% to four elements they will not just render as a 4 column layout by default. For this latter use case, a flexbox based solution should be a better way to achieve it.
<span class="dib"> display: inline-block; </span> <span class="dib"> display: inline-block; </span>
You can set the display of any element to none by tacking on the .dn class.
<span class="dn ba b--ecume-80 bg--ecume-60 pa2"> display: none; </span>
/* generate: container-rule */ .dn { display: none; } .db { display: block; } .di { display: inline; } .dib { display: inline-block; } /* end generate */