CSS入門-Day7：佈局（二）
閱讀時間約 8 分鐘
彈性盒模型（Flexbox）
Flexbox 是一種用來設計一維佈局的 CSS 模型。它可以讓我們輕鬆地排列、對齊和分配空間給容器中的項目，即使它們的大小是未知或動態的。
Flex 容器與項目
- Flex 容器：設置
display: flex或display: inline-flex的元素稱為 Flex 容器。 - Flex 項目：Flex 容器的子元素自動成為 Flex 項目。
.container {
display: flex;
}
Flex 容器屬性
flex-direction
設置主軸（主軸方向）的方向。可以是 row（默認）、row-reverse、column 或 column-reverse。
.container {
flex-direction: row;
}
justify-content
沿主軸對齊 Flex 項目。可以是 flex-start、flex-end、center、space-between 或 space-around。
.container {
justify-content: center;
}
align-items
沿交叉軸對齊 Flex 項目。可以是 flex-start、flex-end、center、baseline 或 stretch（默認）。
.container {
align-items: center;
}
flex-wrap
設置 Flex 項目是否換行。可以是 nowrap（默認）、wrap 或 wrap-reverse。
.container {
flex-wrap: wrap;
}
align-content
沿交叉軸對齊多行 Flex 項目。可以是 flex-start、flex-end、center、space-between、space-around 或 stretch（默認）。僅在 Flex 容器內有多行時有效。
.container {
align-content: center;
}
Flex 項目屬性
order
設置 Flex 項目的排列順序，默認值為 0。數值越小，排列越靠前。
.item {
order: 1;
}
flex-grow
設置 Flex 項目的擴展比例，默認值為 0。數值越大，項目擴展越多。
.item {
flex-grow: 1;
}
flex-shrink
設置 Flex 項目的收縮比例，默認值為 1。數值越大，項目收縮越多。
.item {
flex-shrink: 1;
}
flex-basis
設置 Flex 項目的基礎大小，可以是長度值（如 px、%）或 auto（默認）。
.item {
flex-basis: 100px;
}
align-self
設置單個 Flex 項目在交叉軸上的對齊方式，覆蓋 align-items 設置。可以是 auto（默認）、flex-start、flex-end、center、baseline 或 stretch。
.item {
align-self: center;
}
彈性盒模型實踐
我們將通過一個示例來實踐 Flexbox 的基本用法。
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 實踐示例</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 200px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Flexbox 排版案例
下面是一個更複雜的 Flexbox 排版案例，展示了多行 Flex 項目、不同的對齊方式和項目屬性。
案例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 排版案例</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-around;
height: 400px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 10px;
text-align: center;
line-height: 100px;
}
.item:nth-child(odd) {
background-color: lightseagreen;
}
.item-grow {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item item-grow">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item item-grow">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
這個案例展示了一個 Flex 容器，包含多個 Flex 項目，其中一些項目使用了 flex-grow 屬性來擴展佔用可用空間。通過這個實踐，你應該能夠更加靈活地使用 Flexbox 來創建各種佈局。
留言0
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
在這篇教學中，我們會介紹Renpy框框 (Box)的各種造型特性，包括水平框 (hbox)、垂直框 (vbox) 和固定框 (fixed)，以及常見特性如spacing、box_reverse和box_wrap。透過這份教學，您將能更瞭解Renpy框框的運作原理和應用，進一步提升Renpy的應用能力
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這個系列的教學會列出基本上所有常見的造型和一些基礎 ， 讓各位可以自行搭配造型～在這個第四篇呢 ， 我們會來一起了解:常見的窗口 / 框架造型定義他們的意思加了之後有什麼效果那就讓我們開始吧！
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
在這篇教學中，我們會介紹Renpy框框 (Box)的各種造型特性，包括水平框 (hbox)、垂直框 (vbox) 和固定框 (fixed)，以及常見特性如spacing、box_reverse和box_wrap。透過這份教學，您將能更瞭解Renpy框框的運作原理和應用，進一步提升Renpy的應用能力
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這個系列的教學會列出基本上所有常見的造型和一些基礎 ， 讓各位可以自行搭配造型～在這個第四篇呢 ， 我們會來一起了解:常見的窗口 / 框架造型定義他們的意思加了之後有什麼效果那就讓我們開始吧！
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。