【CSS】精通Flex布局（全）

目錄

1. flex布局體驗

1.1 傳統布局 與 flex布局

1.2 初體驗

2. flex布局原理

2.1 布局原理

3. flex布局父項常見屬性

3.1 常見父項屬性

3.2??屬性值

3.3 justify-content 設置主軸上的子元素排列方式

3.4 flex-wrap設置子元素是否換行

3.5 align-items 設置側軸上的子元素排列方式（單行）

3.6 align-content 設置側軸上的子元素的排列方式(多行)

3.6 align-content 和 align-items 區別

4. flex布局子項常見屬性

4.1 flex屬性

4.2 align-self 控制子項自己在側軸上的排列方式

總結不易！ 本章節對我有很大的收獲， 希望對你也是！！！！

1. flex布局體驗

1.1 傳統布局 與 flex布局

  • 傳統布局：兼容性好、布局繁瑣、局限性，不能再移動端很好的布局
  • flex彈性布局： 操作方便， 布局極為簡單， 移動端應用很廣泛， PC端瀏覽器支持情況較差，IE11或更低版本，不支持或僅部分支持

1.2 初體驗

1. 搭建HTML結構

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 可以讓span具有大小 變成行內塊元素 */display: flex;width: 80%;height: 300px;background-color: pink;/* 將一行的行內塊元素都按等距進行擺放  能自適應頁面大小*/justify-content: space-around;}div span {width: 150px;height: 100px;background-color: skyblue;margin-right: 5px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

2. flex布局原理

2.1 布局原理

flex是flexible Box的縮寫， 意為“彈性布局”， 用來為盒狀模型提供最大的靈活性， 任何一個容器都可以指定為flex布局。

  • 當我們為父盒子設為flex布局以后， 子元素的float、clear 和 vertical-align屬性將失效。
  • 伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex布局

采用Flex布局的元素， 稱為Flex容器(flex container)， 簡稱“容器”。它的所有子元素自動成為容器成員， 稱為Flex項目（flex item）， 簡稱“項目”。

  • 體驗中div就是flex父容器
  • 體驗中span就是子容器flex項目
  • 子容器可以橫向排列也可以縱向排列

總結flex布局原理：就是通過給父盒子添加flex屬性， 來控制子盒子的位置和排列方式

3. flex布局父項常見屬性

3.1 常見父項屬性

  • flex-direction: 設置主軸的方向
  • justify-content： 設置主軸上的子元素排列方式
  • flex-wrap： 設置子元素是否換行
  • align-content: 設置側軸上的子元素的排列方式（多行）
  • align-items： 設置側軸上的子元素排列方式（單行）
  • flex-flow： 復合屬性， 相當于同時設置了flex-direction 和 flex-wrap

1. 主軸與側軸

再flex布局中， 是分為主軸 和 側軸兩個方向， 同樣的叫法有： 行和列、x軸和y軸

  • 默認主軸方向就是x軸方向， 水平向右
  • 默認側軸方向就是y軸方向， 水平向下

3.2??屬性值

flex-direction屬性決定主軸的方向（即項目的排列方向）

注意： 主軸和側軸是會發生變化的，就看flex-direction設置誰為主軸， 剩下的就是側軸。 而我們的子元素是跟著主軸來排列的。

屬性值說明
row默認值從左到右
row-reverse從右到左
column從上到下
column-reverse從下到上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 給父級添加flex屬性 默認是沿著x軸 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默認是沿著x軸 row 那么y軸就是側軸嘍 *//* 我們元素是跟著主軸排列的 *//* flex-direction: row; *//* 橫向 翻轉 *//* flex-direction: row-reverse; *//* 我們可以把主軸設置為y軸 那么x軸就形成了側軸 */flex-direction: column;}div span {width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

3.3 justify-content 設置主軸上的子元素排列方式

justify-content 屬性定義了項目再主軸上的對齊方式

注意： 使用這個屬性之前一定要確定好主軸是哪個

屬性值說明
flex-start默認值從頭部開始 如果主軸是x軸， 則從左到右
flex-end

從尾部開始排列

center再主軸居中對齊（如果主軸是x軸 水平居中）
space-around平分剩余的空間
space-between先兩邊貼邊 再平分剩余空間（重要）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 給父級添加flex屬性 默認是沿著x軸 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默認的主軸是x軸 row */flex-direction: row;/* justify-content: 是設置主軸上子元素的排列方式; *//* justify-content: flex-start; *//* justify-content: flex-end; *//* 讓我們子元素居中對齊 *//* justify-content: center; *//* 平分剩余空間 *//* justify-content: space-around; *//* 先兩邊貼邊 再平分剩余空間 */justify-content: space-between;}div span {width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

當我把主軸改為y軸時， flex布局仍然時同樣的效果！

2. 普通布局中 當4個span盒子寬度大于div盒子寬度的時候 其中span盒子就會掉下來！

再flex布局中 就不會存在這種情況：原本span寬度是200的 卻被修改到了150 然后剛好能夠在這一行內沾滿！

3.4 flex-wrap設置子元素是否換行

默認情況下， 項目都排在一條線（又稱“軸線”）上。 flex-wrap屬性定義， flex布局中默認是不換行的。

屬性值說明
nowrap默認值 不換行
wrap換行

3.5 align-items 設置側軸上的子元素排列方式（單行）

該屬性是控制子項在側軸(默認是y軸)上的排列方式 在子項為單項的時候使用

屬性值說明
flex-start默認值 從上到下
flex-end從下到上
center擠在一起居中（垂直居中）
stretch拉伸

要求：想讓三個盒子同時水平居中并且垂直居中！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 給父級添加flex屬性 默認是沿著x軸 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默認主軸是x軸 row */justify-content: center;/* 沿主軸來對齊 *//* 我們需要一個側軸居中 */align-items: center;}div span {/* display: inline-block; */width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

同理： 如果要三個盒子豎著水平居中 并且 垂直居中

只需要把三個橫向的盒子扭過來就ok！

? flex-direction: column; // 修改盒子的主軸為y軸

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 給父級添加flex屬性 默認是沿著x軸 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 默認主軸是x軸 row */flex-direction: column;justify-content: center;/* 沿主軸來對齊 *//* 我們需要一個側軸居中 */align-items: center;/* 沿著側軸頂部 *//* align-items: flex-start; *//* 拉伸 子盒子不能有高度 *//* align-items: stretch; */}div span {/* display: inline-block; */width: 150px;height: 100px;background-color: skyblue;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

拉伸：子盒子拉伸高度跟父盒子一樣?

子盒子不能給高度！

      /* 拉伸 子盒子不能有高度 */align-items: stretch;

3.6 align-content 設置側軸上的子元素的排列方式(多行)

設置子項在側軸上的排列方式并且只能用于子項出現換行的情況(多行)，在單行下是沒有效果的。

屬性值說明
flex-start默認值在側軸的頭部開始排列
flex-end在側軸的尾部開始排列
center在側軸中間顯示
space-around子項在側軸平分剩余空間
space-between子項在側軸先分布在兩頭，再平分剩余空間
stretch設置子項元素高度平分父元素高度

多行！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 給父級添加flex屬性 默認是沿著x軸 row*/display: flex;width: 800px;height: 300px;background-color: pink;/* 換行 */flex-wrap: wrap;/* 多行 *//* 因為有了換行 此時我們側軸上控制子元素的對齊方式 我們用 align-content *//* align-content: flex-start; *//* align-content: center; *//* align-content: space-between; */align-content: space-around;}div span {width: 150px;height: 100px;background-color: skyblue;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
</body></html>




3.6 align-content 和 align-items 區別

  • align-items 適用于單行情況下，只有上對齊、下對齊、居中和拉伸
  • align-content適應于換行(多行)的情況下(單行情況下無效)，可以設置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
  • 總結就是單行找 align-items 多行找 align-content


?

3.7 flex-flow 是 flex-dirction 和 flex-wrap屬性的復合屬性 合寫

? ? ? /* 設置主軸為列 換列 */

? ? ? /* flex-direction: column;

? ? ? flex-wrap: wrap; */

? ? ? /* flex-flow 是 flex-dirction 和 flex-wrap屬性的復合屬性 合寫 */

? ? ? flex-flow: column wrap;

  • flex-direction:設置主軸的方向
  • justify-content:設置生軸上的子元素排列方式
  • flex-wrap:設置子元素是否換行
  • align-content:設置側軸上的子元素的排列方式(多行)
  • align-items:設置側軸上的子元素排列方式(單行)
  • flex-flow:復合屬性，相當于同時設置了flex-direction和flex-wrap

4. flex布局子項常見屬性

4.1 flex屬性

flex屬性定義子項目分配剩余空間， 用flex來表示占多少份數

.item {flex: <number>; /* default 0 */
}

這就是淘寶界面有名的圣杯布局：左右兩側沾滿后 中間留下的剩余空間就是給div2 來進行占用的份數

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}section div:nth-child(1) {width: 100px;height: 150px;background-color: red;}section div:nth-child(2) {flex: 1;background-color: green;}section div:nth-child(3) {width: 100px;height: 150px;background-color: blue;}p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;}p span {/* 3個span 平均分成了3等分 */flex: 1;}p span:nth-child(2) {/* 2號占兩份 */flex: 2;background-color: skyblue;}</style>
</head><body><section><div></div><div></div><div></div></section><p><span>1</span><span>2</span><span>3</span></p>
</body></html>

4.2 align-self 控制子項自己在側軸上的排列方式

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。
默認值為 auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

每次都是所有盒子一起移動， 那么有沒有什么辦法能讓一個盒子單獨移動呢？？

    div {display: flex;width: 80%;height: 300px;background-color: pink;align-items: flex-end;}div span {width: 150px;height: 100px;background-color: skyblue;margin: 5px;}

有的兄弟有的！！！我們只想讓3號盒子移動下來

    div {display: flex;width: 80%;height: 300px;background-color: pink;/* align-items: flex-end; */}div span {width: 150px;height: 100px;background-color: skyblue;margin: 5px;}div span:nth-child(3) {align-self: flex-end;}

將2號盒子往前移動

? ? div span:nth-child(2) {

? ? ? order: -1;

? ? }

總結不易！ 本章節對我有很大的收獲， 希望對你也是！！！！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/81154.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/81154.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/81154.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

力扣第447場周賽

力扣第447場周賽

這次終于趕上力扣的周賽了, 賽時成績如下(依舊還是三題 )&#xff1a; 1. 統計被覆蓋的建筑 給你一個正整數 n&#xff0c;表示一個 n x n 的城市&#xff0c;同時給定一個二維數組 buildings&#xff0c;其中 buildings[i] [x, y] 表示位于坐標 [x, y] 的一個 唯一 建筑。 如…
閱讀更多...
AI中常用概念的理解

AI中常用概念的理解

1. RAG&#xff08;檢索增強生成&#xff09; 通俗理解&#xff1a;就像你寫作業時&#xff0c;先查課本 / 百度找資料&#xff0c;再根據資料寫答案&#xff0c;而不是純靠記憶瞎編。 AI 模型&#xff08;比如 ChatGPT&#xff09;回答問題時&#xff0c;先去 “數據庫 / 互聯…
閱讀更多...
SQLServer多版本兼容Java方案和數據采集

SQLServer多版本兼容Java方案和數據采集

Maven引入 <dependency><groupId>com.microsoft.sqlserver</groupId><artifactId>sqljdbc4</artifactId><version>4.0</version></dependency><dependency><groupId>net.sourceforge.jtds</groupId><ar…
閱讀更多...
【每日八股】復習 Redis Day4：線程模型

【每日八股】復習 Redis Day4：線程模型

文章目錄 復習 Redis Day4&#xff1a;線程模型介紹一下 Redis 的線程模型核心線程模型&#xff08;Redis 6.0 之前&#xff09;Redis 6.0 的多線程改進Redis 真的是單線程嗎&#xff1f;Redis 的線程模型剖析 上一篇 Redis 的應用我今天才完成&#xff0c;因此明天一并復習 Re…
閱讀更多...
樹莓派智能攝像頭實戰指南：基于TensorFlow Lite的端到端AI部署

樹莓派智能攝像頭實戰指南：基于TensorFlow Lite的端到端AI部署

引言&#xff1a;嵌入式AI的革新力量 在物聯網與人工智能深度融合的今天&#xff0c;樹莓派這一信用卡大小的計算機正在成為邊緣計算的核心載體。本文將手把手教你打造一款基于TensorFlow Lite的低功耗智能監控設備&#xff0c;通過MobileNetV2模型實現實時物體檢測&#xff0…
閱讀更多...
vs2019編譯occ7.9.0時，出現fatal error C1060: compiler is out of heap space

vs2019編譯occ7.9.0時，出現fatal error C1060: compiler is out of heap space

問題描述 visual studio 2019編譯opencascade 7.9.0時&#xff0c;出現編譯錯誤 fatal error C1060: compiler is out of heap space 解決方案 修改vs2019并行編譯的線程個數&#xff0c;默認是12個&#xff0c;我改成了4個&#xff0c;問題解決 Tools > Project and Sol…
閱讀更多...
vue跨域問題總結筆記

vue跨域問題總結筆記

目錄 一、Websocket跨域問題 1.nginx配置 2.VUE CLI代理 3.env.development配置 4.nginx日志 5.解決 一、解決跨域的幾種常用方法 1.Vue CLI代理 2.JSONP 3.WebSocket 4.NGINX解決跨域問題 6.Java解決跨域 二、Vue跨域問題詳解 1. 什么是跨域 2. 跨域的例子 3.…
閱讀更多...
數據結構篇：線性表的另一表達—鏈表之單鏈表(下篇)

數據結構篇：線性表的另一表達—鏈表之單鏈表(下篇)

目錄 1.前言 2.是否使用二級指針 3.插入/刪除 3.1 pos位置前/后插入 3.2 查找函數 3.3 pos位置刪除 3.4 pos位置后面刪除 3.5 函數的銷毀 4.斷言問題 4.1 斷言pphead 4.2 斷言*pphead 5.三個文件的代碼 5.1 頭文件 5.2 具體函數實現 5.3 測試用例 1.前言 之前是講…
閱讀更多...
完美解決react-native文件直傳阿里云oss問題一

完美解決react-native文件直傳阿里云oss問題一

前言 通常情況下&#xff0c;作為前后端分離的項目來說&#xff0c;文件上傳是最尋常的功能之一。雖然每個公司選擇的文件管理云庫各不相同&#xff0c;但實現思路基本一致。我所在公司使用阿里云oss文件管理&#xff0c;之前服務端做了透傳&#xff0c;但是由于每個測試環境的…
閱讀更多...
5.運輸層

5.運輸層

5. 運輸層 1. 概述 第2~4章依次介紹了計算機網絡體系結構中的物理層、數據鏈路層和網絡層&#xff0c;它們共同解決了將主機通過異構網絡互聯起來所面臨的問題&#xff0c;實現了主機到主機的通信然而在計算機網絡中實際進行通信的真正實體&#xff0c;是位于通信兩端主機中的…
閱讀更多...
告別手動時代！物聯網軟件開發讓萬物自動互聯

告別手動時代！物聯網軟件開發讓萬物自動互聯

清晨&#xff0c;智能窗簾隨著陽光自動拉開&#xff1b;運動時&#xff0c;手表精準記錄著健康數據&#xff1b;回到家&#xff0c;室溫早已調節至最舒適狀態...這些場景的實現&#xff0c;都離不開物聯網軟件開發的技術支撐。在智能家居軟件開發、智能穿戴軟件開發、醫療器械軟…
閱讀更多...
Fiori學習專題十二：Shell Control as Container

Fiori學習專題十二：Shell Control as Container

為了讓我們的app更加適應不同的設備&#xff0c;這節課我們引入shell控件作為根元素 1.修改App.view.xml&#xff0c;加入Shell控件 <mvc:ViewcontrollerName"ui5.walkthrough.controller.App"xmlns"sap.m"xmlns:mvc"sap.ui.core.mvc"displa…
閱讀更多...
AI 與高性能計算的深度融合：開啟科技新紀元

AI 與高性能計算的深度融合：開啟科技新紀元

在當今科技迅猛發展的時代&#xff0c;人工智能&#xff08;AI&#xff09;與高性能計算&#xff08;HPC&#xff09;正以前所未有的態勢深度融合&#xff0c;這種融合宛如一場強大的風暴&#xff0c;席卷并重塑著眾多領域的格局。從科學研究的突破到商業應用的革新&#xff0c…
閱讀更多...
「Unity3D」TextMeshPro使用TMP_InputField實現，輸入框高度自動擴展與收縮

「Unity3D」TextMeshPro使用TMP_InputField實現，輸入框高度自動擴展與收縮

先看實現效果&#xff1a; 要實現這個效果&#xff0c;有三個方面的問題需要解決&#xff1a; 第一&#xff0c;輸入框的高度擴展&#xff0c;內部子元素會隨著錨點&#xff0c;拉伸變形——要解決這個問題&#xff0c;需要將內部元素改變父類&#xff0c;然后增加父類高度&am…
閱讀更多...
多模態大語言模型arxiv論文略讀（四十七）

多模態大語言模型arxiv論文略讀（四十七）

AdaShield: Safeguarding Multimodal Large Language Models from Structure-based Attack via Adaptive Shield Prompting ?? 論文標題&#xff1a;AdaShield: Safeguarding Multimodal Large Language Models from Structure-based Attack via Adaptive Shield Prompting …
閱讀更多...
美的人形機器人即將投入實際應用

美的人形機器人即將投入實際應用

國內家電巨頭美的集團近日公布了其自主研發的人形機器人的具體落地計劃。根據公司披露的信息&#xff0c;這款機器人將于5月在湖北荊州的洗衣機工廠率先投入使用&#xff0c;承擔設備運維、質量檢測和物料搬運等工作任務。預計今年下半年&#xff0c;該機器人還將進入美的線下門…
閱讀更多...
從零開始搭建你的個人博客：使用 GitHub Pages 免費部署靜態網站

從零開始搭建你的個人博客：使用 GitHub Pages 免費部署靜態網站

&#x1f310; 從零開始搭建你的個人博客&#xff1a;使用 GitHub Pages 免費部署靜態網站 在互聯網時代&#xff0c;擁有一個屬于自己的網站不僅是一種展示方式&#xff0c;更是一種技術能力的體現。今天我們將一步步學習如何通過 GitHub Pages 搭建一個免費的個人博客或簡歷…
閱讀更多...
canvas動畫：點隨機運動 距離內自動連接成線 鼠標移動自動吸附附近的點

canvas動畫：點隨機運動 距離內自動連接成線 鼠標移動自動吸附附近的點

思路/實現步驟 創建canvas元素 獲取canvas的上下文ctx 初始化點的信息&#xff08;數量、初始坐標、移動方向、移動速度、大小、顏色&#xff09; 繪制點 繪制點之間的連線 點有規律的動起來 動畫循環 鼠標移動相關邏輯 點鼠標之間連線 鼠標吸附邏輯 添加配置項 重繪…
閱讀更多...
2025年4月AI科技領域周報（4.21-4.27）：大模型生態加速演進 通用AI開啟產業融合新范式

2025年4月AI科技領域周報（4.21-4.27）：大模型生態加速演進 通用AI開啟產業融合新范式

2025年4月AI科技領域周報&#xff08;4.21-4.27&#xff09;&#xff1a;大模型生態加速演進 通用AI開啟產業融合新范式 一、本周熱點回顧1. OpenAI發布全球首款通用AI芯片「GPT-NPU」 重塑AI算力架構2. 谷歌DeepMind發布醫療AI系統「Med-Pathfinder」 實現全科室智能診斷3. 微…
閱讀更多...
【Bash】可以請您解釋性地說明一下“2＞1”這個語法嗎？

【Bash】可以請您解釋性地說明一下“2＞1”這個語法嗎？

Qwen3-235B 當然可以&#xff01;我們一步步拆解 2>&1 的含義&#xff0c;用生活化的例子來理解它&#xff1a; &#x1f9e0; 前提知識&#xff1a;三個“水流通道” 在 Linux/Unix 系統中&#xff0c;程序運行時有三種默認的“水流通道”&#xff1a; 標準輸入&…
閱讀更多...
最新文章

Copyright @ 2022~2023