前端彈性佈局神器display:flex【轉】

来源:https://www.cnblogs.com/xyh9039/archive/2023/06/11/17473566.html
-Advertisement-
Play Games

在進行網頁前端設計時,需要垂直居中顯示文本,但CSS似乎沒有明確的垂直居中的代碼方法,由於目前的頁面不再考慮以前的瀏覽器了,因此採用CSS3的display:flex方法來實現。現記錄一下flex屬性的相關資料。 ...


本文內容摘自博文:https://www.cnblogs.com/qingchunshiguang/p/8011103.html、https://blog.csdn.net/ababab12345/article/details/119612918

在進行網頁前端設計時,需要垂直居中顯示文本,但CSS似乎沒有明確的垂直居中的代碼方法,由於目前的頁面不再考慮以前的瀏覽器了,因此採用CSS3的display:flex方法來實現。現記錄一下flex屬性的相關資料。

一、flex佈局是什麼?

Flex是Flexible Box的縮寫,翻譯成中文就是“彈性盒子”,用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex佈局。設為Flex佈局以後,子元素的float、clear和vertical-align屬性將失效。它即可以應用於容器中,也可以應用於行內元素。

.box{
    display: -webkit-flex; /*在webkit內核的瀏覽器上使用要加首碼*/
    display: flex; //將對象作為彈性伸縮盒顯示
}

行內元素也可以使用Flex佈局:

.box {
    display: inline-flex; //將對象作為內聯塊級彈性伸縮盒顯示
}

相容性寫法:

.box {
    display: flex || inline-flex;
}

二、flex佈局的基本概念

先來看一下這張示意圖:

採用Flex佈局的元素,被稱為Flex容器(flex container),簡稱“容器”。其所有子元素自動成為容器成員,成為Flex項目(Flex item),簡稱“項目”。

容器預設存在兩根主軸:水平方向主軸(main axis)和垂直方向交叉軸(cross axis),預設項目按主軸排列。

  • main start/main end:主軸開始位置/結束位置; 
  • cross start/cross end:交叉軸開始位置/結束位置;
  • main size/cross size:單個項目占據主軸/交叉軸的空間;

三、容器屬性

設置在容器上的屬性有6種:

屬性名稱 屬性含義
flex-direction 容器內子項的排列方向(預設橫向排列)
flex-wrap 容器內子項換行方式
flex-flow 以上兩個屬性的簡寫方式
justify-content 子項在主軸上的對齊方式
align-items 子項在交叉軸上如何對齊
align-content 定義了多根軸線的對齊方式。如果子項只有一根軸線,該屬性不起作用。

1、flex-direction屬性:決定主軸的方向(即項目的排列方向)

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}
  • row(預設):主軸水平方向,起點在左端;
  • row-reverse:主軸水平方向,起點在右端;
  • column:主軸垂直方向,起點在上邊沿;
  • column-reserve:主軸垂直方向,起點在下邊沿。

2、flex-wrap屬性:定義換行情況

預設情況下,項目都排列在一條軸線上,但有可能一條軸線排不下。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(預設):不換行;

  • wrap:換行,第一行在上方; 

  • wrap-reverse:換行,第一行在下方。

3、flex-flow屬性:flex-direction和flex-wrap的簡寫,預設row nowrap

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

4、justify-content屬性:定義項目在主軸上的對齊方式。

對齊方式與軸的方向有關,本文中假設主軸從左到右。

.box {
   justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}
  • flex-start(預設值):左對齊;

  • flex-end:右對齊; 

  • center:居中; 

  • space-between:兩端對齊,項目之間間隔相等;

  • space-around:每個項目兩側的間隔相等,即項目之間的間隔比項目與邊框的間隔大一倍。 

5、align-items屬性:定義在交叉軸上的對齊方式 

對齊方式與交叉軸的方向有關,假設交叉軸從下到上。

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:起點對齊;

  • flex-end:終點對齊; 

  • center:中點對齊; 

  • baseline:項目的第一行文字的基線對齊; 

  • stretch(預設值):如果項目未設置高度或設為auto,將占滿整個容器的高度。 

6、align-content屬性:定義多根軸線的對齊方式 

如果項目只有一根軸線,該屬性不起作用。所以,容器必須設置flex-wrap:···;

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start:與交叉軸的起點對齊;

  • flex-end:與交叉軸的終點對齊; 

  • center:與交叉軸的中點對齊;

  • space-between:與交叉軸的兩端對齊,軸線之間的間隔平均分佈; 

  • space-around:每根軸線兩側的間隔相等,即軸線之間的間隔比軸線與邊框的間隔大一倍; 

  • stretch(預設值):軸線占滿整個交叉軸。 

有意思的是,當你不給項目設置高度但是給容器設置align-content不為stretch時,同一軸線上的項目的高度將等於項目中高度最高的項目。

四、項目的屬性

設置在項目上的屬性也有6個:

 項目名稱  意義與用法
 order  子項的排列順序。數值越小,排列越靠前,預設為0。
 flex-grow  子項的放大比例,預設為0,即如果存在剩餘空間,也不放大。
 flex-shrink  子項的縮小比例,預設為1,即如果空間不足,該項目將縮小。
 flex-basis  在分配多餘空間之前,子項占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即項目的本來大小。
 flex  是flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。
 align-self  允許單個子項有與其它子項不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。

子項CSS舉例:

.flex-item {
    order: <integer>;
}
 
.flex-item {
    flex-grow: <number>; /* default 0 */
}
 
.flex-item {
    flex-shrink: <number>; /* default 1 */
}
 
.flex-item {
    flex-basis: <length> | auto; /* default auto */
}
 
.flex-item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
 
.flex-item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

1、order屬性:定義項目的排列順序

數值越小,排列越靠前,預設為0,可以是負值。

.item {
    order: <整數>;
}

2、flex-grow屬性:定義項目的放大比例 

預設值為0,即如果空間有剩餘,也不放大。可以是小數,按比例占據剩餘空間。

.item{
    flex-grow: <數字>;
}

若所有項目的flex-grow的數值都相同,則等分剩餘空間:

若果有一個項目flex-grow為2,其餘都為1,則該項目占據剩餘空間是其餘的2倍: 

3、flex-shrink屬性:定義項目的縮小比例 

預設值都為1,即如果空間不足將等比例縮小。

如果有一個項目的值為0,其他項目為1,當空間不足時,該項目不縮小。

負值對該屬性無效,容器不應該設置flex-wrap。

.item{
    flex-shrink: <非負整數>;
}

如果一個項目設置flex-shrink為0;而其他項目都為1,則空間不足時,該項目不縮小:

如果所有項目都為0,則當空間不足時,項目撐破容器而溢出:

如果設置項目的flex-shrink不為0的非負數效果同設置為1:

4、flex-basis屬性:定義在分配多餘空間之前,項目占據的主軸空間

預設值為auto,瀏覽器根據此屬性檢查主軸是否有多餘空間。

.item{
    flex-basis:  <auto或者px>;
}

註意設置的flex-basis是分配多餘空間之前項目占據的主軸空間,如果空間不足則預設情況下該項目也會縮小。

設置flex-basis為350px,但空間充足:

空間不足,項目縮小,小於設定值:

5、flex屬性:是flex-grow,flex-shrink和flex-basis的簡寫 

預設值為0 1 auto,第一個屬性必須,後兩個屬性可選。

.item{
    flex: none | [<flex-grow><flex-shrink><flex-basis>];
}
  • 可以用 flex:auto; 代替 flex: 1 1 auto;
  • 可以用 flex: none; 代替 flex: 0 0 auto;

6、align-self屬性:允許單個項目與其他項目有不一樣的對齊方式 

預設值為auto,表示繼承父元素的align-items屬性,並可以覆蓋align-items屬性。

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

 

彈性佈局相關Demo源碼:

鏈接:https://pan.baidu.com/s/1dCgusDq10I0GhfFLYfrScg 
提取碼:eo5m

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 哈嘍大家好,我是鹹魚 今天來講一個我在實現 python 列表切片時遇到的趣事 在正式開始之前,我們先來瞭解一下**切片(slice)** 切片操作是訪問序列(列表、字元串......)中元素的另一種方法,它可以訪問一定範圍內的元素,通過切片操作,可以生成一個新的序列 語法如下 ```python ...
  • 最近需要在計算大文件的 MD5 值時顯示進度,於是我寫瞭如下的代碼: ``` cs public long Length {get; private set; } public long Position { get; private set; } public async Task Compute ...
  • ## **記憶體分區** 先回顧一下C#的記憶體種類 1. 棧區:由編譯器自動分配釋放 ,存放值類型的對象本身,引用類型的引用地址(指針),靜態區對象的引用地址(指針),常量區對象的引用地址(指針)等。其操作方式類似於數據結構中的棧。 2. 堆區(托管堆):用於存放引用類型對象本身。在c#中由.net平 ...
  • # ZY知識庫留言板功能實現 # 前言 因為這個博客是用的大佬的開源項目,我也是用自己的想法改了很多東西,雖然可能寫的不是很好,但是我自己想要的效果實現了,開源項目不就是用來學習的嘛,所以不能一層不變,之前首頁改版、評論功能我都沒有寫文章,這次抽空更新了留言板功能,來水一篇文章。 留言板地址:[ZY ...
  • 在國內訪問國外伺服器(如github)會有卡頓、無法載入等問題,提供兩種解決方案: 1.查看github的IP地址並修改Hosts windows鍵+R,打開cmd(或windows鍵+X,打開Windows PowerShell),輸入指令:ping github.com 獲取IP地址,之後打開文 ...
  • 一、HBase簡介 HBase是一個開源的、分散式的、版本化的NoSQL資料庫(即非關係型資料庫),依托Hadoop分散式文件系統HDFS提供分散式數據存儲,利用MapReduce來處理海量數據,用Zookeeper作為其分散式協同服務,一般用於存儲海量數據。HDFS和HBase的區別在於,HDFS ...
  • # 簡介 HBase 是一個**面向列式存儲的分散式資料庫**,其設計思想來源於 Google 的 BigTable 論文。 HBase 底層存儲基於 HDFS 實現,集群的管理基於 ZooKeeper 實現。 HBase 良好的分散式架構設計為海量數據的快速存儲、隨機訪問提供了可能,基於數據副本機 ...
  • 博客推行版本更新,成果積累制度,已經寫過的博客還會再次更新,不斷地琢磨,高質量高數量都是要追求的,工匠精神是學習必不可少的精神。因此,大家有何建議歡迎在評論區踴躍發言,你們的支持是我最大的動力,你們敢投,我就敢肝 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...