2018-02-19 02:08:18 -08:00
<!DOCTYPE html> < html > < head > < meta charSet = "utf-8" / > < meta http-equiv = "x-ua-compatible" content = "ie=edge" / > < meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" / > < link rel = "preload" href = "/component---src-templates-without-playground-js-3d89dfacae25aea3ee72.js" as = "script" / > < link rel = "preload" href = "/path---contributing-writing-documentation-aa4f7b0d3118264eada8.js" as = "script" / > < link rel = "preload" href = "/app-d6f273557287938c9911.js" as = "script" / > < link rel = "preload" href = "/commons-c1c1180f734cb1baa282.js" as = "script" / > < title data-react-helmet = "true" > Yoga Layout | Writing Documentation< / title > < link data-react-helmet = "true" rel = "shortcut icon" type = "image/png" href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYwNDQ4NUY5MEI3MjExRTg5RkZCQ0EwNjc2MDFENkQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYwNDQ4NUZBMEI3MjExRTg5RkZCQ0EwNjc2MDFENkQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjA0NDg1RjcwQjcyMTFFODlGRkJDQTA2NzYwMUQ2RDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjA0NDg1RjgwQjcyMTFFODlGRkJDQTA2NzYwMUQ2RDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4m185NAAAT8ElEQVR42uxdC3QW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
2018-02-16 09:03:21 -08:00
< p > Documentation pages are generated from Markdown files in < code > contents/< / code > .
The files are organized in 4 sections/folders (getting-started, properties,
examples, contributing) which are dynamically listed on the docs overview page.
The Markdown files should contain a header with metadata.< / p >
< div class = "gatsby-highlight" >
< pre class = "language-markdown" > < code > < span class = "token hr punctuation" > ---< / span >
path: "docs/flexDirection"
title: "Flex Direction"
hasPlayground: true
< span class = "token title important" > initialPlayground: eyJ3aWR0aCI6IjYwMCIsImhlaWdodCI6NTAwLCJjaGlsZHJlbiI6W3t9LHt9LHt9XX0=
< span class = "token punctuation" > ---< / span > < / span >
< / code > < / pre >
< / div >
< ul >
< li > The < code > path< / code > indicates the URL path this page will be available at.< / li >
< li > The < code > title< / code > is used as the page's HTML-title and when referencing
the file from the documentation overview.< / li >
< li > The < code > hasPlayground< / code > property indicates whether this documentation
has an associated playground to test out the documented feature.< / li >
< li > The < code > initialPlayground< / code > property is only relevant for documentation
pages with playgrounds and contains the initial playground state.
This base64 string is a reference to the hash (content after #)
of a < a href = "/playground" > playground< / a > url.< / li >
< li > The < code > redirect< / code > property allows to redirect to the other page, the path of which is mentioned in the property < code > path< / code > .< / li >
< / ul >
< p > Within the markdown of a documentation page which has an associated
playground you can add controls to let the user play around with the feature
directly from the documenation page.< / p >
< div class = "gatsby-highlight" >
< pre class = "language-markdown" > < code > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < < / span > controls< / span > < span class = "token attr-name" > prop< / span > < span class = "token attr-value" > < span class = "token punctuation" > =< / span > < span class = "token punctuation" > "< / span > alignContent< span class = "token punctuation" > "< / span > < / span > < span class = "token punctuation" > >< / span > < / span > < span class = "token tag" > < span class = "token tag" > < span class = "token punctuation" > < /< / span > controls< / span > < span class = "token punctuation" > >< / span > < / span >
< / code > < / pre >
< / div >
< p > If you would like to redirect to another page (potentially an external link) the header would look something like this.< / p >
< div class = "gatsby-highlight" >
< pre class = "language-markdown" > < code > < span class = "token hr punctuation" > ---< / span >
path: "/playground#eyJ3aWR0aCI6IjYwMCIsImhlaWdodCI6NTAwLCJjaGlsZHJlbiI6W3t9LHt9LHt9XX0="
title: "Flex Direction"
< span class = "token title important" > redirect: true
< span class = "token punctuation" > ---< / span > < / span >
< / code > < / pre >
2018-02-19 02:08:18 -08:00
< / div > < / div > < / div > < / div > < a class = "overview" href = "/docs" > BACK TO OVERVIEW< / a > < / div > < / div > < div class = "Footer" > < a href = "https://code.facebook.com/projects/" class = "logoOSS" > < svg viewBox = "0 0 1133.9 1133.9" > < g > < path d = "M 498.3 3.7 c 153.6 88.9 307.3 177.7 461.1 266.2 c 7.6 4.4 10.3 9.1 10.3 17.8 c -0.3 179.1 -0.2 358.3 0 537.4 c 0 8.1 -2.4 12.8 -9.7 17.1 c -154.5 88.9 -308.8 178.1 -462.9 267.5 c -9 5.2 -15.5 5.3 -24.6 0.1 c -153.9 -89.2 -307.9 -178 -462.1 -266.8 C 3 838.8 0 833.9 0 825.1 c 0.3 -179.1 0.2 -358.3 0 -537.4 c 0 -8.6 2.6 -13.6 10.2 -18 C 164.4 180.9 318.4 92 472.4 3 C 477 -1.5 494.3 -0.7 498.3 3.7 Z M 48.8 555.3 c 0 79.9 0.2 159.9 -0.2 239.8 c -0.1 10 3 15.6 11.7 20.6 c 137.2 78.8 274.2 157.8 411 237.3 c 9.9 5.7 17 5.7 26.8 0.1 c 137.5 -79.8 275.2 -159.2 412.9 -238.5 c 7.4 -4.3 10.5 -8.9 10.5 -17.8 c -0.3 -160.2 -0.3 -320.5 0 -480.7 c 0 -8.8 -2.8 -13.6 -10.3 -18 C 772.1 218 633.1 137.8 494.2 57.4 c -6.5 -3.8 -11.5 -4.5 -18.5 -0.5 C 336.8 137.4 197.9 217.7 58.8 297.7 c -7.7 4.4 -10.2 9.2 -10.2 17.9 C 48.9 395.5 48.8 475.4 48.8 555.3 Z" > < / path > < path d = "M 184.4 555.9 c 0 -33.3 -1 -66.7 0.3 -100 c 1.9 -48 24.1 -86 64.7 -110.9 c 54.8 -33.6 110.7 -65.5 167 -96.6 c 45.7 -25.2 92.9 -24.7 138.6 1 c 54.4 30.6 108.7 61.5 162.2 93.7 c 44 26.5 67.3 66.8 68 118.4 c 0.9 63.2 0.9 126.5 0 189.7 c -0.7 50.6 -23.4 90.7 -66.6 116.9 c -55 33.4 -110.8 65.4 -167.1 96.5 c -43.4 24 -89 24.2 -132.3 0.5 c -57.5 -31.3 -114.2 -64 -170 -98.3 c -41 -25.1 -62.9 -63.7 -64.5 -112.2 C 183.5 621.9 184.3 588.9 184.4 555.9 Z M 232.9 556.3 c 0 29.5 0.5 59.1 -0.1 88.6 c -0.8 39.2 16.9 67.1 50.2 86.2 c 51.2 29.4 102.2 59.2 153.4 88.4 c 31.4 17.9 63.6 18.3 95 0.6 c 53.7 -30.3 107.1 -61.2 160.3 -92.5 c 29.7 -17.5 45 -44.5 45.3 -78.8 c 0.6 -61.7 0.5 -123.5 0 -185.2 c -0.3 -34.4 -15.3 -61.5 -44.9 -79 C 637.7 352.6 583 320.8 527.9 290 c -27.5 -15.4 -57.2 -16.1 -84.7 -0.7 c -56.9 31.6 -113.4 64 -169.1 97.6 c -26.4 15.9 -40.7 41.3 -41.1 72.9 C 232.6 491.9 232.9 524.1 232.9 556.3 Z" > < / path > < path d = "M 484.9 424.4 c 69.8 -2.8 133.2 57.8 132.6 132 C 617 630 558.5 688.7 484.9 689.1 c -75.1 0.4 -132.6 -63.6 -132.7 -132.7 C 352.1 485 413.4 421.5 484.9 424.4 Z M 401.3 556.7 c -3.4 37.2 30.5 83.6 83 84.1 c 46.6 0.4 84.8 -37.6 84.9 -84 c 0.1 -46.6 -37.2 -84.4 -84.2 -84.6 C 432.2 472.1 397.9 518.3 401.3 556.7 Z" > < / path > < / g > < / svg > Facebook Open Source< / a > < div class = "SocialNetwork" > < a href = "https://github.com/facebook/yoga" > GitHub< / a > < a href = "https://twitter.com/yogalayout" > Twitter< / a > < / div > < / div > < / div > < / div > < / div > < script id = "webpack-manifest" > / * < ! [ C D A T A [ * / w i n d o w . w e b p a c k M a n i f e s t = { " 2 3 1 6 0 8 2 2 1 2 9 2 6 7 5 " : " a p p - d 6 f 2 7 3 5 5 7 2 8 7 9 3 8 c 9 9 1 1 . j s " , " 7 2 5 7 2 6 7 0 7 5 6 3 8 4 " : " c o m p o n e n t - - - s r c - t e m p l a t e s - w i t h o u t - p l a y g r o u n d - j s - 3 d 8 9 d f a c a e 2 5 a e a 3 e e 7 2 . j s " , " 2 0 4 3 9 0 8 6 4 2 6 7 4 8 2 " : " c o m p o n e n t - - - s r c - t e m p l a t e s - w i t h - p l a y g r o u n d - j s - 0 8 5 0 b 9 7 3 4 6 8 a a 4 1 f 3 9 1 d . j s " , " 1 6 2 8 9 8 5 5 1 4 2 1 0 2 1 " : " c o m p o n e n t - - - s r c - p a g e s - 4 0 4 - j s - 6 e 1 1 e e 1 e c a 3 8 8 6 9 1 6 b 8 3 . j s " , " 2 7 8 2 4 1 0 8 7 4 5 4 9 7 9 " : " c o m p o n e n t - - - s r c - p a g e s - d o c s - i n d e x - j s - 3 1 1 a b d 3 b 9 b c a b 2 b f 1 0 4 8 . j s " , " 3 5 7 8 3 9 5 7 8 2 7 7 8 3 " : " c o m p o n e n t - - - s r c - p a g e s - i n d e x - j s - e 7 a b d 4 b 8 b 1 d b 2 8 a d 9 5 1 7 . j s " , " 2 5 4 7 9 1 7 8 1 3 8 8 1 2 6 " : " c o m p o n e n t - - - s r c - p a g e s - p l a y g r o u n d - i n d e x - j s - 8 9 e 0 f 2 c b 0 5 5 3 c f a 5 e 3 c 0 . j s " , " 2 6 8 1 1 6 9 7 1 6 2 6 6 7 3 " : " p a t h - - - c o n t r i b u t i n g - t e s t i n g - 8 a d f b d a 2 0 2 6 c 0 c 3 0 b 4 3 6 . j s " , " 1 9 2 6 6 3 8 0 5 7 6 5 4 7 5 " : " p a t h - - - c o n t r i b u t i n g - w r i t i n g - d o c u m e n t a t i o n - a a 4 f 7 b 0 d 3 1 1 8 2 6 4 e a d a 8 . j s " , " 2 1 2 4 3 7 9 2 6 6 3 0 4 0 7 " : " p a t h - - - c o n t r i b u t i n g - o p e n i n g - a - p u l l - r e q u e s t - 7 c 7 8 1 0 b 8 c 4 1 9 0 0 0 1 b f d d . j s " , " 2 1 0 2 1 5 7 9 3 0 7 6 3 7 3 " : " p a t h - - - d o c s - a b s o l u t e - r e l a t i v e - l a y o u t - 7 d f 2 a c c 9 5 2 4 6 e 2 d 0 5 a b b . j s " , " 7 6 1 1 3 4 6 9 3 5 9 6 7 3 " : " p a t h - - - g e t t i n g - s t a r t e d - s t a n d a l o n e - d 6 c c 8 f 6 a e 8 5 0 d e 7 2 4 0 b f . j s " , " 6 1 0 7 0 8 6 1 3 8 9 1 2 " : " p a t h - - - d o c s - a l i g n - i t e m s - 0 7 5 f c f 5 5 4 8 4 3 b e f a 4 3 1 2 . j s " , " 2 0 5 1 6 4 6 0 5 3 9 3 4 4 8 " : " p a t h - - - d o c s - a l i g n - c o n t e n t - 4 d 8 f 0 d a 0 1 5 a 4 d 8 9 6 3 7 6 a . j s " , " 1 8 2 6 6 7 1 9 7 3 5 3 2 0 5 " : " p a t h - - - d o c s - f l e x - w r a p - 8 9 b 6 3 1 f f a 8 d b e a d 5 4 9 4 4 . j s " , " 1 2 8 6 4 6 1 9 7 2 5 9 1 6 7 " : " p a t h - - - d o c s - a s p e c t - r a t i o - c 5 1 4 f 2 0 4 f a 5 0 7 4 9 a 8 4 8 2 . j s " , " 1 1 2 4 1 6 0 0 5 3 5 7 2 7 4 " : " p a t h - - - d o c s - f l e x - 0 5 7 a e c 8 3 c 5 f 0 c 2 3 8 f 5 7 d . j s " , " 1 5 5 4 4 6 5 2 2 2 5 0 5 6 7 " : " p a t h - - - d o c s - f l e x - d i r e c t i o n - 4 c 4 9 9 3 8 d e 3 0 8 8 2 0 e 5 1 1 6 . j s " , " 2 3 9 9 6 4 3 7 8 8 1 4 3 8 4 " : " p a t h - - - d o c s - j u s t i f y - c o n t e n t - f a d a 2 1 b d 7 f e 2 a 8 8 a 7 0 2 9 . j s " , " 8 7 3 8 3 6 2 2 1 0 2 4 5 3 " : " p a t h - - - d o c s - m a r g i n s - p a d d i n g s - b o r d e r s - d f b 8 9 0 f 9 2 7 7 4 b c b 1 6 f e 8 . j s " , " 1 7 1 6 7 2 1 9 9 0 4 1 0 0 7
2018-02-16 09:03:21 -08:00
function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/',window[disableStr]=!0}var gaProperty='UA-44373548-24',disableStr='ga-disable-'+gaProperty;document.cookie.indexOf(disableStr+'=true')>-1&&(window[disableStr]=!0);
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44373548-24', 'auto');
2018-02-19 02:08:18 -08:00
ga('set', 'anonymizeIp', 1);< / script > < script > /*<![CDATA[*/ ! function ( e , t , r ) { function n ( ) { for ( ; d [ 0 ] && "loaded" == d [ 0 ] [ f ] ; ) c = d . shift ( ) , c [ o ] = ! i . parentNode . insertBefore ( c , i ) } for ( var s , a , c , d = [ ] , i = e . scripts [ 0 ] , o = "onreadystatechange" , f = "readyState" ; s = r . shift ( ) ; ) a = e . createElement ( t ) , "async" in i ? ( a . async = ! 1 , e . head . appendChild ( a ) ) : i [ f ] ? ( d . push ( a ) , a [ o ] = n ) : e . write ( "<" + t + ' src="' + s + '" defer></' + t + ">" ) , a . src = s } ( document , "script" , [ "/commons-c1c1180f734cb1baa282.js" , "/app-d6f273557287938c9911.js" , "/path---contributing-writing-documentation-aa4f7b0d3118264eada8.js" , "/component---src-templates-without-playground-js-3d89dfacae25aea3ee72.js" ] ) /*]]>*/ < / script > < / body > < / html >
