Skip to content
This repository has been archived by the owner on Sep 11, 2021. It is now read-only.

Commit

Permalink
Adds gif files for children attributes.
Browse files Browse the repository at this point in the history
  • Loading branch information
thagikura committed Jun 13, 2016
1 parent 711f96f commit 98d24c9
Show file tree
Hide file tree
Showing 9 changed files with 17 additions and 1 deletion.
18 changes: 17 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,16 +123,22 @@ Also you can specify the following attributes for the children of a FlexboxLayou
By default, children are displayed and laid out in the same order as they appear in the
layout XML. If not specified, `1` is set as a default value.

![Order explanation](/assets/layout_order.gif)

* layout_flexGrow (float)
* This attribute determines how much this child will grow if positive free space is
distributed relative to the rest of other flex items included in the same flex line.
If not specified, `0` is set as a default value.

![Flex Grow explanation](/assets/layout_flexGrow.gif)

* layout_flexShrink (float)
* This attribute determines how much this child will shrink if negative free space is
distributed relative to the rest of other flex items included in the same flex line.
If not specified, `1` is set as a default value.

![Flex Shrink explanation](/assets/layout_flexShrink.gif)

* layout_alignSelf
* This attribute determines the alignment along the cross axis (perpendicular to the
main axis). The alignment in the same direction can be determined by the
Expand All @@ -145,6 +151,8 @@ Also you can specify the following attributes for the children of a FlexboxLayou
* baseline
* stretch

![Align Self explanation](/assets/layout_alignSelf.gif)

* layout_flexBasisPercent (fraction)
* The initial flex item length in a fraction format relative to its parent.
The initial main size of this child view is trying to be expanded as the specified
Expand All @@ -154,20 +162,26 @@ Also you can specify the following attributes for the children of a FlexboxLayou
This attribute is only effective when the parent's length is definite (MeasureSpec mode is
`MeasureSpec.EXACTLY`). The default value is `-1`, which means not set.

![Flex basis percent explanation](/assets/layout_flexBasisPercent.gif)

* layout_minWidth / layout_minHeight (dimension)
* These attributes impose minimum size constraints for the children of FlexboxLayout.
A child view won't be shrank less than the value of these attributes (varies based on the
`flexDirection` attribute as to which attribute imposes the size constraint along the
main axis) regardless of the `layout_flexShrink` attribute.

![Min width explanation](/assets/layout_minWidth.gif)

* layout_maxWidth / layout_maxHeight (dimension)
* These attributes impose maximum size constraints for the children of FlexboxLayout.
A child view won't be expanded more than the value of these attributes (varies based on the
`flexDirection` attribute as to which attribute imposes the size constraint along the
main axis) regardless of the `layout_flexGrow` attribute.

![Max width explanation](/assets/layout_maxWidth.gif)

* layout_wrapBefore (boolean)
* This attribute forces a flex line wrapping, the default value is `false`.
* This attribute forces a flex line wrapping, the default value is `false`.
i.e. if this is set to `true` for a
flex item, the item will become the first item of a flex line. (A wrapping happens
regardless of the flex items being processed in the the previous flex line)
Expand All @@ -177,6 +191,8 @@ Also you can specify the following attributes for the children of a FlexboxLayou
the layouts when building a grid like layout or for a situation where developers want
to put a new flex line to make a semantic difference from the previous one, etc.

![Wrap before explanation](/assets/layout_wrapBefore.gif)

## Known differences from the original CSS specification
This library tries to achieve the same capabilities of the original
[Flexible Box specification](https://www.w3.org/TR/css-flexbox-1) as much as possible,
Expand Down
Binary file added assets/layout_alignSelf.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/layout_flexBasisPercent.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/layout_flexGrow.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/layout_flexShrink.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/layout_maxWidth.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/layout_minWidth.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/layout_order.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/layout_wrapBefore.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 98d24c9

Please sign in to comment.