&

零基礎網頁開發11（Flexbox彈性盒子）

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2025年7月19日 18:39 本文熱度 312

本期我們將學習排版語法。其實我們之前已經接觸過排版語法了，比如position語法；此次我們要學的是更新、更簡單靈活的排版語法---Flexbox（彈性盒子）

?? 一、Flexbox語法

Flexbox是一種一維布局模型，用于在容器內高效分配空間、對齊項目，尤其適合響應式設計。

它的使用方式，是在HTML的父元素中，寫入display:flex;的語法

CSS示意代碼（父元素）

.container {  display: flex | inline-flex;          /* 啟用彈性容器 */  flex-direction: row | column;         /* 主軸方向：水平/垂直 */  flex-wrap: nowrap | wrap;             /* 是否換行 */  justify-content: flex-start | center | space-between; /* 主軸對齊 */  align-items: flex-start | center | stretch; /* 交叉軸對齊 */  align-content: center | space-around; /* 多軸線對齊 */}

寫入了display:flex;的語法，就可以讓子元素產生各種排列的方式：

水平置中

伸展至父元素兩側

均分子元素以外的空隙

垂直居中

示例：水平居中布局

.container {  display: flex;  justify-content: center; /* 主軸居中 */  align-items: center;     /* 交叉軸居中 */}

?? 二、Flex-direction

flex-direction 是 CSS Flexbox 布局中的核心屬性，用于定義彈性容器的主軸方向，控制內部項目的排列方式。

這樣講，你可能還會有點迷糊，我一開始也是這樣。接下來幾張圖，會讓你明明白白這個direction到底是干嘛地。

當你寫入display:flex，會發現里面的子元素突然成橫向排列

如果要維持原本的縱向堆疊，這就輪到我們的flex-direction登場了。只需在CSS中指明flex的方向為column（欄）

此時各項子元素是縱向堆疊了，可是堆在邊邊角角也太不美觀了。別擔心別擔心，水平對齊align-items來救急！

嗯，不錯這下順眼多了，但水平都居中對齊了，垂直⊥能不能也整個居中對齊？有的有的，垂直對齊為justify-content：

flex-direction 的取值及效果

屬性值	主軸方向	排列順序	適用場景
row（默認值）	水平方向	從左到右 →	導航欄、水平菜單、按鈕組
row-reverse	水平方向	從右到左 ←	RTL 語言布局、倒序顯示
column	垂直方向	從上到下 ↓	豎向菜單、側邊欄、垂直列表
column-reverse	垂直方向	從下到上 ↑	倒序內容（如聊天記錄從底部開始）

示例代碼：

.container {  display: flex;  flex-direction: row; /* 水平排列（默認） */}.reverse-container {  flex-direction: row-reverse; /* 水平反向排列 */}.vertical-container {  flex-direction: column; /* 垂直排列 */}

三、總結

好啦，這期內容就到這里啦。本期我們主要講解了Flexbox（彈性盒子）布局模型，它與Position（定位）是CSS中兩種核心布局機制，分別適用于不同場景。

閱讀原文：原文鏈接

該文章在 2025/7/21 10:50:43 編輯過

關鍵字查詢

網頁

開發

基礎

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。