DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Move yoga docs into docs folder on master branch

Browse Source 
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
2016-12-28 03:57:57 -08:00
committed by Facebook Github Bot
parent cd78291de5
commit f2080e520f
113 changed files with 5020 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
docs/_docs/flexbox/margin-padding-border.md Normal file
View 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>