CSS Flexbox 佈局

来源:https://www.cnblogs.com/risejl/archive/2022/09/20/16709792.html
-Advertisement-
Play Games

⚠️1.1萬長文⚠️ React源碼並非洪水猛獸,知道方法,就可以很輕易地馴服它(=^▽^=)。文章基於最新的React源碼進行調試及閱讀,將以通俗地方式解讀React ...


CSS 彈性盒子 Flexbox 佈局

Flexbox(彈性盒子)是 CSS3 中引入的一種強大且相容性好的佈局方法。使用 flexbox,可以很容易地處理好頁面上的元素佈局,並創建可以自動縮小和放大的動態用戶界面。

flex 盒子模式

只要在一個元素的 CSS 中添加 display: flex;,就可以使用其它 flex 屬性來構建響應式頁面了。

#box-container {
 display: flex;
}

行,列 Row Culomn

給元素添加 display: flex 屬性可以讓它變成 flex 容器, 然後可以讓元素的項目排列成行或列。 只要給父元素添加 flex-direction 屬性,並把屬性值設置為 row 或 column,即可橫向排列或縱向排列它的所有子元素。 創建一行將使子項水平對齊,創建一列將使子項垂直對齊。

flex-direction 的其他可選值還有 row-reversecolumn-reverse

註意: flex-direction 的預設值為 row

#box-container {
 display: flex;
 flex-direction: row;
 /* flex-direction: column */
}

父元素對齊 Align

子元素排列的方向被稱為 main axis(主軸)。 對於行,主軸水平貫穿每一個項目; 對於列,主軸垂直貫穿每一個項目。

對於如何沿主軸線排放 flex 項目,有幾種選擇。 很常用的一種是 justify-content: center;:即 flex 子元素在 flex 容器中居中排列。 其他選擇包括:

  • flex-start:從 flex 容器的起始位置開始排列項目。 對行來說是把項目移至左邊, 對於列是把項目移至頂部。 如未設置 justify-content 的值,那麼這就是預設值。

  • flex-end:從 flex 容器的終止位置開始排列項目。 對行來說是把項目移至右邊, 對於列是把項目移至底部。

  • space-between:項目間保留一定間距地沿主軸居中排列。 第一個和最後一個項目被放置在容器邊沿。 例如,在行中第一個項目會緊貼著容器左邊,最後一個項目會緊貼著容器右邊,然後其他項目均勻排布。

  • space-around:與space-between相似,但頭尾兩個項目不會緊貼容器邊緣,所有項目之間的空間均勻排布。

  • space-evenly:頭尾兩個項目不會緊貼容器邊緣,所有項目之間的空間均勻排布。

#box-container {
 justify-content: center;
}

Flex 容器中,與主軸垂直的叫做 cross axis(交叉軸)。 行的交叉軸是垂直的,列的交叉軸是水平的。

CSS 中的 align-items 屬性用來定義 flex 子元素沿交叉軸的對齊方式。 對行來說,定義的是元素的上下對齊方式; 對列來說,是定義元素的左右對齊方式。

align-items 的可選值包括:

  • flex-start:從 flex 容器的起始位置開始對齊項目。 對行來說,把項目移至容器頂部; 對列來說,是把項目移至容器左邊。

  • flex-end:從 flex 容器的終止位置開始對齊項目。 對行來說,把項目移至容器底部; 對列來說,把項目移至容器右邊。

  • center:把項目居中放置。 對行來說,垂直居中(項目距離頂部和底部的距離相等); 對列來說,水平居中(項目距離左邊和右邊的距離相等)。

  • stretch:拉伸項目,填滿 flex 容器。 例如,排成行的項目從容器頂部拉伸到底部。 如未設置align-items的值,那麼這就是預設值。

  • baseline:沿基線對齊。 基線是文本相關的概念,可以認為它是字母排列的下端基準線。

#box-container {
 align-items: center;
}

換行 Wrap

CSS flexbox 有一個把 flex 子元素拆分為多行(或多列)的特性。

預設情況下,flex 容器會調整項目大小,把它們都塞到一起。 對於行來說,所有項目都會在一條直線上。

不過,使用 flex-wrap 屬性可以使項目換行展示。 這意味著多出來的子元素會被移到新的行或列。 換行發生的斷點由子元素和容器的大小決定。

換行方向的可選值有這些:

  • nowrap:預設值,不換行。

  • wrap:如果排列以行為基準,就將行從上往下排列;如果排列以列為基準,就將列從左往右排列。

  • wrap-reverse:如果排列以行為基準,就將行從下往上排列;如果排列以列為基準,就將列從右往左排列。

#box-container {
 flex-wrap: wrap;
}

收縮 Shrink

上面提到的屬性都是應用於 flex 容器(flex 子元素的父元素)的。 除此之外,flex 子元素也有很多實用屬性。

首先介紹的是 flex-shrink 屬性。 使用之後,如果 flex 容器太小,則子元素會自動縮小。 當容器的寬度小於裡面所有子元素的寬度之和時,所有子元素都會自動壓縮。

子元素的 flex-shrink 接受數值作為屬性值。 數值越大,則該元素與其他元素相比會被壓縮得更厲害。 比如,一個項目的 flex-shrink 屬性值為 1,另一個項目的 flex-shrink 屬性值為 3,那麼後者相比前者會受到 3 倍壓縮。

#box-1 {
 flex-shrink: 1;
}
#box-2 {
 flex-shrink: 2;
}

擴大 Grow

flex-shrink 相對的是 flex-growflex-grow會在容器太大時對子元素作出調整。

如果一個項目的 flex-grow 屬性值為 1,另一個項目的 flex-grow 屬性值為 3,那麼值為 3 的一個會較另一個擴大 3 倍。

#box-1 {
 flex-grow: 1;
}
#box-2 {
 flex-grow: 2;
}

初始大小 Basis

flex-basis 屬性定義了在使用 CSS 的 flex-shrinkflex-grow 屬性對元素進行調整前,元素的初始大小。

flex-basis 屬性的單位與其他表示尺寸的屬性的單位一致(pxem% 等)。 如果值為 auto,則項目的尺寸隨內容調整。

#box-1 {
 flex-basis: 10em;
}
#box-2 {
 flex-basis: 20em;
}

簡寫 Shorthand

上面幾個 flex 屬性有一個簡寫方式。 flex-growflex-shrinkflex-basis 屬性可以在 flex中一併設置。

例如,flex: 1 0 10px; 會把項目屬性設為 flex-grow: 1;flex-shrink: 0; 以及 flex-basis: 10px;

屬性的預設設置是 flex: 0 1 auto;

#box-1 {
flex: 2 2 150px;
}
#box-2 {
flex: 1 1 150px;
}

重新排列 Rearrange

order 屬性告訴 CSS flex 容器裡子元素的順序。 預設情況下,項目排列順序與源 HTML 文件中順序相同。 這個屬性接受數字作為參數,可以使用負數。

#box-1 {
order: 2;
}
#box-2 {
order: 1;
}

子元素對齊方式 Align

align-self。 這個屬性允許調整單個子元素自己的對齊方式,而不會影響到全部子元素。 因為 floatclearvertical-align 等調整對齊方式的屬性都不能應用於 flex 子元素,所以這個屬性顯得十分有用。

align-self 可設置的值與 align-items 的一樣,並且它會覆蓋 align-items 所設置的值。

#box-1 {
align-self: center;
}
#box-2 {
align-self: flex-end;
}
 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端技術的發展不斷融入了很多後端的思想,逐步形成前端的 ”四個現代化“:工程化、模塊化、規範化、流程化。這個主題介紹 *模塊化* ,主要內容包括模塊化前傳(早期模塊化的實現)、模塊化的四個規範(Common JS、AMD、CMD、ESM)。本文就聊聊早期的模塊化。 ...
  • 現在的很多程式應用,基本上都是需要多端覆蓋,因此基於一個Web API的後端介面,來構建多端應用,如微信、H5、APP、WInForm、BS的Web管理端等都是常見的應用。本篇隨筆繼續分析總結一下項目開發的經驗,針對頁面組件化開發經驗方面進行一些梳理總結,內容包括組件的概念介紹,簡單頁面組件的抽取開... ...
  • 每日3題 1 以下代碼執行後,控制臺中的輸出內容為? // index.js console.log(1); import { sum } from "./sum.js"; console.log(sum(1, 2)); //sum.js console.log(2); export const s ...
  • 導讀:面對多種多樣的跨端訴求,有哪些跨端方案?跨端的本質是什麼?作為業務技術開發者,應該怎麼做?本文分享阿裡巴巴ICBU技術部在跨端開發上的一些思考,介紹了當前主流的跨端方案,以及跨端開發的經驗心得。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 最近在研究一個基於TP6的框架CRMEB,這裡分享下我的開發心得 首先在上篇文章中,我們安裝了CRMEBphp介面項目,需要可以看這一篇 TP6框架--CRMEB學習筆記:項目初始化+環境配置 1.獲取項目 這裡是git地址 https: ...
  • 通過 antd 框架的 Upload 控制項,採用手動上傳的方式,先選擇需要上傳的文件(控制文件數量以及大小),再根據所選的文件列表,迴圈上傳,期間通過 Spin 控制項提示上傳中。 ...
  • 隨著前端的範疇逐漸擴大,深度逐漸下沉,富前端必然帶來的一個問題就是性能。特別是在大型複雜項目中,重前端業務可能因為一個小小的數據依賴,導致整個頁面卡頓甚至崩潰。本文基於Quick BI(數據可視化分析平臺)歷年架構變遷中性能的排查、解決和總結出的“個性”問題,嘗試總結整個前端層面相對“共性”的問題,... ...
  • 最近,有群友問我,他們的一個作業,儘量使用少的標簽去實現這樣一個象棋佈局: 他用了 60 多個標簽,而他的同學,只用了 6 個,問我有沒有辦法儘可能的做到利用更少的標簽去完成這個佈局效果。 其實,對於一個頁面的佈局而言,標簽越少不一定是好事,我們在考慮 DOM 的消耗的同時,也需要關註代碼的可讀性, ...
一周排行
    -Advertisement-
    Play Games
  • 在本篇教程中,我們學習瞭如何使用 Taurus.MVC WebMVC 框架創建一個簡單的頁面。 我們創建了一個控制器並編寫了一個用於呈現頁面的方法,然後創建了對應的視圖,並最終成功運行了應用程式。 在下一篇教程中,我們將繼續探索 Taurus.MVC WebMVC 框架的更多功能和用法。 ...
  • 一:背景 1. 講故事 很多.NET開發者在學習高級調試的時候,使用sos的命令輸出會發現這裡也看不懂那裡也看不懂,比如截圖中的這位朋友。 .NET高級調試屬於一個偏冷門的領域,國內可觀測的資料比較少,所以很多東西需要你自己去探究源代碼,然後用各種調試工具去驗證,相關源代碼如下: coreclr: ...
  • 我一直都以為c中除以2的n次方可以使用右移n位代替,然而在實際調試中發現並不都是這樣的。是在計算餘數是發現了異常 被除數:114325068 右移15計算結果:3488 除法取整計算結果:3489 右移操作計算餘數:33772 除法取整計算餘數:1005 顯然:這是不一樣的。 移位操作是一條cpu指 ...
  • 在上一篇文章中,我們介紹了ReentrantLock類的一些基本用法,今天我們重點來介紹一下ReentrantLock其它的常用方法,以便對ReentrantLock類的使用有更深入的理解。 ...
  • Excelize 是 Go 語言編寫的用於操作電子錶格辦公文檔的開源基礎庫,2024年2月26日,社區正式發佈了 2.8.1 版本,該版本包含了多項新增功能、錯誤修複和相容性提升優化。 ...
  • 雲採用框架(Cloud Adoption Framework,簡稱CAF)為企業上雲提供策略和技術的指導原則和最佳實踐,幫助企業上好雲、用好雲、管好雲,併成功實現業務目標。本雲採用框架是基於服務大量企業客戶的經驗總結,將企業雲採用分為四個階段,並詳細探討企業應在每個階段採取的業務和技術策略;同時,還 ...
  • 與TXT文本文件,PDF文件更加專業也更適合傳輸,常用於正式報告、簡歷、合同等場合。項目中如果有使用Java將TXT文本文件轉為PDF文件的需求,可以查看本文中介紹的免費實現方法。 免費Java PDF庫 本文介紹的方法需要用到Free Spire.PDF for Java,該免費庫支持多種操作、轉 ...
  • 指針和引用 當我們需要在程式中傳遞變數的地址時,可以使用指針或引用。它們都可以用來間接訪問變數,但它們之間有一些重要的區別。 指針是一個變數,它存儲另一個變數的地址。通過指針,我們可以訪問存儲在該地址中的變數。指針可以被重新分配,可以指向不同的變數,也可以為NULL。指針使用*運算符來訪問存儲在地址 ...
  • 即使再小再簡單的需求,作為研發開發完畢之後,我們可以直接上線麽?其實很多時候事故往往就是由於“不以為意”發生的。事故的發生往往也遵循“墨菲定律”,這就要求我們更要敬畏線上,再小的需求點都需要經過嚴格的測試驗證才能上線。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、是什麼 許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保用戶只能訪問到被分配的資源 而前端許可權歸根結底是請求的發起權,請求的發起可能有下麵兩種形式觸發 頁面載入觸發 頁面上的按鈕點擊觸發 總的來說,所有的請求發起都觸發自前端路由或 ...