/*!markdown

---
title: Display
---

布局相关样式。


| Class              | Properties                   |
| ------------------ | ---------------------------- |
| block              | display: block;              |
| inline-block       | display: inline-block;       |
| inline             | display: inline;             |
| flex               | display: flex;               |
| inline-flex        | display: inline-flex;        |
| table              | display: table;              |
| table-cell         | display: table-cell;         |
| table-column       | display: table-column;       |
| table-column-group | display: table-column-group; |
| table-footer-group | display: table-footer-group; |
| table-header-group | display: table-header-group; |
| table-row-group    | display: table-row-group;    |
| table-row          | display: table-row;          |
| flow-root          | display: flow-root;          |
| grid               | display: grid;               |
| inline-grid        | display: inline-grid;        |
| contents           | display: contents;           |
| hidden             | display: none;               |

## 用法
css 相关的知识点就不介绍了，请参考：

https://www.w3school.com.cn/cssref/pr_class_display.asp
https://tailwindcss.com/docs/display

# 响应式设计

支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。

## 状态前缀

不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

*/
@mixin make-display($prefix: '.') {
  @each $name,
    $value
      in (
        'block': block,
        'inline-block': inline-block,
        'inline': inline,
        'flex': flex,
        'inline-flex': inline-flex,
        'table': table,
        'table-caption': table-caption,
        'table-cell': table-cell,
        'table-column': table-column,
        'table-column-group': table-column-group,
        'table-footer-group': table-footer-group,
        'table-header-group': table-header-group,
        'table-row-group': table-row-group,
        'table-row': table-row,
        'flow-root': flow-root,
        'grid': grid,
        'inline-grid': inline-grid,
        'contents': contents,
        'hidden': none
      )
  {
    #{$prefix + $name} {
      display: $value;
    }
  }
}

@include make-display();
@each $deivce in map-keys($devices) {
  @include media-device($deivce) {
    @include make-display('.' + selector-escape($deivce + ':'));
  }
}