一篇文章帶你掌握Flex佈局的所有用法

来源:https://www.cnblogs.com/zdsdididi/archive/2023/02/07/17099581.html
-Advertisement-
Play Games

Flex 佈局目前已經非常流行了,現在幾乎已經相容所有瀏覽器了。在文章開始之前我們需要思考一個問題:我們為什麼要使用 Flex 佈局? 其實答案很簡單,那就是 Flex 佈局好用。一個新事物的出現往往是因為舊事物不那麼好用了,比如,如果想讓你用傳統的 css 佈局來實現一個塊元素垂直水平居中你會怎麼 ...


Flex 佈局目前已經非常流行了,現在幾乎已經相容所有瀏覽器了。在文章開始之前我們需要思考一個問題:我們為什麼要使用 Flex 佈局?

其實答案很簡單,那就是 Flex 佈局好用。一個新事物的出現往往是因為舊事物不那麼好用了,比如,如果想讓你用傳統的 css 佈局來實現一個塊元素垂直水平居中你會怎麼做?實現水平居中很簡單,margin: 0 auto就行,而實現垂直水平居中則可以使用定位實現:

<div class="container">
  <div class="item"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}
.item {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

或者

.item {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  margin: auto;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

image.png

但是這樣都顯得特別繁瑣,明明可以一個屬性就能解決的事情沒必要寫這麼麻煩。而使用 Flex 則可以使用 place-content 屬性簡單的實現(place-content 為 justify-content 和 align-content 簡寫屬性)

.container {
  width: 300px;
  height: 300px;
  background: red;
  display: flex;
  place-content: center;
}
.item {
  background: black;
  width: 50px;
  height: 50px;
}

接下來的本篇文章將會帶領大家一起來探討Flex佈局

基本概念

我們先寫一段代碼作為示例(部分屬性省略)

html

<div class="container">
  <div class="item">flex項目</div>
  <div class="item">flex項目</div>
  <div class="item">flex項目</div>
  <div class="item">flex項目</div>
</div>

.container {
  display: flex;
  width: 800px;
  gap: 10px;
}
.item {
  color: #fff;
}

image.png

flex 容器

我們可以將一個元素的 display 屬性設置為 flex,此時這個元素則成為flex 容器比如container元素

flex 項目

flex 容器的子元素稱為flex 項目,比如item元素

軸

flex 佈局有兩個軸,主軸和交叉軸,至於哪個是主軸哪個是交叉軸則有flex 容器的flex-direction屬性決定,預設為:flex-direction:row,既橫向為主軸,縱向為交叉軸,

image.png

flex-direction還可以設置其它三個屬性,分別為row-reverse,column,column-reverse。

  • row-reverse

image.png

  • column

1675390782104.png

  • column-reverse

1675390925377.png

從這裡我們可以看出 Flex 軸的方向不是固定不變的,它受到flex-direction的影響

不足空間和剩餘空間

當 Flex 項目總寬度小於 Flex 容器寬度時就會出現剩餘空間

image.png

當 Flex 項目總寬度大於 Flex 容器寬度時就會出現不足空間

image.png

Flex 項目之間的間距

Flex 項目之間的間距可以直接在 Flex 容器上設置 gap 屬性即可,如

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

.container {
  display: flex;
  width: 500px;
  height: 400px;
  gap: 10px;
}
.item {
  width: 150px;
  height: 40px;
}

image.png

Flex 屬性

flex屬性是flex-grow,flex-shrink,flex-basis三個屬性的簡寫。下麵我們來看下它們分別是什麼。

  • flex-basis可以設定 Flex 項目的大小,一般主軸為水平方向的話和 width 解析方式相同,但是它不一定是 Flex 項目最終大小,Flex 項目最終大小受到flex-grow,flex-shrink以及剩餘空間等影響,後面文章會告訴大家最終大小的計算方式

  • flex-grow為 Flex 項目的擴展繫數,當 Flex 項目總和小於 Flex 容器時就會出現剩餘空間,而flex-grow的值則可以決定這個 Flex 項目可以分到多少剩餘空間

  • flex-shrink為 Flex 項目的收縮繫數,同樣的,當 Flex 項目總和大於 Flex 容器時就會出現不足空間,flex-shrink的值則可以決定這個 Flex 項目需要減去多少不足空間

既然flex屬性是這三個屬性的簡寫,那麼flex屬性簡寫方式分別代表什麼呢?

flex屬性可以為 1 個值,2 個值,3 個值,接下來我們就分別來看看它們代表什麼意思

  • 一個值

如果flex屬性只有一個值的話,我們可以看這個值是否帶單位,帶單位那就是flex-basis,不帶就是flex-grow

.item {
  flex: 1;

  /* 相當於 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
​ .item {
  flex: 30px;

  /* 相當於 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30px;
}
  • 兩個值

當flex屬性有兩個值的話,第一個無單位的值就是flex-grow,第一個無單位的值則是flex-shrink,有單位的就是flex-basis

.item {
  flex: 1 2;

  /* 相當於 */
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 0;
}
​ .item {
  flex: 30px 2;

  /* 相當於 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}
  • 三個值

當flex屬性有三個值的話,第一個無單位的值就是flex-grow,第一個無單位的值則是flex-shrink,有單位的就是flex-basis

.item {
  flex: 1 2 10px;

  /* 相當於 */
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 10px;
}
​ .item {
  flex: 30px 2 1;

  /* 相當於 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}

​ .item {
  flex: 2 30px 1;

  /* 相當於 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}

另外,flex 的值還可以為initial,auto,none。

  • initial

initial 為預設值,和不設置 flex 屬性的時候表現一樣,既 Flex 項目不會擴展,但會收縮,Flex 項目大小有本身內容決定

​ .item {
  flex: initial;

  /* 相當於 */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
  • auto

當 flex 設置為 auto 時,Flex 項目會根據自身內容確定flex-basis,既會拓展也會收縮

​ .item {
  flex: auto;

  /* 相當於 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
  • none

none 表示 Flex 項目既不收縮,也不會擴展

​ .item {
  flex: none;

  /* 相當於 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

Flex 項目大小的計算

首先看一下 flex-grow 的計算方式

flex-grow

面試中經常問到: 為什麼 flex 設置為 1 的時候,Flex 項目就會均分 Flex 容器? 其實 Flex 項目設置為 1 不一定會均分容器(後面會解釋),這裡我們先看下均分的情況是如何發生的

同樣的我們先舉個例子

<div class="container">
  <div class="item">Xiaoyue</div>
  <div class="item">June</div>
  <div class="item">Alice</div>
  <div class="item">Youhu</div>
  <div class="item">Liehuhu</div>
</div>

.container {
  display: flex;
  width: 800px;
}
.item {
  flex: 1;
  font-size: 30px;
}

flex 容器總寬度為 800px,flex 項目設置為flex:1,此時頁面上顯示

image.png

我們可以看到每個項目的寬度為 800/5=160,下麵來解釋一下為什麼會均分:

首先

​ .item {
  flex: 1;

  /* 相當於 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

因為flex-basis為 0,所有 Flex 項目擴展繫數都是 1,所以它們分到的剩餘空間都是一樣的。下麵看一下是如何計算出最終項目大小的

這裡先給出一個公式:

Flex項目彈性量 = (Flex容器剩餘空間/所有flex-grow總和)*當前Flex項目的flex-grow

其中Flex項目彈性量指的是分配給 Flex 項目多少的剩餘空間,所以 Flex 項目的最終寬度為

flex-basis+Flex項目彈性量。

根據這個公式,上面的均分也就很好理解了,因為所有的flex-basis為 0,所以剩餘空間就是 800px,每個 Flex 項目的彈性量也就是(800/1+1+1+1+1)*1=160,那麼最終寬度也就是160+0=160

剛剛說過 flex 設置為 1 時 Flex 項目並不一定會被均分,下麵就來介紹一下這種情況,我們修改一下示例中的 html,將第一個 item 中換成一個長單詞

<div class="container">
  <div class="item">Xiaoyueyueyue</div>
  <div class="item">June</div>
  <div class="item">Alice</div>
  <div class="item">Youhu</div>
  <div class="item">Liehu</div>
</div>

此時會發現 Flex 容器並沒有被均分

image.png

因為計算出的靈活性 200px 小於第一個 Flex 項目的min-content(217.16px),此時瀏覽器會採用 Flex 項目的min-content作為最終寬度,而後面的 Flex 項目會在第一個 Flex 項目計算完畢後再進行同樣的計算

我們修改一下 flex,給它設置一個 flex-basis,看下它計算之後的情況

.item {
  text-align: center;
  flex: 1 100px;
}

因為每個項目的flex-basis都是 100px,Flex 容器剩餘空間為800-500=300px,所以彈性量就是(300/5)*1=60px,最終寬度理論應該為100+60=160px,同樣的因為第一個 Flex 項目的min-content為 217.16px,所以第一個 Flex 項目寬度被設置為 217.16px,最終表現和上面一樣

image.png

我們再來看一下為什麼第 2,3,4,5 個 Flex 項目寬度為什麼是 145.71px

1675415296477.png

當瀏覽器計算完第一個 Flex 項目為 217.16px 後,此時的剩餘空間為800-217.16-100*4=182.84,第 2 個 Flex 項目彈性量為(182.84/1+1+1+1)*1=45.71,所以最終寬度為100+45.71=145.71px,同樣的後面的 Flex 項目計算方式是一樣的,但是如果後面再遇到長單詞,假如第五個是長單詞,那麼不足空間將會發生變化,瀏覽器會將第五個 Flex 項目寬度計算完畢後再回頭進行一輪計算,具體情況這裡不再展開

所以說想要均分 Flex 容器 flex 設置為 1 並不能用在所有場景中,其實當 Flex 項目中有固定寬度元素也會出現這種情況,比如一張圖片等,當然如果你想要解決這個問題其實也很簡單,將 Flex 項目的min-width設置為 0 即可

.item {
  flex: 1 100px;
  min-width: 0;
}

image.png

flex-grow 為小數

flex-grow 的值不僅可以為正整數,還可以為小數,當為小數時也分為兩種情況:所有 Flex 項目的 flex-grow 之和小於等於 1 和大於 1,我們先看小於等於 1 的情況,將例子的改成

<div class="container">
  <div class="item">Acc</div>
  <div class="item">Bc</div>
  <div class="item">C</div>
  <div class="item">DDD</div>
  <div class="item">E</div>
</div>

.item:nth-of-type(1) {
  flex-grow: 0.1;
}
.item:nth-of-type(2) {
  flex-grow: 0.2;
}
.item:nth-of-type(3) {
  flex-grow: 0.2;
}
.item:nth-of-type(4) {
  flex-grow: 0.1;
}
.item:nth-of-type(5) {
  flex-grow: 0.1;
}

效果如圖

image.png

我們可以發現項目並沒有占滿容器,它的每個項目的彈性量計算方式為

Flex項目彈性量=Flex容器剩餘空間*當前Flex項目的flex-grow

相應的每個項目的實際寬度也就是flex-basis+彈性量,首先先不設置 flex-grow,我們可以看到每個項目的 flex-basis 分別為: 51.2 , 33.88 , 20.08 , 68.56 , 16.5

image.png

所以我們可以計算出 Flex 容器的剩餘空間為800-51.2 -33.88 - 20.08 - 68.56 - 16.5=609.78,這樣我們就可以算出每個項目的實際尺寸為

A: 實際寬度 = 51.2 + 609.78*0.1 = 112.178

B: 實際寬度 = 33.88 + 609.78*0.2 = 155.836

...

下麵看下 flex-grow 之和大於 1 的情況,將例子中的 css 改為

.item:nth-of-type(1) {
  flex-grow: 0.1;
}
.item:nth-of-type(2) {
  flex-grow: 0.2;
}
.item:nth-of-type(3) {
  flex-grow: 0.3;
}
.item:nth-of-type(4) {
  flex-grow: 0.4;
}
.item:nth-of-type(5) {
  flex-grow: 0.5;
}

此時的效果為

image.png

可以看出 Flex 項目是占滿容器的,它的計算方式其實和 flex-grow 為正整數時一樣

Flex項目彈性量 = (Flex容器剩餘空間/所有flex-grow總和)*當前Flex項目的flex-grow

所以我們可以得出一個結論: Flex 項目的 flex-grow 之和小於 1,Flex 項目不會占滿 Flex 容器

flex-shrink

flex-shrink 其實和 flex-grow 基本一樣,就是擴展變成了收縮,flex-grow 是項目比例增加容器剩餘空間,而 flex-shrink 則是比例減去容器不足空間

修改一下我們的例子:

.item {
  flex-basis: 200px;
  /* 相當於 */
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: 200px;
}

此時項目的總寬度200*5=1000px已經大於容器總寬度800px,此時計算第一個項目的不足空間就是800-200*5=-200px,第二個項目的不足空間則是800-第一個項目實際寬度-200*4,依次類推

最終計算公式其實和 flex-grow 計算差不多

Flex項目彈性量 = (Flex容器不足空間/所有flex-shrink總和)*當前Flex項目的flex-shrink

只不過,所以上面例子每個項目可以計算出實際寬度為

第一個 Flex 項目: 200+((800-200x5)/5)*1 = 160px

第二個 Flex 項目: 200+((800-160-200x4)/4)*1 = 160px

第三個 Flex 項目: 200+((800-160-160-200x3)/3)*1 = 160px

第四個 Flex 項目: 200+((800-160-160-160-200x2)/2)*1 = 160px

第五個 Flex 項目: 200+((800-160-160-160-160-200x1)/1)*1 = 160px

如果 Flex 項目的min-content大於flex-basis,那麼最終的實際寬度將會取該項目的min-content,比如改一下例子,將第一個 Flex 項目改成長單詞

<div class="container">
  <div class="item">XiaoyueXiaoyue</div>
  <div class="item">June</div>
  <div class="item">Alice</div>
  <div class="item">Youhu</div>
  <div class="item">Liehu</div>
</div>

image.png

可以看出瀏覽器最終採用的是第一個 Flex 項目的min-content作為實際寬度,相應的後面 Flex 項目的寬度會等前一個 Flex 項目計算完畢後在進行計算

比如第二個 Flex 項目寬度= 200+((800-228.75-200x4)/4)*1 = 142.81px

flex-shrink 為小數

同樣的 flex-shrink 也會出現小數的情況,也分為 Flex 項目的 flex-shrink 之和小於等於 1 和大於 1 兩種情況,如果大於 1 和上面的計算方式一樣,所以我們只看小於 1 的情況,將我們的例子改為

.item {
  flex-basis: 200px;
  flex-shrink: 0.1;
}

效果為

image.png

此時我們會發現 Flex 項目溢出了容器,所以我們便可以得出一個結論:Flex 項目的 flex-shrink 之和小於 1,Flex 項目會溢出 Flex 容器

下麵看一下它的計算公式

Flex項目彈性量=Flex容器不足空間*當前Flex項目的flex-shrink

Flex項目實際寬度=flex-basis + Flex項目彈性量

比如上面例子的每個 Flex 項目計算結果為

第一個 Flex 項目寬度 = 200+(800-200x5)x0.1=180px,但是由於它本身的min-content為 228.75,所以最終寬度為 228.75

第二個 Flex 項目寬度 =200-(800-228.75-200x4)x0.1=117.125

第三個 Flex 項目寬度...

Flex 的對齊方式

Flex 中關於對齊方式的屬性有很多,其主要分為兩種,一是主軸對齊方式:justify-*,二是交叉軸對齊方式:align-*

首先改一下我們的例子,將容器設置為寬高為 500x400 的容器(部分屬性省略)

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;
  width: 500px;
  height: 400px;
}
.item {
  width: 100px;
  height: 40px;
}

image.png

主軸對齊屬性

這裡以橫向為主軸,縱向為交叉軸

justify-content

justify-content的值可以為:

  • flex-start 預設值,主軸起點對齊

image.png

  • flex-end 主軸終點對齊

image.png

  • left 預設情況下和 flex-start 一致
  • right 預設情況下和 flex-end 一致
  • center 主軸居中對齊

image.png

  • space-between 主軸兩端對齊,並且 Flex 項目間距相等

image.png

  • space-around 項目左右周圍空間相等

image.png

  • space-evenly 任何兩個項目之間的間距以及邊緣的空間相等

image.png

交叉軸對齊方式

align-content

align-content 屬性控制整個 Flex 項目在 Flex 容器中交叉軸的對齊方式

**註意設置 align-content 屬性時候必須將 flex-wrap 設置成 wrap 或者 wrap-reverse。**它可以取得值為

  • stretch 預設值,當我們 Flex 元素不設置高度的時候,預設是拉伸的

比如將 Flex 元素寬度去掉

.item {
  width: 100px;
}

image.png

  • flex-start 位於容器開頭,這個和 flex-direction:屬性有關,預設在頂部

image.png

  • flex-end 位於容器結尾

image.png

  • center 元素居中對齊

image.png

  • space-between 交叉軸上下對齊,並且 Flex 項目上下間距相等

此時我們改下例子中 Flex 項目的寬度使其換行,因為如果 Flex 項目只有一行,那麼 space-between 與 flex-start 表現一致

.item {
  width: 300px;
}

image.png

  • space-around 項目上下周圍空間相等

image.png

  • space-evenly 任何兩個項目之間的上下間距以及邊緣的空間相等

image.png

align-items

align-items 屬性定義 flex 子項在 flex 容器的當前行的交叉軸方向上的對齊方式。它與 align-content 有相似的地方,它的取值有

  • stretch 預設值,當我們 Flex 元素不設置高度的時候,預設是拉伸的

  • center 元素位於容器的中心,每個當前行在圖中已經框起來

image.png

  • flex-start 位於容器開頭

  • flex-end 位於容器結尾

  • baseline 位於容器的基線上

比如給 A 項目一個 padding-top

.item:nth-of-type(1) {
  padding-top: 50px;
}

沒設置 baseline 的表現

image.png

設置 baseline 之後

image.png

通過上面的例子我們可以發現,如果想要整個 Flex 項目垂直對齊,在只有一行的情況下,align-items 和 align-content 設置為 center 都可以做到,但是如果出現多行的情況下 align-items 就不再適用了

align-self

上面都是給 Flex 容器設置的屬性,但是如果想要控制單個 Flex 項目的對齊方式該怎麼辦呢?

其實 Flex 佈局中已經考慮到了這個問題,於是就有個 align-self 屬性來控制單個 Flex 項目在 Flex 容器側交叉軸的對齊方式。

align-self 和 align-items 屬性值幾乎是一致的,比如我們將整個 Flex 項目設置為 center,第二個 Flex 項目設置為 flex-start

.container {
  display: flex;
  width: 500px;
  height: 400px;
  align-items: center;
}
.item {
  width: 100px;
  height: 40px;
}
.item:nth-of-type(2) {
  align-self: flex-start;
}

image.png

註意,除了以上提到的屬性的屬性值,還可以設置為 CSS 的關鍵詞如 inherit 、initial 等

交叉軸與主軸簡寫

place-content

place-content 為 justify-content 和 align-content 的簡寫形式,可以取一個值和兩個值,如果設置一個值那麼 justify-content 和 align-content 都為這個值,如果是兩個值,第一個值為 align-content,第二個則是 justify-content

到這裡關於Flex佈局基本已經介紹完了,肯定會有些細枝末節沒有考慮到,這可能就需要我們在平時工作和學習中去發現了

點個贊吧~


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

-Advertisement-
Play Games
更多相關文章
  • C#判斷IP地址是否正確
    參考文章：C# 判斷ip地址是否正確 樓主提供的方法是通過IPAddress.TryParse()來判斷字元串是否為有效地址，如果能解析IP地址，則為true。這個方法也蠻巧妙的，判斷IP地址我第一反應是根據'.'分割字元串然後每個字元挨個判斷，手動寫格式判斷啥的，效率低還麻煩，容易出錯，看到樓主那 ...
  • 必知必會的設計原則——單一職責原則
    概述 單一職責原則是最簡單的面向對象設計原則！定義為不要存在多於一個導致類變更的原因。通俗的說，即一個類只負責一項職責。說文字比較乾巴巴，我們通過上代碼來展示案例； 未使用單一職責原則的代碼 public class Telphone { public void Dial(string phoneN ...
  • Docker容器使用 (入門到精通)
    Docker 是一個開源的應用容器引擎，讓開發者可以打包他們的應用以及依賴包到一個可移植的鏡像中，然後發佈到任何流行的 Linux或Windows操作系統的機器上，也可以實現虛擬化。容器是完全使用沙箱機制，相互之間不會有任何介面。 ...
  • InnoDB在RR隔離級別下的幻讀問題的分析
    (目錄) 概述 筆者在學習資料庫相關內容時，發現關於innoDB在RR級別下究竟能不能保證不發生幻讀這個問題，網上的資料眾說紛紜，筆者在經過總結和自己的試驗之後，在這裡結合自己的理解分析一下這個問題，若有謬誤，歡迎指正。筆者在這裡預設讀者都瞭解了關於幻讀以及innoDB中MVCC和鎖機制的情況，僅對 ...
  • DataX插件二次開髮指南
    ##一、 DataX為什麼要使用插件機制？ 從設計之初，DataX就把異構數據源同步作為自身的使命，為了應對不同數據源的差異、同時提供一致的同步原語和擴展能力，DataX自然而然地採用了框架 + 插件 的模式： 插件只需關心數據的讀取或者寫入本身。 而同步的共性問題，比如：類型轉換、性能、統計，則交 ...
  • 用戶行為分析模型實踐（三）——H5通用分析模型
    本文從提升用戶行為分析效率角度出發，詳細介紹了H5埋點方案規劃，埋點數據採集流程，提供可借鑒的用戶行為數據採集方案；且完整呈現了針對頁面分析，留存分析的數倉模型規劃方案。 ...
  • 數據湖Hudi與對象存儲Minio及Hive\Spark\Flink的集成
    本文主要記錄對象存儲組件Minio、數據湖組件Hudi及查詢引擎Hive\Spark之間的相容性配置及測試情況，Spark及Hive無需多言，這裡簡單介紹下Minio及Hudi。 MinIO 是在 GNU Affero 通用公共許可證 v3.0 下發佈的高性能對象存儲。 它是與 Amazon S3 ...
  • 關於移動開發平臺，你想知道的這些事
    Flutter是Google推出的一款UI工具包，可以通過一套代碼同時在iOS和Android上構建媲美原生體驗的精美應用。它使用Dart作為開發語言，不依賴原生控制項，而是將自有的控制項庫，通過Skia圖形引擎直接繪製在平臺所提供的畫布上。簡單來說，它擁有以下特性：不依賴平臺、組件庫原生實現、能高速渲... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類