flex講解

隨著前端技術的不斷發展和更新，flex布局成為前端布局的主流。但是仍然有很多前端新手搞不懂flex到底怎么用！！！今天我們就來好好講講flex布局

老規矩先上定義

什么是flex布局

布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。

Flex 是 Flexible Box 的縮寫，意為"彈性布局",Flex是CSS3新增的一種布局方式，它可以讓容器的子元素在任何設備上都能夠以相同的方式排列、對齊和分配空間，從而實現響應式布局。用來為盒狀模型提供最大的靈活性。指定容器 display: flex 即可。 簡單的分為容器屬性和元素屬性。

flex布局的優點

  • 靈活性強：Flex布局可以根據不同的場景進行靈活的排列和對齊，如垂直居中、水平分布、兩端對齊、固定寬度等。
  • 布局自適應：Flex布局可以根據容器大小和子元素數量自適應布局，無需手動調整樣式，減少代碼復雜度。
  • 兼容性好:Flex布局可以實現響應式布局，使得頁面在不同設備上都可以以一致的方式進行排列和布局。
  • 可讀性好：Flex布局的代碼結構清晰，易于閱讀和維護，使得開發效率得到提高。
  • 與傳統布局兼容：Flex布局可以與傳統的布局方式相結合，形成更加靈活的布局方案。
  • 簡單易學：Flex布局的概念和屬性相對簡單，易于掌握和理解，即使是初學者也可以快速上手。

flex前置概念

容器（Flex Container）

容器是一個包含Flex子元素的父元素，通過設置display屬性為flex或inline-flex，可以將其定義為一個Flex容器。容器內的子元素將按照Flex布局的規則進行排列和布局。

軸（Axis）

Flex布局主要涉及兩個軸，即主軸和交叉軸。主軸是Flex容器的主要方向，子元素會沿著這個方向排列；交叉軸則與主軸垂直。

子元素（Flex Item）

子元素是Flex容器中的直接子元素，它們根據容器的排列方式進行排列和布局。

主軸對齊方式（Main Axis Alignment）

主軸對齊方式指的是子元素沿著主軸方向的對齊方式，常見的主軸對齊方式有：flex-start（起點對齊）、flex-end（終點對齊）、center（居中對齊）、space-between（兩端對齊，子元素之間平均分配空間）、space-around（子元素兩側都留有空白，子元素之間也平均分配空間）等。

交叉軸對齊方式（Cross Axis Alignment）

交叉軸對齊方式指的是子元素沿著交叉軸方向的對齊方式，常見的交叉軸對齊方式有：stretch（拉伸對齊，子元素在交叉軸方向上拉伸到與容器相同的高度或寬度）、flex-start（起點對齊）、flex-end（終點對齊）、center（居中對齊）等。

flex屬性

flex屬性是Flex布局中的一個關鍵屬性，用于設置子元素的伸縮性和空間占用比例。它包含了三個子屬性：flex-grow（指定子元素在剩余空間中的占比）、flex-shrink（指定子元素在空間不足時的縮放比例）、flex-basis（指定子元素的基準大小）。flex屬性可以同時設置這三個子屬性的值，也可以只設置其中的一個或兩個。

image.png

在 flex 容器中默認存在兩條軸，水平主軸(main axis) 和垂直的交叉軸(cross axis)，這是默認的設置，當然你也可以通過修改使垂直方向變為主軸，水平方向變為交叉軸，主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end。交叉軸的開始位置叫做cross start，結束位置叫做cross end。
在容器中的每個單元塊被稱之為 flex item，項目默認沿主軸排列，每個項目占據的主軸空間為 (main size), 占據的交叉軸的空間為 (cross size)。

注意：
這里需要強調，不能先入為主認為寬度就是 main size，高度就是 cross size，這個還要取決于你主軸的方向，如果你垂直方向是主軸，那么項目的高度就是 main size。

首先，實現 flex 布局需要先指定一個容器，任何一個容器都可以被指定為 flex 布局，這樣容器內部的元素就可以使用 flex 來進行布局。

.div {display: flex | inline-flex;       //可以有兩種寫法
}

如果你使用塊元素如 div，你就可以使用 flex，而如果你使用行內元素，你可以使用 inline-flex。

需要注意的是：當時設置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會失效

flex的屬性

flex-direction：

決定主軸的方向（即我們設置了disp:flex后div的子 item 元素的排列方法）

.div {flex-direction: row(默認) | row-reverse | column | column-reverse;
}
  • row（默認值）：主軸為水平方向，起點在左端。
  • row-reverse：主軸為水平方向，起點在右端。
  • column：主軸為垂直方向，起點在上沿。
  • column-reverse：主軸為垂直方向，起點在下沿。

image.png

flex-wrap

默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

.div {flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默認）：不換行

image.png

wrap：換行，第一行在上方。

image.png

wrap-reverse：換行，第一行在下方

image.png

flex-flow

flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

.div {flex-flow: <flex-direction> <flex-wrap>;
}

justify-content

水平主軸對齊方式

.div {justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start（默認值）：左對齊
  • flex-end：右對齊
  • center： 居中
  • space-between：兩端對齊，項目之間的間隔都相等。
  • space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

image.png

align-items

定義豎直軸線方向的對齊方式

.div {align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start 從上到下。
  • flex-end：從下到上。
  • center：垂直居中。
  • baseline: 項目的第一行文字的基線對齊。
  • stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

image.png

align-content

屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

.div {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：從上到下。
  • flex-end：從下到上。
  • center：垂直居中。
  • space-between：兩端對齊，軸線之間的間隔平均分布。
  • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch（默認值）：軸線占滿整個交叉軸。

image.png

order

屬性定義項目的排列順序，根據order的值來排序，順序越小，排列越靠前，默認為 0

.item {order: <integer（整數）>;
}

image.png

flex-grow

屬性定義項目的放大比例，默認為0 ，即使存在空間，也不會放大

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

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
image.png

flex-shrink

屬性定義了項目的縮小比例，當空間不足的情況下會等比例的縮小，如果 定義個 item 的 flow-shrink 為 0，則為不縮小

.item {flex-shrink: <number>; /* default 1 */
}

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小
注意: 負值對該屬性無效。
image.png

flex-basis

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小

它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間

.item {flex-basis: <length> | auto; /* default auto */
}

flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

寫法一：

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

寫法二：


/* 當我們只填寫一個值時，無單位數字，會默認為flex-grow屬性值 */
flex: 2;/* 當我們只填寫一個值， 帶單位數字，會默認為flex-basis屬性值 */
flex: 10em;
flex: 30px;
flex: min-content;/* 當我們填寫兩個值時第一個不帶單位數字第二個帶單位數字：會默認為flex-grow | flex-basis屬性值 */
flex: 1 30px;/* 當我們填寫兩個值時第一個帶單位數字第二個不帶單位數字：會默認為flex-grow | flex-shrink屬性值 */
flex: 2 2;/* 當我們填寫三個值時：會默認為flex-grow | flex-shrink | flex-basis 屬性值*/
flex: 2 2 10%;/*全局屬性值 */
flex: inherit;
flex: initial;
flex: unset;

align-self

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

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

image.png

align-items

默認屬 性為 auto，表示繼承父元素的 align-items 比如說，用 flex 實現圣杯布局

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

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

相關文章

鄭州高校大學智能制造實驗室數字孿生可視化系統平臺建設項目驗收

鄭州高校大學智能制造實驗室數字孿生可視化系統平臺建設項目驗收

隨著制造業的轉型升級&#xff0c;智能化、信息化已成為制造業發展的必然趨勢。數字孿生技術作為智能制造領域的關鍵技術之一&#xff0c;它通過構建與實體系統相對應的虛擬模型&#xff0c;實現對實體系統的實時監測、預測和優化&#xff0c;為制造業的智能化、信息化提供了強…
閱讀更多...
LitelDE安裝---附帶每一步截圖以及測試

LitelDE安裝---附帶每一步截圖以及測試

LiteIDE LiteIDE 是一款專為Go語言開發而設計的開源、跨平臺、輕量級集成開發環境&#xff08;IDE&#xff09;&#xff0c;基于 Qt 開發&#xff08;一個跨平臺的 C 框架&#xff09;&#xff0c;支持 Windows、Linux 和 Mac OS X 平臺。LiteIDE 的第一個版本發布于 2011 年 …
閱讀更多...
PTA-線性表實驗（JAVA）

PTA-線性表實驗（JAVA）

題目1&#xff1a;Josephus環的問題及算法 【實驗內容】 編程實現如下功能&#xff1a; 題意說明&#xff1a;古代某法官要判決n個犯人的死刑&#xff0c;他有一條荒唐的法律&#xff0c;將犯人站成一個圓圈&#xff0c;從第start個犯人開始數起&#xff0c;每數到第distance的…
閱讀更多...
【Spring Boot AOP通知順序】

【Spring Boot AOP通知順序】

文章目錄 一、Spring Boot AOP簡介二、通知順序1. 通知類型及其順序示例代碼 2. 控制通知順序示例代碼 一、Spring Boot AOP簡介 AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面編程&#xff09;是對OOP&#xff08;Object-Oriented Programming&#xff0c…
閱讀更多...
使用Dockerfile構建鏡像 使用docker-compose 一鍵部署IM項目

使用Dockerfile構建鏡像 使用docker-compose 一鍵部署IM項目

本文講解&#xff1a;使用Dockerfile構建鏡像 & 使用docker-compose 一鍵部署IM項目。 im項目地址&#xff1a;xzll-im &#xff0c;歡迎志同道合的開發者 一起 維護&#xff0c;學習&#xff0c;歡迎star &#x1f604; 1、Dockerfile編寫與鏡像構建&容器運行 Dockerf…
閱讀更多...
Spring Boot中使用Thymeleaf進行頁面渲染

Spring Boot中使用Thymeleaf進行頁面渲染

Spring Boot中使用Thymeleaf進行頁面渲染 大家好&#xff0c;我是免費搭建查券返利機器人省錢賺傭金就用微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01;今天我們將探討如何在Spring Boot應用中使用Thymeleaf模板引擎進行頁面…
閱讀更多...
Nginx和CDN運用

Nginx和CDN運用

一.Web緩存代理 1.工作機制 代替客戶機向網站請求數據&#xff0c;從而可以隱藏用戶的真實IP地址。將獲得的網頁數據&#xff08;靜態Web元素&#xff09;保存到緩存中并發送給客戶機&#xff0c;以便下次請求相同的數據時快速響應。 2.代理服務器的概念 代理服務器是一個位…
閱讀更多...
Kubernetes面試整理-如何監控Kubernetes集群的健康和性能？

Kubernetes面試整理-如何監控Kubernetes集群的健康和性能？

監控 Kubernetes 集群的健康和性能是確保集群穩定運行的重要任務。以下是一些常用的方法和工具來監控 Kubernetes 集群： 1. Prometheus 和 Grafana Prometheus 是一個開源的系統監控和報警工具，Grafana 是一個開源的分析和監控平臺。兩者通常一起使用來監控 Kubernetes 集群。…
閱讀更多...
k8s token加新節點

k8s token加新節點

在 master 節點執行 kubeadm token create --print-join-command得到token和cert&#xff0c;這兩個參數在2個小時內可以重復使用&#xff0c;超過以后就得再次生成 kubeadm join apiserver.k8s.com --token mpfjma.4vjjg8flqihor4vt --discovery-token-ca-cert-hash sha…
閱讀更多...
【入門】5分鐘了解卷積神經網絡CNN是什么

【入門】5分鐘了解卷積神經網絡CNN是什么

本文來自《老餅講解-BP神經網絡》https://www.bbbdata.com/ 目錄 一、卷積神經網絡的結構1.1.卷積與池化的作用2.2.全連接層的作用 二、卷積神經網絡的運算2.1.卷積層的運算2.2.池化的運算2.3.全連接層運算 三、pytorch實現一個CNN例子3.1.模型的搭建3.2.CNN完整訓練代碼 CNN神…
閱讀更多...
【Dison夏令營 Day 04】如何用 Python 編寫簡單的數字猜謎游戲代碼

【Dison夏令營 Day 04】如何用 Python 編寫簡單的數字猜謎游戲代碼

上個周末&#xff0c;我整理了一份可以用 Python 編寫的游戲列表。但為什么呢&#xff1f; 如果您是 Python 程序員初學者&#xff0c;編寫有趣的游戲可以幫助您更快更好地學習 Python 語言&#xff0c;而不會被語法之類的東西所困擾。我在學習 Python 的時候曾制作過一些這樣…
閱讀更多...
Hadoop-03-Hadoop集群 免密登錄 超詳細 3節點公網云 分發腳本 踩坑筆記 SSH免密 服務互通 集群搭建 開啟ROOT

Hadoop-03-Hadoop集群 免密登錄 超詳細 3節點公網云 分發腳本 踩坑筆記 SSH免密 服務互通 集群搭建 開啟ROOT

章節內容 上一節完成&#xff1a; HDFS集群XML的配置MapReduce集群XML的配置Yarn集群XML的配置統一權限DNS統一配置 背景介紹 這里是三臺公網云服務器&#xff0c;每臺 2C4G&#xff0c;搭建一個Hadoop的學習環境&#xff0c;供我學習。 之前已經在 VM 虛擬機上搭建過一次&…
閱讀更多...
短視頻矩陣系統搭建APP源碼開發

短視頻矩陣系統搭建APP源碼開發

前言 短視頻矩陣系統不僅有助于提升品牌影響力和營銷效率&#xff0c;還能幫助企業更精準地觸達目標受眾&#xff0c;增強用戶互動&#xff0c;并利用數據分析來持續優化營銷策略。 一、短視頻矩陣系統是什么&#xff1f; 短視頻矩陣系統是一種通過多個短視頻平臺進行內容創作…
閱讀更多...
Vue 3 實戰教程（快速入門）

Vue 3 實戰教程（快速入門）

Vue 3 實戰教程&#xff08;快速入門&#xff09; Vue.js 是一個用于構建用戶界面的漸進式框架&#xff0c;Vue 3 是 Vue 的最新版本&#xff0c;帶來了許多改進和新特性。本文將通過一個簡單的項目示例&#xff0c;帶你快速入門 Vue 3 的基礎使用。 環境設置 安裝 Node.js …
閱讀更多...
多多代播24小時值守：電商直播時代是帶貨爆單的關鍵

多多代播24小時值守：電商直播時代是帶貨爆單的關鍵

在電商直播盛行的今天&#xff0c;直播帶貨已成為品牌與消費者溝通的關鍵。然而&#xff0c;流量波動大&#xff0c;競爭激烈&#xff0c;使品牌面臨諸多挑戰。因此&#xff0c;許多品牌尋求專業代播服務&#xff0c;并特別強調24小時值守的重要性。 流量來源的不穩定性是一個顯…
閱讀更多...
《VUE.js 實戰》讀書筆記

《VUE.js 實戰》讀書筆記

1. 初識vue.js MVVM模式從MVC模式演化而來&#xff0c;但是MVVM模式更多應用在前端&#xff0c;MVC則是前后端共同表現。傳統開發模式&#xff1a;jQuery RequireJS ( SeaJS ) artTemplate ( doT ) Gulp ( Grunt)。vue.js可以直接通過script引入方式開發&#xff0c;也可以…
閱讀更多...
Linux下安裝RocketMQ：從零開始的消息中間件之旅

Linux下安裝RocketMQ：從零開始的消息中間件之旅

感謝您閱讀本文&#xff0c;歡迎“一鍵三連”。作者定會不負眾望&#xff0c;按時按量創作出更優質的內容。 ?? 1. 畢業設計專欄&#xff0c;畢業季咱們不慌&#xff0c;上千款畢業設計等你來選。 RocketMQ是一款分布式消息中間件&#xff0c;具有高吞吐量、低延遲、高可用性…
閱讀更多...
本末倒置！做660+880一定要避免出現這3種情況！

本末倒置！做660+880一定要避免出現這3種情況！

每年都有不少人做過660題&#xff0c;但是做過之后&#xff0c;并沒有真正理解其中的題目&#xff0c;所以做過之后效果也不好&#xff01;再去做880題&#xff0c;做的也會比較吃力。 那該怎么辦呢&#xff0c;不建議你繼續做880題&#xff0c;先把660給吃透再說。 接下來給…
閱讀更多...
PostgreSQL使用教程

PostgreSQL使用教程

安裝 PostgreSQL 您可以從 PostgreSQL 官方網站下載適合您操作系統的安裝程序&#xff0c;并按照安裝向導進行安裝。 啟動數據庫服務器 安裝完成后&#xff0c;根據您的操作系統&#xff0c;通過相應的方式啟動數據庫服務器。 連接到數據庫 可以使用命令行工具&#xff08;如 p…
閱讀更多...
Objective-C使用塊枚舉的細節

Objective-C使用塊枚舉的細節

對元素類型的要求 在 Objective-C 中&#xff0c;NSArray 只能存儲對象類型&#xff0c;而不能直接存儲基本類型&#xff08;例如 int&#xff09;。但是&#xff0c;可以將基本類型封裝在 NSNumber 等對象中&#xff0c;然后將這些對象存儲在 NSArray 中。這樣&#xff0c;en…
閱讀更多...
最新文章

Copyright @ 2022~2023