[TOC] ## 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-caption | display: table-caption; | | 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; | ## 实例 ### grid "gap-1" 为 四边间隙 ``` <div class="grid gap-1 grid-cols-3"> <div class="bg-red-100">1</div> <div class="bg-red-100">2</div> <div class="bg-red-100">1</div> <div class="bg-red-100">2</div> <div class="bg-red-100">1</div> <div class="bg-red-100">2</div> <div class="bg-red-100">1</div> <div class="bg-red-100">2</div> <div class="bg-red-100">1</div> </div> ``` ### flex 平分行 ``` <div class="flex space-x-4 "> <div class="flex-1 bg-red-100">1</div> <div class="flex-1 bg-red-100">2</div> <div class="flex-1 bg-red-100">3</div> <div class="flex-1 bg-red-100">4</div> <div class="flex-1 bg-red-100">5</div> </div> ```