一、align-items 屬性 為彈性容器內的項目指定默認對齊方式。
1.stretch:默認。項目被拉伸以適合容器。
2.center:項目位於容器的中央。
3.flex-start:項目位於容器的開頭。
4.flex-end:項目位於容器的末端。
5.baseline:項目被定位到容器的基線。
6.initial:將此屬性設置為其默認值。
7.inherit:從其父元素繼承此屬性。
二、justify-content 用於設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。
/* 對齊方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 從行首開始排列 */
justify-content: end; /* 從行尾開始排列 */
justify-content: flex-start; /* 從行首起始位置開始排列 */
justify-content: flex-end; /* 從行尾位置開始排列 */
justify-content: left; /* 一個挨一個在對齊容器得左邊緣 */
justify-content: right; /* 元素以容器右邊緣為基准,一個挨着一個對齊, */
/* 基線對齊 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配彈性元素方式 */
justify-content: space-between; /* 均勻排列每個元素
首個元素放置於起點,末尾元素放置於終點 */
justify-content: space-around; /* 均勻排列每個元素
每個元素周圍分配相同的空間 */
justify-content: space-evenly; /* 均勻排列每個元素
每個元素之間的間隔相等 */
justify-content: stretch; /* 均勻排列每個元素
'auto'-sized 的元素會被拉伸以適應容器的大小 */
/* 溢出對齊方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
三、display:flex彈性布局