布局基礎

默認每個View進行垂直布局。每個view占據一行。

flex布局（設置display=flex）

         平面布局有一個主軸和交叉軸（類似于平面坐標中的X軸和 Y軸）

         默認X軸為主軸 Y軸為交叉軸

         flex容器屬性：針對于容器內的容器

                   flex-direction排列方向

                            row(默認)         column

                   flex-wrap元素換行問題

                            nowrap（不換行）         wrap(換行)

                            wrap-reverse換行反轉（多的一行在上面）

                   flex-flow上面兩個的簡寫

                            先定義方向  再定義換行

                   justify-content主軸的對齊元素

                            center(沿主軸居中對齊)

                            flex-start（主軸左邊、默認方式）      flex-end（主軸右邊）

                            space-around（各個元素平分主軸空間）

                            space-between元素兩端對齊 中間間隔相同

                   align-items交叉軸的對齊方式

                            flex-start  flex-end

                            center

                            stretch（在元素沒有設置高度時，占滿整個容器的高度）

                            baseline以元素中的文字的底線進行對齊

         flex元素屬性 針對于容器內的元素

                   flex-grow有多余空間時，元素的放大比例

                            設置多個元素之間的比例，按照比例瓜分剩余空間

                   flex-shrink空間不足時，元素的縮小比例

                            默認為1，表示空間不足時，所有元素等比縮小

                            某元素設置為0時，表示不縮小

                            值越大，縮小比例越大。

                   flex-basis元素在主軸上占據的空間

                            rpx可能會不生效

                   flex是上面三者的簡稱

                                     放大 縮小 空間

                   order元素排列順序

                            根據元素個數，數越小越靠前

                   align-self元素自身的定義方式

                            利于定義某些特殊元素的布局

相對定位

         相對于自身進行定位，參照物是自己

絕對定位

是相對于離它最近的已經定位的父級元素進行定位的。

如果所有父級都沒有定位，則相對于整個窗口定位。