這是一個很經典的CSS佈局問題，新人徹底理解了這個問題，HTML網頁佈局思想便已掌握了七七八八了。 問題 先看一段HTML代碼： <!DOCTYPE html> <html> <body> <h1>這是一個標題</h1> <div class="wrapper"> <p>這是一個段落</p> <p> ...
這是一個很經典的CSS佈局問題，新人徹底理解了這個問題，HTML網頁佈局思想便已掌握了七七八八了。
問題
先看一段HTML代碼：
<!DOCTYPE html>
<html>
<body>
<h1>這是一個標題</h1>
<div class="wrapper">
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
</div>
</body>
</html>
因為p標簽預設是塊級元素，寬度預設會占滿父容器的100%，所以這個代碼預設展現出來的樣式是這樣的：
問題與這個示例有關，是這樣的：如何將三行文本“這是一個段落”合併到一行，從左向右排行顯示，且不用移除<p>標簽？
最簡單的解決方案只需要加一行CSS樣式代碼：
.wrapper p {
display: inline;
}
運行效果如下所示：
為什麼簡單加一個inline樣式就可以解決問題？
早期網頁為了從向至下流式展示內容，根據需要將標簽元素預設分為了兩類：
- 塊級元素
- 行內元素
塊級元素預設占據父容器的100%寬度，同時可以有高度，在不指定高度的時候，高度由子元素堆積決定。例如div、p、h1~h6等標簽，凡是預設在網頁中占據全部頁面寬度的元素，都是塊級元素。
而行內元素用於在一行內從左向右展示小內容，行內元素預設只有寬度，沒有高度，並且它們的寬度也是由它們本身的內容所決定的。例如a、br、b、em、img、sub、sup、strong等標簽，凡是預設不占據100%父容器寬度的元素，都可以視為行內元素。如果想給行內元素指定高度，可以在父容器上給行元素設置line-height樣式。
這兩類元素的作用，就是合起來展示一個從上至下依次展示、每行從左至右依次排列的流佈局，如下所示。
回頭看我們的示例，p標簽預設是塊級標簽，它在渲染時要占滿頁面容器的100%寬度，所以預設效果三行文本“這是一個段落”是從上向下依次排列的。
當我們通過類選擇器+標簽選擇器（.wrapper p），修改了所有p標簽的display樣式後，即將display樣式設置為inline，這時候這個頁面內的所有p標簽已經不是塊級元素了，都變成了行內元素。
HTML元素是什麼塊級元素，還是行內元素，本質上是由它們攜帶的預設的CSS樣式決定的，也就是由display等於block或inline決定的，等於block就是塊級元素，等於inline就是行內元素。因為CSS可以控制一切HTML元素的樣式，事實上我們甚至可以將任何一個HTML元素修改為其他元素————當然如果真修改的話，這裡還涉及元素屬性的問題，在這裡我們只談樣式。HTML元素預設攜帶的樣式是由其名稱決定的，所有元素的預設樣式都是可以通過CSS代碼修改的。
當給p標簽設置了display樣式為inline以後，這時候p標簽的行為與span標簽類似了，於是三行文本“這是一個段落”便是從左向右，在一行內展示了，如果一行展示不了，內容還會自動換行，就像其他行內元素所表示出來的行為那樣。
由inline-block決定的行內塊級元素
隨著網頁佈局複雜度的提升，後來又出現了inline-block樣式值，我們可以修改示例，看一看將display修改為inline-block之後的效果，如下所示。
效果與修改為inline是相似的，在這個示例中看不出什麼差別。事實上inline-blcok代表行內的塊級元素，這樣的元素既可以在一行之內從左向右自動依次排列，可以擁有自己的高度，又可以作為一個局部的小容器，再容納其他子元素。
inline-blcok樣式的出現，代表CSS在網頁佈局方面已經沒有什麼能力短板了，只有網頁設計師想不到的，沒有CSS實現的佈局。
flex佈局
但CSS的網頁佈局能力發展到這裡並沒有停止，後來為了更好了處理父容器與子元素的組合樣式，flex佈局被髮明出來了。flex佈局能夠實現的效果，用以往的CSS也可以實現，但用flex佈局的方法實現，代碼會更簡潔、邏輯會更加清晰、頁面的擴展性也更好。
下麵作者仍然拿上面的示例改造，如果不設置display為inline或inline-block，使用flex佈局怎麼達到同樣的效果呢？也是只添加一行CSS代碼就足夠了，如下所示。
<!DOCTYPE html>
<html>
<body>
<style>
.wrapper {
display: flex;
}
</style>
<h1>這是一個標題</h1>
<div class="wrapper">
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
</div>
</body>
</html>
運行效果如下所示：
效果是一樣的。
將display設置為flex就代表了啟用flex佈局。因為預設情況下flex-direction等於row，子元素會像行內元素那樣從左向右排行，所以只寫一行display等於flex樣式代碼就可以了。
flex佈局能力很強大，它不僅可以處理從左向右的橫向佈局，還可以處理從上向下的縱向佈局，兩個方向的佈局使用的是同一套樣式語義。
很多人都覺得這套語義記了又忘，實在很難記住，即使是富有經驗的網頁設計師在許久不手寫CSS代碼之後，也需要藉助工具才可以將樣式代碼寫對。針對開發者的這個痛點，新版本的Chrome瀏覽器現在提供了這樣的一個flex佈局輔助設計功能，如下所示，當我們給元素添加了display等於flex的樣式代碼後，後面會出現一個功能按鈕，點擊它，會展開一個flex佈局互動小面板。點擊這個面板上具體的排列項，相應的樣式代碼即會自動生成。
以後不用再記那些難記的樣式名稱了，有需要的時候調出這個flex佈局互動小面板，動手你發財的小手點一點，所有佈局代碼都能搞定了。
小結
HTML開發主要有兩種佈局思想：傳統div流式佈局和flex佈局。
還有一種全頁面都使用絕對值定位的佈局思想，這種佈局思想只適用於Web管理後臺或工具Web項目等開發場景，對於面向C端用戶的場景是不適用的。HTML網頁的根本設計哲學是流式佈局————整體上從上向下、行內從左向右的流式佈局，這種佈局可以讓HTML內容可以一邊載入一邊渲染與展示，這是一種很好的設計哲學，不要輕易捨棄這種哲學。
flex佈局本質上繼承了流式佈局的思想，它與流式佈局並不衝突，只是豐富了CSS在父容器子元素組合關係佈局上的能力。在網頁設計中，現在普遍優先使用flex佈局，用最簡單的CSS代碼達到設計的需求。在具體設計時，配合使用Chrome開發者工具中的flex佈局小面板，寫起flex佈局代碼也很容易。
著作權歸LIYI所有
基於CC BY-SA 4.0協議
原文鏈接：https://yishulun.com/posts/2022/34.html
