@dabapps/roe/src/less/display.examples.md

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

Used to change the css `display` property of an element on different screen sizes.

Available display types are: `none`, `flex`, `block`, `inline`, and `inline-block`.

Note: `display-none` is an alias for `xs-display-none`, and `display-block` an alias for `xs-display-block`, etc.

#### Examples

```js
import { Row, Column } from '@dabapps/roe';

<Row className="display-column">
  <Column xs={6} className="xs-display-none sm-display-block md-display-none">
    xs-display-none sm-display-block md-display-none
  </Column>
  <Column xs={6} className="xs-display-block sm-display-none md-display-block">
    xs-display-block sm-display-none md-display-block
  </Column>
</Row>;
```

You can use `display-flex` to easily make a child component fill its parent, for example, in a flex grid:

```js
import { Row, Column, ContentBox, DabIpsum } from '@dabapps/roe';

<Row className="flex-grid">
  <Column xs={12} sm={6} md={4} lg={3} className="display-flex">
    <ContentBox>
      <DabIpsum count={2} />
    </ContentBox>
  </Column>
  <Column xs={12} sm={6} md={4} lg={3} className="display-flex">
    <ContentBox>
      <DabIpsum count={1} />
    </ContentBox>
  </Column>
  <Column xs={12} sm={6} md={4} lg={3} className="display-flex">
    <ContentBox>
      <DabIpsum count={2} />
    </ContentBox>
  </Column>
  <Column xs={12} sm={6} md={4} lg={3} className="display-flex">
    <ContentBox>
      <DabIpsum count={1} />
    </ContentBox>
  </Column>
  <Column xs={12} sm={6} md={4} lg={3} className="display-flex">
    <ContentBox>
      <DabIpsum count={2} />
    </ContentBox>
  </Column>
  <Column xs={12} sm={6} md={4} lg={3} className="display-flex">
    <ContentBox>
      <DabIpsum count={2} />
    </ContentBox>
  </Column>
</Row>;
```