You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -778,25 +778,32 @@ Item natural size, considering only properties of the view itself. Independent o
778
778
779
779
<br>
780
780
781
-
<aname="absolute_positioning"></a>
782
-
## 4. Absolute positioning
781
+
<aname="positioning"></a>
782
+
## 4. Positioning
783
783
- Applies to: `flex items`
784
784
- Parameter: CGFloat
785
785
786
786
**Method:**
787
787
788
788
***`position(_: Position)`**
789
789
The position property tells Flexbox how you want your item to be positioned within its parent. Position values:
790
-
***`relative (default)`**
791
-
***`absolute`**: The view is positioned using properties: top(), bottom(), left(), right(), start(), end().
790
+
***`relative (default)`** The view is positioned using Insets properties (top, bottom, left, right, start, end) from its normal position within its flex container and will take up space within the flex container. This node will always form a containing block.
791
+
***`absolute`**: The view is removed from the flex container's flow and is positioned using Insets properties (top, bottom, left, right, start, end). Insets will offset the node from its containing block.
792
+
***`static`**: The view ignores insets and will not form a containing block.
A flex item which is `position` is set to `.absolute` is positioned absolutely in regards to its parent. This is done through the following methods:
802
+
A flex item with position set to .relative is positioned relative to its normal position within its flex container. Only one property can be applied in each direction, either vertical or horizontal. If both `top` and `bottom` properties are set, `top` takes precedence. If both `left` and `right` properties are set, `left` takes precedence.
803
+
804
+
A flex item with position set to .absolute is positioned absolutely with respect to its containing block. Using these properties you can control the size and position of an absolute item within its parent. Because absolutely positioned children don’t affect their sibling's layout. Absolute position can be used to create overlays and stack children in the Z axis.
805
+
806
+
This is done through the following methods:
800
807
801
808
**Methods:**
802
809
@@ -819,10 +826,10 @@ Controls the distance child’s left and right edges from the parent’s edges.
819
826
***`all(: CGFloat)`** / **`all(: FPercent)`**:
820
827
Controls the distance child’s edges from the parent’s edges. Equal to `top().bottom().left().right()`.
821
828
822
-
Using these properties you can control the size and position of an absolute item within its parent. Because absolutely positioned children don’t affect their sibling's layout. Absolute position can be used to create overlays and stack children in the Z axis.
Set the top and bottom edges distance from the container edges in pixels.
708
-
This method is valid only when the item position is absolute (`view.flex.position(.absolute)`)
710
+
This method is valid only when the item position is absolute or relative. It is not valid when the position is static.
711
+
For relative position, the bottom edge will be ignored.
709
712
*/
710
713
@discardableResult
711
714
publicfunc vertically(_ value:CGFloat)->Flex{
@@ -716,7 +719,8 @@ public final class Flex {
716
719
717
720
/**
718
721
Set the top and bottom edges distance from the container edges in percentage of its container height.
719
-
This method is valid only when the item position is absolute (`view.flex.position(.absolute)`)
722
+
This method is valid only when the item position is absolute or relative. It is not valid when the position is static.
723
+
For relative position, the bottom edge will be ignored.
720
724
*/
721
725
@discardableResult
722
726
publicfunc vertically(_ percent:FPercent)->Flex{
@@ -727,7 +731,8 @@ public final class Flex {
727
731
728
732
/**
729
733
Set all edges distance from the container edges in pixels.
730
-
This method is valid only when the item position is absolute (`view.flex.position(.absolute)`)
734
+
This method is valid only when the item position is absolute or relative. It is not valid when the position is static.
735
+
For relative position, the bottom and right edges will be ignored.
731
736
*/
732
737
@discardableResult
733
738
publicfunc all(_ value:CGFloat)->Flex{
@@ -740,7 +745,8 @@ public final class Flex {
740
745
741
746
/**
742
747
Set all edges distance from the container edges in percentage of its container size.
743
-
This method is valid only when the item position is absolute (`view.flex.position(.absolute)`)
748
+
This method is valid only when the item position is absolute or relative. It is not valid when the position is static.
749
+
For relative position, the bottom and right edges will be ignored.
744
750
*/
745
751
@discardableResult
746
752
publicfunc all(_ percent:FPercent)->Flex{
@@ -1424,10 +1430,12 @@ public final class Flex {
1424
1430
/**
1425
1431
*/
1426
1432
publicenumPosition{
1427
-
/// Default value.
1433
+
/// Default value. Positioned according to the flex container's flow. The item is positioned using Insets properties (top, bottom, left, right, start, end) from its normal position within its flex container and will take up space within the flex container. This node will always form a containing block.
1428
1434
case relative
1429
-
/// Positioned absolutely in regards to its container. The item is positionned using properties top, bottom, left, right, start, end.
1435
+
/// Positioned absolutely, removed from the flex container's flow. The item is positioned using Insets properties (top, bottom, left, right, start, end). Insets will offset the node from its containing block.
1430
1436
case absolute
1437
+
/// Positioned like relative but ignores insets and will not form a containing block.
0 commit comments