Move yoga docs into docs folder on master branch
Summary: Move yoga docs into master branch so that pull requests are able to include doc updates as part of other changes. Reviewed By: JoelMarcey Differential Revision: D4365700 fbshipit-source-id: 2f46a88974104c454c00bcdf1257abb5c4075a68
This commit is contained in:
Emil Sjolander
committed by
Facebook Github Bot
Facebook Github Bot
parent
cd78291de5
commit
f2080e520f
38
docs/_docs/flexbox/absolute-position.md
Normal file
38
docs/_docs/flexbox/absolute-position.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
docid: absolute-position
|
||||
title: Absolute positioning
|
||||
layout: docs
|
||||
permalink: /docs/absolute-position/
|
||||
---
|
||||
|
||||
The `Position` property tells Flexbox how you want your item to be positioned within its parent. There are 2 options:
|
||||
|
||||
* `Relative` (default)
|
||||
* `Absolute`
|
||||
|
||||
An item marked with `Position = Absolute` is positioned absolutely in regards to its parent. This is done through 6 properties:
|
||||
|
||||
* `Left` - controls the distance a child's left edge is from the parent's left edge
|
||||
* `Top` - controls the distance a child's top edge is from the parent's top edge
|
||||
* `Right` - controls the distance a child's right edge is from the parent's right edge
|
||||
* `Bottom` - controls the distance a child's bottom edge is from the parent's bottom edge
|
||||
* `Start` - controls the distance a child's start edge is from the parent's start edge
|
||||
* `End` - controls the distance a child's end edge is from the parent's end edge
|
||||
|
||||
Using these options you can control the size and position of an absolute item within its parent. Because absolutely positioned children don't effect their siblings layout `Position = Absolute` can be used to create overlays and stack children in the Z axis.
|
||||
|
||||
#### Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; left: 0px; top: 0px; position: absolute;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; left: 10px; top: 10px; bottom: 10px; right: 10px; position: absolute;"></div>
|
||||
</div>
|
||||
</div>
|
||||
92
docs/_docs/flexbox/alignment.md
Normal file
92
docs/_docs/flexbox/alignment.md
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
docid: alignment
|
||||
title: Alignment
|
||||
layout: docs
|
||||
permalink: /docs/alignment/
|
||||
---
|
||||
|
||||
### AlignItems
|
||||
|
||||
The `AlignItems` property describes how to align children along the cross axis of their container. `AlignItems` is very similar to `JustifyContent` but instead of applying to the main axis, it applies to the cross axis. There are 4 options for `AlignItems`:
|
||||
|
||||
* `Stretch` (default)
|
||||
* `FlexStart`
|
||||
* `FlexEnd`
|
||||
* `Center`
|
||||
|
||||
The only non-obvious option of the four is `Stretch`. With `AlignItems = Stretch` you instruct children to match the size of their container in the cross axis.
|
||||
|
||||
#### AlignItems = Stretch
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = FlexStart
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-start;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = FlexEnd
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = Center
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: center;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### AlignSelf
|
||||
|
||||
The `AlignSelf` property has the same options and effect as `AlignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent.
|
||||
|
||||
This property overrides any option set by the parent via the `AlignItems` property.
|
||||
|
||||
#### AlignItems = FlexEnd; AlignSelf = FlexStart;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; align-self: flex-start;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### AlignContent
|
||||
|
||||
The `AlignContent` property is used to control how multiple lines of content are aligned within a container which uses `FlexWrap = wrap`. There are 6 options:
|
||||
|
||||
* `FlexStart` (default)
|
||||
* `FlexEnd`
|
||||
* `Center`
|
||||
* `Stretch`
|
||||
* `SpaceBetween`
|
||||
* `SpaceAround`
|
||||
|
||||
#### AlignContent = FlexEnd
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px; flex-wrap: wrap; height: 300px; align-content: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
47
docs/_docs/flexbox/flex-direction.md
Normal file
47
docs/_docs/flexbox/flex-direction.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
docid: flex-direction
|
||||
title: Flex direction
|
||||
layout: docs
|
||||
permalink: /docs/flex-direction/
|
||||
---
|
||||
|
||||
The `FlexDirection` property controls the direction in which children are laid out. There are 4 options, of which 2 are commonly used:
|
||||
|
||||
* `Column` (default)
|
||||
* `Row`
|
||||
* `ColumnReverse`
|
||||
* `RowReverse`
|
||||
|
||||
The `Column` option stacks children horizontally from top to bottom, and the `Row` option stacks children from left to right. The `Reverse` variants of the options reverse the order. If your layout supports right-to-left direction, Yoga will automatically toggle between `Row` and `RowReverse` as necessary.
|
||||
|
||||
`FlexDirection` introduces another important aspect of Flexbox, the main and cross axes. This is important as other properties will reference which axis they operate on. Simply put, the main axis follows the `FlexDirection` and the cross axis crosses the main axis at a 90 degree angle.
|
||||
|
||||
#### FlexDirection = Row
|
||||
|
||||
In this example the main axis goes from the left to the right. The cross axis goes from the top to the bottom.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### FlexDirection = Column
|
||||
|
||||
In this example the main axis goes from the top to the bottom. The cross axis goes from the left to the right.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
39
docs/_docs/flexbox/flex-wrap.md
Normal file
39
docs/_docs/flexbox/flex-wrap.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
docid: flex-wrap
|
||||
title: Flex wrap
|
||||
layout: docs
|
||||
permalink: /docs/flex-wrap/
|
||||
---
|
||||
|
||||
The `FlexWrap` property is set on containers and controls what happens when children overflow the size of the container along the main axis. There are 2 options:
|
||||
|
||||
* `Nowrap` (default)
|
||||
* `Wrap`
|
||||
|
||||
If a container specifies `FlexWrap = Wrap` then its children will wrap to the next line instead of overflowing. The next line will have the same `FlexDirection` as the first line and will appear next to the first line along the cross axis -- below it if using `FlexDirection = Column` and to the right if using `FlexDirection = Row`.
|
||||
|
||||
#### FlexWrap = Nowrap
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### FlexWrap = Wrap
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px; flex-wrap: wrap;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
100
docs/_docs/flexbox/flex.md
Normal file
100
docs/_docs/flexbox/flex.md
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
docid: flex
|
||||
title: Flex
|
||||
layout: docs
|
||||
permalink: /docs/flex/
|
||||
---
|
||||
|
||||
### FlexGrow
|
||||
|
||||
The `FlexGrow` property describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the `FlexGrow` values specified by its children.
|
||||
|
||||
`FlexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the child's `FlexGrow` value.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 2;">
|
||||
<span><span>FlexGrow = 2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### FlexShrink
|
||||
|
||||
The `FlexShrink` property describes how to shrink children along the main axis in the case that the total size of the children overflow the size of the container on the main axis.
|
||||
|
||||
`FlexShrink` is very similar to `FlexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
|
||||
|
||||
`FlexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the child's `FlexShrink` value.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 2;">
|
||||
<span><span>FlexShrink = 2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### FlexBasis
|
||||
|
||||
The `FlexBasis` property is an axis-independent way of providing the default size of an item on the main axis. Setting the `FlexBasis` of a child is similar to setting the `Width` of that child if its parent is a container with `FlexDirection = row` or setting the `Height` of a child if its parent is a container with `FlexDirection = column`. The `FlexBasis` of an item is the default size of that item, the size of the item before any `FlexGrow` and `FlexShrink` calculations are performed.
|
||||
61
docs/_docs/flexbox/justify-content.md
Normal file
61
docs/_docs/flexbox/justify-content.md
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
docid: justify-content
|
||||
title: Justify content
|
||||
layout: docs
|
||||
permalink: /docs/justify-content/
|
||||
---
|
||||
|
||||
The `JustifyContent` property describes how to align children within the main axis of a container. For example, you can use this property to center a child horizontally within a container with `FlexDirection = Row` or vertically within a container with `FlexDirection = Column`.
|
||||
|
||||
`JustifyContent` accepts 1 of the following 5 options:
|
||||
|
||||
* `FlexStart` (default)
|
||||
* `FlexEnd`
|
||||
* `Center`
|
||||
* `SpaceBetween`
|
||||
* `SpaceAround`
|
||||
|
||||
#### JustifyContent = FlexStart
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = FlexEnd
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = Center
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: center;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = SpaceBetween
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: space-between;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = SpaceAround
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: space-around;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
58
docs/_docs/flexbox/margin-padding-border.md
Normal file
58
docs/_docs/flexbox/margin-padding-border.md
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
docid: margin-padding-border
|
||||
title: Margin, Padding, Border
|
||||
layout: docs
|
||||
permalink: /docs/margin-padding-border/
|
||||
---
|
||||
|
||||
`Margin`, `Padding` are similar but have some important differences. By applying `Margin` to an item you specify the offset a certain edge of the item should have from it's closest sibling or parent. With `Padding` on the other hand you specify the offset children should have from a certain edge on the parent. `Border` behaves nearly identically to `Padding` and is only separate from `Padding` to make it easier to implement border effect such as color. In the below illustrations the green box is a child of the dark gray box.
|
||||
|
||||
#### MarginStart = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; margin-left: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### MarginEnd = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; margin-right: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### MarginAll = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; margin: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### PaddingAll = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; padding: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### BorderWidth = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; border-width: 50px; border-color: transparent;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
34
docs/_docs/flexbox/minmaxdimen.md
Normal file
34
docs/_docs/flexbox/minmaxdimen.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
docid: min-max-dimen
|
||||
title: Min & Max dimensions
|
||||
layout: docs
|
||||
permalink: /docs/min-max-dimen/
|
||||
---
|
||||
|
||||
Using `MinWidth`, `MinHeight`, `MaxWidth`, and `MaxHeight` gives you increased control over the final size of items in a layout. By mixing these properties with `FlexGrow`, `FlexShrink`, and `AlignItems = Stretch`, you are able to have items with dynamic size within a range which you control.
|
||||
|
||||
An example of when `Max` properties can be useful is if you are using `AlignItems = Stretch` but your know that your item won't look good after it increases past a certain point. In this case, your item will stretch to the size of its parent or until it is as big as specified in the `Max` property.
|
||||
|
||||
Same goes for the `Min` properties when using `FlexShrink`. For example, you may want children of a container to shrink to fit on one row, but if you specify a minimum width, they will break to the next line after a certain point (if you are using `FlexWrap = Wrap`).
|
||||
|
||||
Another case where `Min` and `Max` dimension constraints are useful is when using `AspectRatio`.
|
||||
|
||||
#### FlexGrow = 1; MaxWidth = 200;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1; max-width: 200px;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = Stretch; MaxHeight: 100;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; max-height: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user