前端布局問題在工作中俯拾皆是，是時候花些時間上下求索一番。本文嘗試從標題布局、左右布局、均分布局、跟隨布局、父子寬度約束探究和空間無限縮小共六個案例練練解題思路和見招拆招。希望對你提高工作效率和技術(shù)水平有啟發(fā)。
㈠ 標題布局
題目：標題居中且超長打點，標題左右包含若干圖標。
解答：
⑴ 標題居中，必須控制左右距離相等，即典型的左中右結(jié)構(gòu)。
常見做法是使用絕對布局，標題左右設(shè)置相同邊距（margin 或 padding），左右圖標使用絕對布局（position: absolute）蓋在標題左右邊距上。需要注意的是標題容器需要設(shè)置為相對布局（position: relative），作為左右圖標的錨點。
更優(yōu)雅的做法是通過 flexbox 布局，左右固定寬度，剩余空間都是中間的，即彈性伸縮屬性設(shè)置為自動（flex: auto），等同于 flex: 1 1 auto。其中 flex-grow 為 1 意味著空間富余可以擴展，flex-shrink 為 1 意味著空間不夠可以收縮，flex-basis 為 auto 意味著使用 width 或 height 顯示設(shè)置的寬高（主軸方向橫向則取寬度，縱向則取高度），沒有設(shè)置則使用內(nèi)容的寬高。
⑵ 標題超長打點，需要設(shè)置不換行（white-space: nowrap）、溢出隱藏（overflow: hidden） 和文本溢出打點（text-overflow: ellipsis）。
⑶ 左右圖標布局，常見的做法準確計算邊距使得剛好左側(cè)左對齊，右側(cè)右對齊。但更優(yōu)雅的做法還是 flexbox 布局，把計算的事“甩”給彈性布局，直接左側(cè)主軸方向正方向（flex-direction: row，默認值），右側(cè)主軸方向反方向（flex-direction: row-reverse）。
㈡ 左右布局
題目：左側(cè)若干圖標從左到右依次排放，最后一個圖標靠最右側(cè)放置。
解答：
有三種解題方法，除了上面的絕對布局和彈性伸縮屬性設(shè)置為自動外，還更簡單的方案，就是在flexbox布局中設(shè)置左邊為自動（margin-left: auto）。
㈢ 均分布局
題目：不同內(nèi)容寬度的子元素均分空間（下圖綠藍紅為子元素，其中深色為內(nèi)容區(qū)，淺色為擴展富余空間）。
解答：
眾所周知，自動彈性伸縮（flex: auto）只能擴展富余空間而非整體空間，上題我們很容易且好像也只能做到如下效果：
均分空間做不到？答案必須是“No”。
flex: auto 全稱是 flex: 1 1 auto，其中最后一位是 flex-basis，即彈性基準大小，默認是內(nèi)容大小。那么內(nèi)容大小能不能設(shè)置為0？答案曰之“能”。直接上代碼：
㈣ 跟隨布局
題目：圖標始終緊緊跟隨在標題后面，當標題內(nèi)容超長時，圖標仍然顯示，標題文本可以超長打點。
解答：
這問題也太水了吧？整個標題設(shè)置為彈性布局，文本伸縮屬性使用默認值（flex: initial，即 flex: 0 1 auto，空間富余不伸展但空間不足要收縮），設(shè)置超長打點（overflow: hidden; text-overflow: ellipsis;），圖標放標題右側(cè)即可。
這里多說一句，細心的小伙伴發(fā)現(xiàn)，上面超長打點沒有設(shè)置不換行（white-space: nowrap）。
為啥超長了不是另起一行？因為div標簽?zāi)J塊布局（display: block），本身就是不換行的，如果布局屬性換成了彈性布局，則需要像標題布局一樣設(shè)置不換行。
等等，這道題“水”怎么說？
之所以有這道題，是因為我延用了 Android 的布局思維（我從 Android 轉(zhuǎn) Web 不久），標題跟隨不截斷在 App 中首頁和列表頁隨處可見，自然 Android 也需要實現(xiàn)該功能。
但 Android 里面如果要超長打點，就必須限定寬度，常規(guī)寫法是文本寬度為0，自適應(yīng)占用其他控件布局后剩下的富余空間（LinearLayout# layout_width: 0; layout_weight: 1; ），因為 Android 支持的布局限制，使得該題變得有點意思了。
如果帶入到前端，假設(shè)伸縮屬性只能設(shè)置為即伸展又收縮（flex: auto），如何實現(xiàn)標題跟隨不截斷？
先直接改下上面代碼看看具象效果。
那么，問題來了？在文本未超長時，圖標不跟隨了...
讓我們看看 Android 上面的效果，下面圖示紅框圈起來的 2 個區(qū)域，區(qū)域 1 和上面 Web 實現(xiàn)類似，文本控件寬度為 0 權(quán)重為 1（android:layout_width="0px" android:layout_weight="1"），在文本較短時直接擴展了富余空間撐大了，導(dǎo)致圖標右對齊而不是跟隨。
這里用到一個“小妙招”，文本控件屬性不變，但是文本和圖標控件再包一層橫向線性布局自適應(yīng)寬度（android:layout_width="wrap_content"），這樣就能確保文本較短時不會撐大。因為父控件為自適應(yīng)寬度，沒有額外的富余空間且最大空間受自己父控件約束，效果即區(qū)域 2。
上述思路來源于原美團同事袁件在 2015 年的分享，這個解題思路之所以念念不忘，主要是有點像腦筋急轉(zhuǎn)彎，記住了也就會了，要是硬想可能很難想出來。
當然了，一般這種情況通過自定義布局就能簡單實現(xiàn)，主旨就是先算其他控件大小，如果當前寬度過長則只占據(jù)剩下空間，否則正常自身寬度。
同樣方法照搬到 Web 是否可以？
讓我們來試試，文本控件自動伸縮，Android 設(shè)置屬性為 layout_width="0px" 和 layout_weight="1"，等同于 Web 設(shè)置為 flex: auto。在文本和圖標外包了一層自適應(yīng)寬度的橫向線性布局，Android 設(shè)置屬性為 layout_width="wrap_content"，等同于 Web 設(shè)置為（width: 100%; max-width: min-content; ）或（width: min-content; max-width: 100%;），即寬度為內(nèi)容大小和父組件大小中最小值。
劃重點，通過同時設(shè)置 width 和 max-width 使得寬度在短內(nèi)容時跟隨，在長內(nèi)容時打點，本身也是“小妙招”，正常很少兩個同時使用。認同的小伙伴有必要記一下。
為啥我繞這么大的圈子講一個 Web 上舍易求難的問題，主要是通過 Web 實踐檢驗已有的 Android 經(jīng)驗，邏輯大同小異必然實現(xiàn)殊途同歸，同時多場景對比，加強自己對彈性布局的理解。
㈣ 父子寬度約束探究
題目：父組件寬度固定（width: 200px），組件設(shè)置為彈性布局（display: flex），里面子組件是文本和圖標。
在文本長度超出時，組件寬度是超長的內(nèi)容寬度（下圖中標號 1）還是父組件寬度（下圖中標號 2）？
解答：
結(jié)論先行，實測答案時標號 2。
咋一看，彈性組件容器沒有設(shè)置寬度，感覺其寬度應(yīng)該就是內(nèi)容寬度，既然內(nèi)容超長，那么背景色肯定和內(nèi)容一樣。
既然和想的不一樣，查一下 CSS 官方文檔，width 不顯示設(shè)置時使用默認值 auto，auto 在文檔中的解釋是“瀏覽器將會為指定的元素計算并選擇一個寬度?！?/p>
不過感覺說了和沒說一樣，到底是怎么一個計算算法也沒有講。實測發(fā)現(xiàn) auto 對應(yīng)的是父組件大小，即背景色覆蓋區(qū)域只是父組件范圍。
那么如果我們要做到組件寬度是超長內(nèi)容寬度呢？
這是一道送分題，直接設(shè)置寬度為內(nèi)容大?。╳idth: min-content）即可。
不過我在實測中發(fā)現(xiàn)，還有另外一個方法，將父組件設(shè)置為彈性布局也能達到同樣效果。
邏輯上說，不顯示設(shè)置寬度則取默認值 auto，即父組件大小，父組件不管是否是彈性布局，大小已經(jīng)顯示指定了，但實際影響了組件寬度？至于為什么是這樣，現(xiàn)在的我的確不知道，問題留給未來的自己，或者屏幕前的你來回答。
㈤ 空間無限縮小
好奇心來自于看到官方文檔 《flex 布局的基本概念》中的“如果有太多元素超出容器，它們會溢出而不會換行?！?/p>
太多不是會壓縮么，對于彈性默認屬性（flex: initial，即 flex: 0 1 auto，不擴展只收縮），怎么會是溢出？
我自己復(fù)制黏貼了一堆文本，發(fā)現(xiàn)竟然真是溢出？如下圖。
給我整不會了...
后來在和同事永健的溝通下，得知當組件寬度被收縮到最小內(nèi)容大小時就不再收縮，文本本身大小即最小內(nèi)容大小，可以通過最小寬度（min-width）設(shè)置內(nèi)容大小。
至此，真相終于大白了。
順便吹毛求疵一下，官方文檔寫得還是不嚴謹，引起了不必要的誤解。
附 Web Demo Html 源碼：
<html>
<head>
<meta charset="utf-8">
<title>flex Demo</title>
<style type="text/css">
body {
font-size: 32px;
}
</style>
</head>
<body>
<!-- 標題欄布局 -->
<div
style="width: 640px; height: 100px; display: flex; align-items: center; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="width: 100px; display: flex; padding: 0 15px;">
<div> ?? </div>
</div>
<div style="flex: auto; margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
標題標題標題標題標題標題標題標題標題</div>
<div
style="width: 100px; display: flex; flex-direction: row-reverse; justify-content: space-between; padding: 0 15px;">
<div>...</div>
<div>??</div>
</div>
</div>
<!-- 絕對定位方式實現(xiàn)左中右布局 -->
<div
style="width: 640px; height: 100px; position: relative; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="width: 100px; height: 100px; position: absolute; top: 0; left: 0; background-color: #96D149;"></div>
<div style="height: 100px; padding: 0 100px; background-color: #5976B3;"></div>
<div style="width: 100px; height: 100px; position: absolute; top: 0; right: 0; background-color: #eb7b88;">
</div>
</div>
<!-- flex布局伸縮屬性設(shè)置為自動實現(xiàn)左中右布局 -->
<div
style="width: 640px; height: 100px; display: flex; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="width: 100px; background-color: #96D149;"></div>
<div style="flex: auto; background-color: #5976B3;"></div>
<div style="width: 100px; background-color: #eb7b88;">
</div>
</div>
<!-- ⑴ 絕對定位方式實現(xiàn)左右布局-->
<div
style="width: 640px; height: 100px; position: relative; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center;">??
</div>
<div style="width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center;">??
</div>
<div style="width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center;">??
</div>
<div
style="width: 100px; height: 100px; position: absolute; top: 0; right: 0; display: inline-block; line-height: 100px; text-align: center;">
??</div>
</div>
<!-- ⑵ flex布局伸縮屬性設(shè)置為自動實現(xiàn)左右布局-->
<div
style="width: 640px; height: 100px; display: flex; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center;">??
</div>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center;">??
</div>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center;">??
</div>
<!-- 空div延長可用空間使得最后一個元素靠右-->
<div style="flex: auto;"></div>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center;">
??</div>
</div>
<!-- ⑶ flex布局左邊距設(shè)置為自動實現(xiàn)左右布局-->
<div
style="width: 640px; height: 100px; display: flex; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center;">??</div>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center;">??</div>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center;">??</div>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center; margin-left: auto;">??</div>
</div>
<!-- 均分布局設(shè)置 flex: 1 0 0 實現(xiàn)不同內(nèi)容寬度子元素均分空間 -->
<div
style="width: 640px; height: 100px; display: flex; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="flex: 1 0 0; background-color: #96D149; margin: 5px;">
<div style="width: 50px; line-height: 90px; background-color: #729d39; text-align: center;">
1</div>
</div>
<div style="flex: 1 0 0; background-color: #5976B3; margin: 5px;">
<div style="width: 100px; line-height: 90px; background-color: #486092; text-align: center;">
2</div>
</div>
<div style="flex: 1 0 0; background-color: #eb7b88; margin: 5px;">
<div style="width: 150px; line-height: 90px; background-color: #a8545e; text-align: center;">
3</div>
</div>
</div>
<!-- 設(shè)置flex: auto 只能均分富余空間 -->
<div
style="width: 640px; height: 100px; display: flex; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="flex: auto; background-color: #96D149; margin: 5px;">
<div style="width: 50px; line-height: 90px; background-color: #729d39; text-align: center;">
1</div>
</div>
<div style="flex: auto; background-color: #5976B3; margin: 5px;">
<div style="width: 100px; line-height: 90px; background-color: #486092; text-align: center;">
2</div>
</div>
<div style="flex: auto; background-color: #eb7b88; margin: 5px;">
<div style="width: 150px; line-height: 90px; background-color: #a8545e; text-align: center;">
3</div>
</div>
</div>
<!-- 圖標跟隨且不截斷布局 flex: initial，即 flex: 0 1 auto -->
<div
style="width: 640px; height: 100px; display: flex; align-items: center; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<div style="flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; margin: 5px;">1234567890</div>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
<div
style="width: 640px; height: 100px; display: flex; align-items: center; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<span style="flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; margin-left: 10px;">
1234567890123456789012345678901234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
<!-- 圖標跟隨且不截斷布局：僅伸展不收縮（flex: auto） -->
<div
style="width: 640px; height: 100px; display: flex; align-items: center; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<span style="flex: auto; overflow: hidden; text-overflow: ellipsis; margin: 5px;">1234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
<div
style="width: 640px; height: 100px; display: flex; align-items: center; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<span style="flex: auto; overflow: hidden; text-overflow: ellipsis; margin-left: 10px;">
1234567890123456789012345678901234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
<!-- 圖標跟隨且不截斷布局：仿 Android 思路，除文本控件自動伸縮（layout_width="0px" layout_weight="1"）外，還在文本和圖標外包了一層自適應(yīng)寬度的橫向線性布局（layout_width="wrap_content"） -->
<div style="width: 640px; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<!-- 在文本和圖標外包了一層自適應(yīng)寬度的橫向線性布局（（width: 100%; max-width: min-content;） 或者 （width: min-content; max-width: 100%;）） -->
<!-- <div style="width: 100%; max-width: min-content; line-height: 100px; display: flex; align-items: center;"></div> -->
<div style="width: min-content; max-width: 100%; line-height: 100px; display: flex; align-items: center;">
<!-- 文本控件自動伸縮（flex: auto） -->
<span style="flex: auto; overflow: hidden; text-overflow: ellipsis; margin: 5px;">1234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
</div>
<div style="width: 640px; margin: 30px; border: 3px solid black; background-color: #fed9a1;">
<!-- 在文本和圖標外包了一層自適應(yīng)寬度的橫向線性布局（（width: 100%; max-width: min-content;） 或者 （width: min-content; max-width: 100%;）） -->
<!-- <div style="width: 100%; max-width: min-content; line-height: 100px; display: flex; align-items: center;"></div> -->
<div style="width: min-content; max-width: 100%; line-height: 100px; display: flex; align-items: center;">
<!-- 文本控件自動伸縮（flex: auto） -->
<span style="flex: auto; overflow: hidden; text-overflow: ellipsis; margin: 5px;">
1234567890123456789012345678901234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
</div>
<!-- 父子寬度約束探究：未顯示設(shè)置彈性布局寬度時，彈性布局寬度等于內(nèi)容寬度還是父組件寬度？-->
<!-- 父組件固定寬度 -->
<div
style="width: 200px; height: 100px; background-color: #fed9a1; border: 3px solid black; align-items: center; margin: 30px;">
<!-- 組件彈性布局顯示設(shè)置寬度為內(nèi)容寬度 -->
<div
style="display: flex; width: min-content; height: 100px; line-height: 100px; background-color: #F2DE5C; align-items: center;">
<!-- 子組件文案超長 -->
<span style="margin: 5px;">12345678901234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
</div>
<!-- 父組件固定寬度且設(shè)置為彈性容器 -->
<div
style="width: 200px; height: 100px; display: flex; background-color: #fed9a1; border: 3px solid black; align-items: center; margin: 30px;">
<!-- 組件彈性布局不顯示設(shè)置寬度 -->
<div style="display: flex; height: 100px; line-height: 100px; background-color: #F2DE5C; align-items: center;">
<!-- 子組件文案超長 -->
<span style="margin: 5px;">12345678901234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
</div>
<div
style="width: 200px; height: 100px; background-color: #fed9a1; border: 3px solid black; align-items: center; margin:30px">
<div style="display: flex; height: 100px; line-height: 100px; background-color: #F2DE5C; align-items: center;">
<span style="margin: 5px;">12345678901234567890</span>
<span>??</span>
<span style="margin: 5px;">??</span>
</div>
</div>
</body>
</html
附 Android Demo XML 源碼：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--整體顯示區(qū)域，縱向線性布局，相對于父控件水平居中-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="100px"
android:layout_gravity="center_horizontal">
<!--區(qū)域1短文本，僅文本控件自動伸縮（layout_width="0px" layout_weight="1"）-->
<LinearLayout
android:layout_width="640px"
android:layout_height="100px"
android:orientation="horizontal"
android:gravity="center_vertical"
android:background="@drawable/border_background">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:singleLine="true"
android:ellipsize="marquee"
android:text="1234567890"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="??"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:text="??"/>
</LinearLayout>
<!--區(qū)域1長文本，僅文本控件自動伸縮（layout_width="0px" layout_weight="1"）-->
<LinearLayout
android:layout_width="640px"
android:layout_height="100px"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_marginTop="30px"
android:background="@drawable/border_background">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:singleLine="true"
android:ellipsize="marquee"
android:text="1234567890123456789012345678901234567890"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="??"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:text="??"/>
</LinearLayout>
<!--區(qū)域2短文本，除文本控件自動伸縮外，還在文本和圖標外包了一層自適應(yīng)寬度的橫向線性布局（layout_width="wrap_content"）-->
<LinearLayout
android:layout_width="640px"
android:layout_height="100px"
android:orientation="horizontal"
android:layout_marginTop="100px"
android:background="@drawable/border_background">
<!--巧妙在于自適應(yīng)寬度的包裹，完美消除了權(quán)重撐大問題-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="100px"
android:orientation="horizontal"
android:gravity="center_vertical">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:singleLine="true"
android:ellipsize="marquee"
android:text="1234567890"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="??"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:text="??"/>
</LinearLayout>
</LinearLayout>
<!--區(qū)域2長文本，除文本控件自動伸縮外，還在文本和圖標外包了一層自適應(yīng)寬度的橫向線性布局（layout_width="wrap_content"）-->
<LinearLayout
android:layout_width="640px"
android:layout_height="100px"
android:orientation="horizontal"
android:layout_marginTop="30px"
android:background="@drawable/border_background">
<!--巧妙在于自適應(yīng)寬度的包裹，完美消除了權(quán)重撐大問題-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="100px"
android:orientation="horizontal"
android:gravity="center_vertical">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:ellipsize="marquee"
android:text="1234567890123456789012345678901234567890"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="??"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:text="??"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
