拆解鬆餅
bookmark_borderbookmark
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
行銷網站常見的版面配置就是這類布局,可能會有一排三個項目,通常包含圖片、標題和一些文字,說明產品的部分功能。在較小的螢幕上,您會希望這些元素能整齊地堆疊,並隨著螢幕尺寸的增加而展開。
使用 flexbox 實現此效果後,您就不必在螢幕大小改變時使用媒體查詢調整這些元素的位置。
flex 快速鍵代表:flex: <flex-grow> <flex-shrink> <flex-basis>
。
flex-grow
伸展
如果您希望方塊在換行時延伸並填滿空白空間,請將 <flex-grow>
的值設為 1,例如:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
如今,當您增加或縮小螢幕大小時,這些 Flex 項目都會縮小和放大。
不拉伸
如果您希望方塊填滿 <flex-basis>
大小、縮小至較小的尺寸,但不會延伸填滿任何額外的空間,請輸入 flex: 0 1 <flex-basis>
。在這種情況下,<flex-basis>
為 150 像素:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-12-21 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-12-21 (世界標準時間)。"],[],[]]