CSS筆記-alignment properties
目錄
alignment properties
- justify-content: main-axis/ 調整整個內部元素(等同於調整padding)
- align-content: cross-axis/ 調整整個內部元素(等同於調整padding)
- justify-self:inline/調整父元素內特定元素自身的排列
- align-self:cross-axis/調整父元素內特定元素自身的排列
- justify-items:inline/超過一列的情況下調整父元素內的元素排列
- align-items:cross/超過一列的情況下調整父元素內的元素排列
justify-content & align-content
| space-between | 平均分配，元素之間的間隙相同但與邊界貼齊 |
| space-aroung | 平均分配，元素之間的間隙相同(為x)且邊界距離為1/2x |
| space-evenly | 平均分配，元素之間的間隙相同(x)且與邊界距離一樣(x) |
| stretch | 延伸占滿整個空間 |
| 常用 | center, start, end |
| display:flex:才有 | flex-start, flex-end |
| justify-content才有 | left, right |
justify-items& align-items
center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords
justfify-self& align-self
- 常用:center, start, end
- -self專屬:self-start, self-end
- display:flex: flex-start, flex-end
- justify-self:left, right
vertical-align
用於對齊inline元素或是table-cell元素
baseline/top /middle/bottom/ sub/text-top
text-align
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
p標籤
text-align: justify-all;
text-align: match-parent;
reference:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
Comments