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