CSS justify-content 屬性
更多“自己嘗試”的例子見下文。
定義和用法
當 flex 項不使用主軸(水平方向)上的所有可用空間時,justify-content
屬性會對其進行對齊。
提示:使用 align-items
屬性垂直對齊專案。
注意:justify-content
屬性也可以在 grid 容器上使用,以在行內方向上對齊 grid 項。對於英文頁面,行內方向是從左到右,塊方向是向下。
預設值 | flex-start |
---|---|
繼承 | no |
可動畫 | 否。 閱讀關於可動畫屬性 |
版本 | CSS3 |
JavaScript 語法 | object.style.justifyContent="space-between" 立即嘗試 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
justify-content | 29 | 11 | 28 | 9 | 17 |
CSS 語法
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
屬性值
值 | 描述 | 試一試 |
---|---|---|
flex-start | 預設值。專案位於容器的開頭 | 演示 ❯ |
flex-end | 項位於容器的末尾位置 | 演示 ❯ |
center | 專案位於容器的中心 | 演示 ❯ |
space-between | 專案之間會有間隔 | 演示 ❯ |
space-around | 專案在其之間、之前和之後都會有間隔 | 演示 ❯ |
space-evenly | 專案之間會有均勻的間隔 | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
相關頁面
CSS 教程:CSS Flexbox
CSS 教程: CSS Grid
CSS 參考:align-content 屬性
CSS 參考: align-items 屬性
CSS 參考:align-self 屬性
HTML DOM 參考:justifyContent 屬性