## align-content屬性 align-content 屬性：在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項（垂直）。 **提示**：使用 justify-content 屬性對齊主軸上的各項（水平）。 **注意**：容器內必須有多行的項目，該屬性才能渲染出效果。 JavaScript 語法：object.style.alignContent="center" * * * ## CSS 語法 ~~~ align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; ~~~ ## 默認值 | 值 | 描述 | 測試 | | --- | --- | --- | | stretch | 默認值。項目被拉伸以適應容器。 | [測試 ?](https://www.w3cschool.cn/tryrun/csstryit?tpl=playcss_align_content&param=stretch) | | center | 項目位于容器的中心。 | [測試 ?](https://www.w3cschool.cn/tryrun/csstryit?tpl=playcss_align_content&param=center) | | flex-start | 項目位于容器的開頭。 | [測試 ?](https://www.w3cschool.cn/tryrun/csstryit?tpl=playcss_align_content&param=flex-start) | | flex-end | 項目位于容器的結尾。 | [測試 ?](https://www.w3cschool.cn/tryrun/csstryit?tpl=playcss_align_content&param=flex-end) | | space-between | 項目位于各行之間留有空白的容器內。 | [測試 ?](https://www.w3cschool.cn/tryrun/csstryit?tpl=playcss_align_content&param=space-between) | | space-around | 項目位于各行之前、之間、之后都留有空白的容器內。 | [測試 ?](https://www.w3cschool.cn/tryrun/csstryit?tpl=playcss_align_content&param=space-around) | | initial | 設置該屬性為它的默認值。請參閱?[*initial*](https://www.w3cschool.cn/cssref/css-initial.html)。 | [測試 ?](https://www.w3cschool.cn/tryrun/csstryit?tpl=playcss_align_content&param=initial) | | inherit | 從父元素繼承該屬性。請參閱?[*inherit*](https://www.w3cschool.cn/cssref/css-inherit.html)。 | ? | ***** ## align-items 屬性 align-items：設置了flex容器的對齊方式。 **提示**：使用每個flex對象元素的 align-self 屬性可重寫 align-items 屬性。 JavaScript 語法：object.style.alignItems="center" ## CSS 語法 ``` align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit; ``` ## 屬性值 | 值 | 描述 | 測試 | | --- | --- | --- | | stretch | 默認。 拉伸元件以適應容器。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit4.html#stretch) | | center | 中心元素在容器內。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit4.html#center) | | flex-start | 位置元素在容器的開頭。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit4.html#flex-start) | | flex-end | 位置元素在容器的末端。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit4.html#flex-end) | | baseline | 位置元素在容器的基線。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit4.html#baseline) | | initial | 設置為默認值。請參閱[*initial*](https://www.w3cschool.cn/cssref/css-initial.html)。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit4.html#initial) | | inherit | 從其父元素繼承此屬性。請參閱[*inherit*](https://www.w3cschool.cn/cssref/css-inherit.html)。 | ? | ***** ## align-self 屬性 align-self 屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。。 **注意**：align-self 屬性可重寫靈活容器的 align-items 屬性。 JavaScript 語法：object.style.alignSelf="center" * * * ## CSS 語法 ``` align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; ``` ## **參數** | 值 | 描述 | 測試 | | --- | --- | --- | | auto | 默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit5.html#auto) | | stretch | 元素被拉伸以適應容器。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit5.html#stretch) | | center | 元素位于容器的中心。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit5.html#center) | | flex-start | 元素位于容器的開頭。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit5.html#flex-start) | | flex-end | 元素位于容器的結尾。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit5.html#flex-end) | | baseline | 元素位于容器的基線上。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit5.html#baseline) | | initial | 設置該屬性為它的默認值。請參閱[*initial*](https://www.w3cschool.cn/cssref/css-initial.html)。 | [測試 ?](https://www.w3cschool.cn/statics/demosource/Playit/Playit5.html#initial) | | inherit | 從父元素繼承該屬性。請參閱[*inherit*](https://www.w3cschool.cn/cssref/css-inherit.html)。 | ? |