一搀庶、direction
- 1箫老、FlexDirection.Row 主軸為水平方向悦屏，子組件從起始端沿著水平方向開始排布
- 2绽族、FlexDirection.RowReverse：主軸為水平方向严肪，子組件從終點端沿著FlexDirection. Row相反的方向開始排布史煎。
- 3、FlexDirection.Column：主軸為垂直方向驳糯，子組件從起始端沿著垂直方向開始排布篇梭。
- 4、FlexDirection.ColumnReverse：主軸為垂直方向酝枢，子組件從終點端沿著FlexDirection. Column相反的方向開始排布恬偷。
Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
二、布局換行
- 1帘睦、FlexWrap. NoWrap（默認值）：不換行袍患。如果子組件的寬度總和大于父元素的寬度，則子組件會被壓縮寬度
- 2竣付、FlexWrap. Wrap：換行诡延，每一行子組件按照主軸方向排列
- 3、FlexWrap. WrapReverse：換行古胆，每一行子組件按照主軸反方向排列肆良。
Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
三、主軸對齊方式 -- 通過justifyContent參數(shù)設(shè)置在主軸方向的對齊方式
- 1逸绎、FlexAlign.Start（默認值）：子組件在主軸方向起始端對齊惹恃， 第一個子組件與父元素邊沿對齊，其他元素與前一個元素對齊棺牧。
- 2巫糙、FlexAlign.Center：子組件在主軸方向居中對齊
- 3、 FlexAlign.End：子組件在主軸方向終點端對齊, 最后一個子組件與父元素邊沿對齊陨帆，其他元素與后一個元素對齊曲秉。
- 4、FlexAlign.SpaceBetween：Flex主軸方向均勻分配彈性元素疲牵，相鄰子組件之間距離相同承二。第一個子組件和最后一個子組件與父元素邊沿對齊。
- 5纲爸、FlexAlign.SpaceAround：Flex主軸方向均勻分配彈性元素亥鸠，相鄰子組件之間距離相同。第一個子組件到主軸起始端的距離和最后一個子組件到主軸終點端的距離是相鄰元素之間距離的一半。
- 6负蚊、FlexAlign.SpaceEvenly：Flex主軸方向元素等間距布局神妹，相鄰子組件之間的間距、第一個子組件與主軸起始端的間距家妆、最后一個子組件到主軸終點端的間距均相等鸵荠。
四、容器組件設(shè)置交叉軸對齊--可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式伤极。
- 1蛹找、ItemAlign.Auto：使用Flex容器中默認配置
- 2、ItemAlign.Start：交叉軸方向首部對齊哨坪。
- 3庸疾、ItemAlign.Center：交叉軸方向居中對齊。
- 4当编、ItemAlign.End：交叉軸方向底部對齊届慈。
- 5、ItemAlign.Stretch：交叉軸方向拉伸填充忿偷，在未設(shè)置尺寸時金顿，拉伸到容器尺寸。
- 6牵舱、ItemAlign. Baseline：交叉軸方向文本基線對齊串绩。
五、子組件設(shè)置交叉軸對齊 --子組件的alignSelf屬性也可以設(shè)置子組件在父容器交叉軸的對齊格式芜壁，且會覆蓋Flex布局容器中alignItems配置
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器組件設(shè)置子組件居中
Text('alignSelf Start').width('25%').height(80)
.alignSelf(ItemAlign.Start)
.backgroundColor(0xF5DEB3)
Text('alignSelf Baseline')
.alignSelf(ItemAlign.Baseline)
.width('25%')
.height(80)
.backgroundColor(0xD2B48C)
Text('alignSelf Baseline').width('25%').height(100)
.backgroundColor(0xF5DEB3)
.alignSelf(ItemAlign.Baseline)
Text('no alignSelf').width('25%').height(100)
.backgroundColor(0xD2B48C)
Text('no alignSelf').width('25%').height(100)
.backgroundColor(0xF5DEB3)
}.width('90%').height(220).backgroundColor(0xAFEEEE)
六礁凡、內(nèi)容對齊--可以通過alignContent參數(shù)設(shè)置子組件各行在交叉軸剩余空間內(nèi)的對齊方式，只在多行的flex布局中生效
- 1慧妄、FlexAlign.Start：子組件各行與交叉軸起點對齊
- 2顷牌、FlexAlign.Center：子組件各行在交叉軸方向居中對齊。
- 3塞淹、FlexAlign.End：子組件各行與交叉軸終點對齊窟蓝。
- 4、FlexAlign.SpaceBetween：子組件各行與交叉軸兩端對齊饱普，各行間垂直間距平均分布运挫。
- 5、FlexAlign.SpaceAround：子組件各行間距相等套耕，是元素首尾行與交叉軸兩端距離的兩倍谁帕。
- 6、FlexAlign.SpaceEvenly: 子組件各行間距冯袍，子組件首尾行與交叉軸兩端距離都相等匈挖。
七碾牌、自適應(yīng)拉伸-- 在彈性布局父組件尺寸不夠大的時候，通過子組件的下面幾個屬性設(shè)置其在父容器的占比儡循，達到自適應(yīng)布局能力
- 1舶吗、flexBasis：設(shè)置子組件在父容器主軸方向上的基準尺寸。如果設(shè)置了該值择膝，則子項占用的空間為設(shè)置的值誓琼；如果沒設(shè)置該屬性，那子項的空間為width/height的值
- 2肴捉、flexGrow：設(shè)置父容器的剩余空間分配給此屬性所在組件的比例踊赠。用于“瓜分”父組件的剩余空間。
- 3每庆、flexShrink: 當父容器空間不足時，子組件的壓縮比例
demo
Flex({ direction: FlexDirection.Row }) {
Text('flexShrink(3)')
.fontSize(15)
.flexShrink(3)
.width(200)
.height(100)
.backgroundColor(0xF5DEB3)
Text('no flexShrink')
.width(200)
.height(100)
.backgroundColor(0xD2B48C)
Text('flexShrink(2)')
.flexShrink(2)
.width(200)
.height(100)
.backgroundColor(0xF5DEB3)
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
