Skip to content

Commit 3ecb767

Browse files
committed
Update README.md
1 parent b06718f commit 3ecb767

File tree

1 file changed

+15
-8
lines changed

1 file changed

+15
-8
lines changed

README.md

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Flexbox is an incredible improvement over UIStackView. It is simpler to use, muc
3636
* [Creation, modification and definition of flexbox containers](#create_modify_define_containers)
3737
* [Flexbox containers properties](#containers_properties)
3838
* [Flexbox items properties](#intems_properties)
39-
* [Absolute positioning](#absolute_positioning)
39+
* [Positioning](#positioning)
4040
* [Adjusting the size](#adjusting_size)
4141
* [Width, height and size](#width_height_size)
4242
* [minWidth, maxWidth, minHeight, maxHeight](#minmax_width_height_size)
@@ -778,25 +778,32 @@ Item natural size, considering only properties of the view itself. Independent o
778778

779779
<br>
780780

781-
<a name="absolute_positioning"></a>
782-
## 4. Absolute positioning
781+
<a name="positioning"></a>
782+
## 4. Positioning
783783
- Applies to: `flex items`
784784
- Parameter: CGFloat
785785

786786
**Method:**
787787

788788
* **`position(_: Position)`**
789789
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.
792793

793794
###### Usage examples:
794795
```swift
796+
view.flex.position(.relative).top(10).left(10).size(50)
797+
795798
view.flex.position(.absolute).top(10).left(10).size(50)
796799
```
797800

798801
### top(), bottom(), left(), right(), start(), end(), vertically(), horizontally(), all()
799-
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:
800807

801808
**Methods:**
802809

@@ -819,10 +826,10 @@ Controls the distance child’s left and right edges from the parent’s edges.
819826
* **`all(: CGFloat)`** / **`all(: FPercent)`**:
820827
Controls the distance child’s edges from the parent’s edges. Equal to `top().bottom().left().right()`.
821828

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.
823-
824829
###### Usage examples:
825830
```swift
831+
view.flex.position(.relative).top(10).right(10).width(100).height(50)
832+
826833
view.flex.position(.absolute).top(10).right(10).width(100).height(50)
827834
view.flex.position(.absolute).left(20%).right(20%)
828835
```

0 commit comments

Comments
 (0)