MIX Fold3包裝盒泄露 新機本月登場
小米的全新折疊屏旗艦MIX Fold3將于本月發布，近日該機的真機包裝盒在網上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案，變化不大，這也是目前小米旗艦
前面一篇文章「一文帶你弄懂 CSS 布局知識」里，我整體介紹了 CSS 的布局知識，其中說到 float 布局是 CSS 不斷完善的副產物。而在 2023 年的今天，flex 這種布局方式才是未來！那么今天我們就來學習下 flex 彈性布局。
在經過了長達 10 年的發展之后，CSS3 才終于迎來了一個簡單好用的布局屬性 —— flex。Flex 布局又稱彈性布局，它使用 flexbox 屬性使得容器有了彈性，可以自動適配各種設備的不同寬度，而不必依賴于傳統的塊狀布局和浮動定位。
舉個很簡單地例子，如果我們想要實現一個很簡單左側定寬，右側自適應的導航布局，如下圖所示。
-w1239
在沒有 flex 之前，我們的代碼是這么寫的。
<div><h1>4.1 兩欄布局 - 左側定寬、右側自適應 - float</h1><div class="container"> <div class="left41"></div> <div class="right41"></div></div></div>/** 4.1 兩欄布局 - 左側定寬、右側自適應 - float **/.left41 { float: left; width: 300px; height: 500px; background-color: pink;}.right41 { width: 100%; height: 500px; background-color: aquamarine;}這種方式不好的地方在于，我們還需要去理解 float 這個概念。一旦需要理解 float 這個概念，我們就會拖出一大堆概念，例如文檔流、盒子模型、display 等屬性（雖然這些東西確實應該學）。但對于 flex 來說，它就很簡單，只需要設置一個伸縮系數即可，如下代碼所示。
<div><h1>4.2 兩欄布局 - 左側定寬、右側自適應 - flex</h1><div class="container42"> <div class="left42"></div> <div class="right42"></div></div></div>.container42 { display: flex;}.left42 { width: 300px; height: 500px; background-color: pink;}.right42 { flex: 1; width: 100%; height: 500px; background-color: aquamarine;}上面的代碼里，我們只需要將父級容器設置為 flex 展示形式（display: flex），隨后在需要自動伸縮的容器里設置屬性即可。上面代碼中的 flex: 1 表示其占據所有當行所剩的空間。通過這樣的方式，我們非常方便地實現了彈性布局。
當然，上面只是一個最簡單的例子，甚至還不是很能體現出 flex 的價值。flex 除了在響應式布局方面非常方便之外，它在對齊等方面更加方便，能夠極大地降低學習成本、提高工作效率。
對于 Flex 布局來說，其有幾個核心概念，分別是：主軸與交叉軸、起始線和終止線、Flex 容器與 Flex 容器項。
在 Flex 布局中有一個名為 flex-direction 的屬性，可以取 4 個值，分別是：
如果你選擇了 row 或者 row-reverse，那么主軸（Main Axis）就是橫向的 X 軸，交叉軸（Cross Axis）就是豎向的 Y 軸，如下圖所示。
主軸是橫向的X軸，交叉軸是豎向的Y軸
如果你選擇了 column 或者 column-reverse，那么主軸（Main Axis）就變成是豎向的 Y 軸，交叉軸（Cross Axis）就是橫向的 X 軸，如下圖所示。
主軸是豎向的Y軸，交叉軸是橫向的X軸
過去，CSS 的書寫模式主要被認為是水平的，從左到右的。但現代的布局方式涵蓋了書寫模式的范圍，所以我們不再假設一行文字是從文檔的左上角開始向右書寫的。
對于不同的語言來說，其書寫方向不同，例如英文是從左到右，但阿拉伯文則是從右到左。那么對于這兩種語言來說，其xx會有所不同 TODO。舉個簡單的例子，如果 flex-direction 是 row ，并且我是在書寫英文。由于英文是從左到右書寫的，那么主軸的起始線是左邊，終止線是右邊，如下圖所示。
-w557
但如果我在書寫阿拉伯文，由于阿拉伯文是從右到左的，那么主軸的起始線是右邊，終止線是左邊，如下圖所示。
-w541
在 Flex 布局中，起始線和終止線決定了 Flex 容器中的 Flex 元素從哪個方向開始排列。 舉個簡單例子，如果我們通過 direction: ltr 設置了文字書寫方向是從左到右，那么起始線就是左邊，終止線就是右邊。此時，如果我們設置的 flex-direction 值是 row，那么 Flex 元素將會從左到右開始排列。但如果我們設置的 flex-direction 值是 row-reverse，那么 Flex 元素將會從右到左開始排列。
在上面的例子中，交叉軸的起始線是 flex 容器的頂部，終止線是底部，因為兩種語言都是水平書寫模式。但如果有一種語言，它的書寫形式是從底部到頂部，那么當設置 flex-direction為 column 或 column-reverse 時，也會有類似的變化。
我們把一個容器的 display 屬性值改為 flex 或者 inline-flex 之后，該容器就變成了 Flex 容器，而容器中的直系子元素就會變為 flex 元素。如下代碼所示，parent 元素就是 Flex 容器，son 元素就是 Flex 元素。
<style>#parent { display: flex;}</style><div id="parent"> <div id="son"></div></div>對于 Flex 來說，它有非常多的用法，但核心屬性卻相對較少。這里我只簡單介紹幾個核心屬性，如果你想了解更多 Flex 的屬性，可以去 Mozilla 官網查詢，這里給個傳送門：flex 布局的基本概念 - CSS：層疊樣式表 | MDN。
對于 Flex 布局來說，其核心屬性有如下幾個：
如上文所介紹過的，flex-direction 定義了主軸的方向，可以取 4 個值，分別是：
一旦主軸確定了，交叉軸也確定了。主軸和交叉軸與后續的對齊屬性有關，因此弄懂它們非常重要！舉個很簡單的例子，如下的代碼將展示下圖的展示效果。
.box { display: flex; flex-direction: row-reverse;}<div class="box"> <div>One</div> <div>Two</div> <div>Three</div></div>
-w538
如果你將 flex-direction 改成 column-reverse，那么將會變成如下的效果，如下圖所示。
-w541
前面說到 Flex 布局可以很方便地進行響應式布局，其實就是通過 flex 屬性來實現的。flex 屬性其實是 flex-grow、flex-shrink、flex-basis 這三個參數的縮寫形式，如下代碼所示。
flex-grow: 1;flex-shrink: 1;flex-basis: 200px;/* 上面的設置等價于下面 flex 屬性的設置 */flex: 1 1 200px;在考慮這幾個屬性的作用之前，需要先了解一下 可用空間 available space 這個概念。這幾個 flex 屬性的作用其實就是改變了 flex 容器中的可用空間的行為。
假設在 1 個 500px 的容器中，我們有 3 個 100px 寬的元素，那么這 3 個元素需要占 300px 的寬，剩下 200px 的可用空間。在默認情況下，flexbox 的行為會把這 200px 的空間留在最后一個元素的后面。
-w537
如果期望這些元素能自動地擴展去填充滿剩下的空間，那么我們需要去控制可用空間在這幾個元素間如何分配，這就是元素上的那些 flex 屬性要做的事。
flex-basis 屬性用于設置 Flex 元素的大小，其默認值是 auto。此時瀏覽器會檢查元素是否有確定的尺寸，如果有確定的尺寸則用該尺寸作為 Flex 元素的尺寸，否則就采用元素內容的尺寸。
flex-grow 若被賦值為一個正整數，flex 元素會以 flex-basis 為基礎，沿主軸方向增長尺寸。這會使該元素延展，并占據此方向軸上的可用空間（available space）。如果有其他元素也被允許延展，那么他們會各自占據可用空間的一部分。
舉個例子，上面的例子中有 a、b、c 個 Flex 元素。如果我們給上例中的所有元素設定 flex-grow 值為 1，容器中的可用空間會被這些元素平分。它們會延展以填滿容器主軸方向上的空間。
但很多時候，我們可能都需要按照比例來劃分剩余的空間。此時如果第一個元素 flex-grow 值為 2，其他元素值為 1，則第一個元素將占有 2/4（上例中，即為 200px 中的 100px）, 另外兩個元素各占有 1/4（各 50px）。
flex-grow 屬性是處理 flex 元素在主軸上增加空間的問題，相反 flex-shrink 屬性是處理 flex 元素收縮的問題。如果我們的容器中沒有足夠排列 flex 元素的空間，那么可以把 flex 元素 flex-shrink 屬性設置為正整數，以此來縮小它所占空間到 flex-basis 以下。
與flex-grow屬性一樣，可以賦予不同的值來控制 flex 元素收縮的程度 —— 給flex-shrink屬性賦予更大的數值可以比賦予小數值的同級元素收縮程度更大。
justify-content 屬性用來使元素在主軸方向上對齊，它的初始值是 flex-start，即元素從容器的起始線排列。justify-content 屬性有如下 5 個不同的值：
各個不同的對齊方式的效果如下圖所示。
flex-start：
-w454
flex-end：
-w444
center：
-w449
space-around：
-w442
space-between：
-w453
align-items 屬性可以使元素在交叉軸方向對齊，它的初始值是 stretch，即拉伸到最高元素的高度。align-items 屬性有如下 5 個不同的值：
各個不同的對齊方式的效果如下圖所示。
stretch：
-w448
flex-start：
-w439
flex-end：
-w438
center：
-w444
要注意的事，無論 align-items 還是 justify-content，它們都是以主軸或者交叉軸為參考的，而不是橫向和豎向為參考的，明白這點很重要。
由于所有 CSS 屬性都會有一個初始值，所以當沒有設置任何默認值時，flex 容器中的所有 flex 元素都會有下列行為：
弄清楚 Flex 元素的默認值有利于我們更好地進行布局排版。
看了那么多的 Flex 布局知識點，總感覺干巴巴的，是時候來看看別人在項目中是怎么用的了。
-w1290
上面是我在 CodePen 找到的一個案例，這樣的一個布局就是用 Flex 布局來實現的。通過簡單的分析，其實我們可以拆解出其 Flex 布局方法，大致如下圖所示。
-w1297
首先整體分為兩大部分，即導航欄和內容區域，這部分的主軸縱向排列的（flex-direction: column），如上圖紅框部分。隨后在內容區域，又將其分成了左邊的導航欄和右邊的內容區域，此時這塊內容是橫向排列的（flex-direction: row），如下上圖藍框部分。
剩下的內容布局也大致類似，其實就是無限套娃下去。由于偏于原因，這里就不繼續深入拆解了，大致的布局思路已經說得很清楚了。
有了 Flex 布局之后，貌似布局也變得非常簡單了。但紙上得來終覺淺，還是得自己實際動手練練才知道容易不容易，不然就變成紙上談兵了！
看到這里，關于 Flex 布局的核心點就介紹得差不多了。掌握好這幾個核心的知識點，開始去實踐練習基本上沒有什么太大的問題了。剩下的一些比較小眾的屬性，等用到的時候再去查查看就足夠了。
接下來更多的時間，就是找多幾個實戰案例實踐，唯有實踐才能鞏固所學知識點。后面有機會，我將分享我在 Flex 布局方面的項目實踐。
本文鏈接：http://www.tebozhan.com/showinfo-26-15181-0.html別再用 float 布局了，flex 才是未來！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 開發人員都應該知道的九個GitHub庫
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號