CSS Flex 響應式
響應式 Flexbox
您已從 CSS 媒體查詢章節瞭解到，可以使用媒體查詢為不同螢幕尺寸和裝置建立不同的佈局。
筆記型電腦和桌上型電腦
1
2
3
手機和平板電腦
1
2
3
例如，如果您想為大多數螢幕尺寸建立兩欄佈局，為小螢幕尺寸（如手機和平板電腦）建立一欄佈局，您可以在特定斷點（下面的示例中為 800px）處將 flex-direction 從 row 更改為 column。
示例
.flex-container {
display: flex;
flex-direction: row;
}
/* 響應式佈局 - 建立一欄佈局而不是兩欄佈局 */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
另一種方法是更改 flex 項 flex 屬性的百分比，以建立不同螢幕尺寸的不同佈局。請注意，對於此示例，我們還必須在 flex 容器上包含 flex-wrap: wrap;。
示例
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* 響應式佈局 - 建立一欄佈局而不是兩欄佈局 */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
使用 Flexbox 的響應式圖片庫
使用 flexbox 建立一個響應式圖片庫，根據螢幕尺寸在四張、兩張或全寬圖片之間變化。
自己動手試一試 »使用 Flexbox 的響應式網站
使用 flexbox 建立一個響應式網站，其中包含一個靈活的導航欄和靈活的內容。
自己動手試一試 »
