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

61
docs/_docs/flexbox/justify-content.md Normal file
View 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>