CSS flex 屬性
提示：更多“自己嘗試”的示例在下方。
定義和用法
flex 屬性是以下屬性的簡寫：
flex 屬性設定彈性專案上的彈性長度。
注意：如果元素不是彈性專案，則 flex 屬性無效。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| flex | 29 | 11 | 28 | 9 | 17 |
CSS 語法
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| flex-grow | 一個數字，指定專案相對於其他彈性專案將增長多少 | 演示 ❯ |
| flex-shrink | 一個數字，指定專案相對於其他彈性專案將收縮多少 | |
| flex-basis | 專案長度。合法值：“auto”、“inherit”，或後跟“%”、“px”、“em”或其他任何長度單位的數字 | 演示 ❯ |
| auto | 與 1 1 auto 相同。 | |
| initial | 與 0 1 auto 相同。 閱讀關於initial | |
| none | 與 0 0 auto 相同。 | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
使用 flex 結合媒體查詢為不同螢幕尺寸/裝置建立不同的佈局
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* 響應式佈局 - 使其成為單列布局（100%）而不是兩列布局（50%） */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 彈性盒子
CSS 參考：flex-basis 屬性
CSS 參考：flex-direction 屬性
CSS 參考：flex-flow 屬性
CSS 參考：flex-grow 屬性
CSS 參考：flex-shrink 屬性
CSS 參考：flex-wrap 屬性
HTML DOM 參考： flex 屬性
