Container
| クラス名 | ブレイクポイント | プロパティ |
|---|---|---|
| container | (None) | width: 100%; |
| sm (640px) | max-width: 640px; | |
| md (768px) | max-width: 768px; | |
| lg (1024px) | max-width: 1024px; | |
| xl (1280px) | max-width: 1280px; | |
| 2xl (1536px) | max-width: 1536px; |
See the Pen rNMorjQ by Masahiro (@masahiro111) on CodePen.
Box Sizing
| クラス名 | プロパティ |
|---|---|
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
Display
| クラス名 | プロパティ |
|---|---|
| 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; |
Floats
| クラス名 | プロパティ |
|---|---|
| float-right | float: right; |
| float-left | float: left; |
| float-none | float: none; |
Clear
| クラス名 | プロパティ |
|---|---|
| clear-left | clear: left; |
| clear-right | clear: right; |
| clear-both | clear: both; |
| clear-none | clear: none; |
Object Fit
| クラス名 | プロパティ |
|---|---|
| object-contain | object-fit: contain; |
| object-cover | object-fit: cover; |
| object-fill | object-fit: fill; |
Object Position
| クラス名 | プロパティ |
|---|---|
| object-bottom | object-position: bottom; |
| object-center | object-position: center; |
| object-left | object-position: left; |
| object-left-bottom | object-position: left bottom; |
| object-left-top | object-position: left top; |
| object-right | object-position: right; |
| object-right-bottom | object-position: right bottom; |
| object-right-top | object-position: right top; |
| object-top | object-position: top; |
| object-none | object-fit: none; |
| object-scale-down | object-fit: scale-down; |
Overflow
| クラス名 | プロパティ |
|---|---|
| overflow-auto | overflow: auto; |
| overflow-hidden | overflow: hidden; |
| overflow-visible | overflow: visible; |
| overflow-scroll | overflow: scroll; |
| overflow-x-auto | overflow-x: auto; |
| overflow-y-auto | overflow-y: auto; |
| overflow-x-hidden | overflow-x: hidden; |
| overflow-y-hidden | overflow-y: hidden; |
| overflow-x-visible | overflow-x: visible; |
| overflow-y-visible | overflow-y: visible; |
| overflow-x-scroll | overflow-x: scroll; |
| overflow-y-scroll | overflow-y: scroll; |
Overscroll Behavior
| クラス名 | プロパティ |
|---|---|
| overscroll-auto | overscroll-behavior: auto; |
| overscroll-contain | overscroll-behavior: contain; |
| overscroll-none | overscroll-behavior: none; |
| overscroll-y-auto | overscroll-behavior-y: auto; |
| overscroll-y-contain | overscroll-behavior-y: contain; |
| overscroll-y-none | overscroll-behavior-y: none; |
| overscroll-x-auto | overscroll-behavior-x: auto; |
| overscroll-x-contain | overscroll-behavior-x: contain; |
| overscroll-x-none | overscroll-behavior-x: none; |
Position
| クラス名 | プロパティ |
|---|---|
| static | position: static; |
| fixed | position: fixed; |
| absolute | position: absolute; |
| relative | position: relative; |
| sticky | position: sticky; |
...追記中