布局屬性 （Layout Properties）
每個包含Rect Transform的UI元素都包含有布局屬性（Layout Properties），其具體包含六條屬性：
1.Min Width
2.Min Height
3.Preferred Width
4.Preferred Height
5.Flexible Width
6.Flexible Height
可以在Inspector面板查看（僅有Rect Transform的UI元素不顯示）
布局屬性的作用
每個UI元素都有Rect Transform組件，UI元素的的大小、位置等信息是由這個組件確定的。看這六條布局屬性的名字，也能猜出布局屬性一定也和UI元素的大小（寬高）有關。 其實它也是用來設置UI元素大小的，只不過默認狀態下它還不起任何作用（看到后面就知道，它起作用的時候，也和RectTransform起的作用不同）。默認狀態下，這六條屬性只是純粹的文字信息，並不會對具有這些信息的UI元素的位置和大小等產生實際影響。實際上，這六條屬性只是一個輔助作用，我們可以通過某些中介（具體后面會說明）根據這六條屬性設置的值去自動的修改Rect Transform組件中的width和height屬性，以達到修改UI元素大小的效果。
如何設置這六條屬性呢？這六條屬性的默認值均為0，一些組件可以手動或自動的修改它們的值。譬如Text組件會根據文本內容的多少去設置，我們也可以通過Layout Element組件去手動的自定義這些屬性的值。
（新建的Text的布局屬性就不全為0） |
（layout Element可以隨意設置布局屬性的值，且優先級高於其他組件設置的值） |
如何讓布局屬性起作用，以及這六條屬性的具體含義，請接着往下看。
初步了解Horizontal Layout Group
Horizontal Layout Group組件可以讓所有子項UI元素自動橫向排列（一家人就是要整整齊齊）。
| 屬性 | 說明 |
| Padding | 子項與此容器邊緣的距離 |
| Spacing | 子項與子項之間的距離 |
| Child Alignment | 子項對齊方式，和word文檔里的對齊方式一個意思 |
| 其他屬性在下面詳細介紹 | |
一白實驗室
1.為了方便研究，我在這里創建了四個Image，將他們的位置隨意擺放，同時把它們設置為不同的顏色，並調整為如下結構
2.然后給RedImage，GreenImage，BlueImage都添加了LayoutElement組件，並設為下圖中的值
| RedImage | GreenImage | BlueImage |
 |
 |
 |
3.然后給ParentImage添加一個Horizontal Layout Group組件，在添加上該組件的瞬間，它的三個子項整整齊齊的排成了一排，同時三個子項的PosX和PosY屬性變為不可修改狀態。說明Horizontal Layout Group組件可以控制所有子項的位置，並讓所有子項整齊排列。
 |
 |
4.當我們隨意手動修改ParentImage的大小時，發現三個子項的大小並不會發生任何變化，此時布局屬性（Layout Properties）似乎還沒啟任何作用。
5.勾選ParentImage的Horizontal Layout Group組件的Control Child Size屬性，再次隨意調整ParentImage的大小，發現子項隨其大小變化而變化。仔細觀察在變化過程中，ParentImage的Width屬性和三個子項的Width屬性發現有如下規律（以下標藍色的文字表示布局屬性Layout Properties）：
| 調整ParentImage（在這里可以看作一個容器）示例圖 |  |
| 1. 水平方向：當容器Width小於等於所有子項Min Width之和時，三個子項的Width都保持Min Width不變 垂直方向：當容器Height小於等於某個子項的Min Height時，該子項的Heighht保持Min Height不變
所以Min Width/Height的含義就是最小值，從該屬性名上也能看出。 |
 |
| 2. 水平方向： 當容器Width大於所有子項的Min Width之和並小於等於所有子項的Preferred Width之和時。暫且把容器width減去所有子項的Min Width之和稱為多余空間， 所有子項將按”Preferred減去Min“（要求Preferred要大於Min ）的比值來分配多余空間，直至所有子項同時達到Preferred Width 垂直方向： 當容器Height大於某個子項的Min Height時，該子項將填充該子項所在列的多余空間，直至該子項的Height達到Prefereed Height
水平方向這么說可能看不懂了，舉個具體例子： 已知三個子項的Min Width均為100（見右圖一），容器當前width為600 RedImage的Preferred Width - Min Width為負數，所以保持最小值Min Width不變。 GreenImage的Preferred Width - Min Width為100 BlueImage的Preferred Width - Min Width 為400 所以要把容器的多余空間600-100x3=300按100:400即1：4的比例分給GreenImage和BlueImage 所以GreenImage的Width = 100+300/（1+4）*1 = 160 BlueImage的Widht = 100+300/（1+4）*4 = 340 所以三個子項的Width分別為100，160，340和實際相符。 |
（圖一）
|
| 3. 水平方向： 當容器width大於所有子項的Preferred Width之和（如果Preferred 小於 Min 則用Min代替）時。暫且把容器Width減去所有子項的Preferred width之和稱為剩余空間 所有子項將按Flexible Width的比例來分配剩余空間
舉個例子： 容器width為900，剩余空間則為900-100-200-500=100 RedImage的Flexible默認為0 GreenImage的Flexible的值為3 BlueImage的Flexible的值為7 所以三個子項獲得的剩余空間為0，30，70 所以三個子項的width分別為：100+0，200+30=230，500+70=570
垂直方向則是直接填充。 |
Horizontal Layout Group
| 屬性 | 說明 |
| Padding | 子項與此容器邊緣的距離 |
| Spacing | 子項與子項之間的距離 |
| Child Alignment | 子項對齊方式，和word文檔里的對齊方式一個意思 |
| Control Child Size | 控制所有子項的大小，勾選此項后，所有子項的Width、Height的屬性會變成不可手動修改的狀態。 所有子項的大小的設置會依據每個子項的布局屬性（Layout Properties）以及此掛載Horizontal Layout Group的物體的大小。 具體原則見上文 |
| Use Child Scale |
如果子項進行過縮放（scale屬性不為1），那么就按照縮放后的寬高進行排版。 若不勾選，則按照子項縮放前的寬高進行排版。 |
| Child Force Expand |
若沒有勾選Control Child Size，有幾個子項就將容器划分為幾等份，每個子項分別處在處在每一等份的開頭。 若勾選了Control Child Size，容器的多余空間會直接按照Flexible Witdh的比例進行分配（如果沒有設置Flexible的值，則用1）
|
如果更加仔細的觀察會發現：當添加上Horizontal Layout Group組件時，該物體的布局屬性Layout Properties的值會根據子物體的布局屬性進行自動的設置。
實際使用中應該不用過多糾結空間的分配是按照什么比例進行的，只需要記住什么情況下會調整子項的大小即可。這一篇寫得有點亂，等熟練掌握了再回過頭來整理。
參考文章：https://blog.csdn.net/qq_28849871/article/details/79528697