Files
react-native/docs/flexbox.html
T
2015-10-22 16:32:15 +00:00

12 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Flexbox React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Flexbox React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li></ul><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/performance.html#content">Performance</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/signed-apk-android.html#content">Generating Signed APK</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchandroid.html#content">SwitchAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="active" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>Flexbox</h1><div><noscript></noscript><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/LayoutPropTypes.js">Edit on GitHub</a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="alignitems"></a>alignItems <span class="propType">enum(&#x27;flex-start&#x27;, &#x27;flex-end&#x27;, &#x27;center&#x27;, &#x27;stretch&#x27;)</span> <a class="hash-link" href="#alignitems">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alignself"></a>alignSelf <span class="propType">enum(&#x27;auto&#x27;, &#x27;flex-start&#x27;, &#x27;flex-end&#x27;, &#x27;center&#x27;, &#x27;stretch&#x27;)</span> <a class="hash-link" href="#alignself">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderbottomwidth"></a>borderBottomWidth <span class="propType">number</span> <a class="hash-link" href="#borderbottomwidth">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderleftwidth"></a>borderLeftWidth <span class="propType">number</span> <a class="hash-link" href="#borderleftwidth">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderrightwidth"></a>borderRightWidth <span class="propType">number</span> <a class="hash-link" href="#borderrightwidth">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bordertopwidth"></a>borderTopWidth <span class="propType">number</span> <a class="hash-link" href="#bordertopwidth">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderwidth"></a>borderWidth <span class="propType">number</span> <a class="hash-link" href="#borderwidth">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bottom"></a>bottom <span class="propType">number</span> <a class="hash-link" href="#bottom">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flex"></a>flex <span class="propType">number</span> <a class="hash-link" href="#flex">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexdirection"></a>flexDirection <span class="propType">enum(&#x27;row&#x27;, &#x27;column&#x27;)</span> <a class="hash-link" href="#flexdirection">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexwrap"></a>flexWrap <span class="propType">enum(&#x27;wrap&#x27;, &#x27;nowrap&#x27;)</span> <a class="hash-link" href="#flexwrap">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="height"></a>height <span class="propType">number</span> <a class="hash-link" href="#height">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="justifycontent"></a>justifyContent <span class="propType">enum(&#x27;flex-start&#x27;, &#x27;flex-end&#x27;, &#x27;center&#x27;, &#x27;space-between&#x27;, &#x27;space-around&#x27;)</span> <a class="hash-link" href="#justifycontent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="left"></a>left <span class="propType">number</span> <a class="hash-link" href="#left">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="margin"></a>margin <span class="propType">number</span> <a class="hash-link" href="#margin">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginbottom"></a>marginBottom <span class="propType">number</span> <a class="hash-link" href="#marginbottom">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginhorizontal"></a>marginHorizontal <span class="propType">number</span> <a class="hash-link" href="#marginhorizontal">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginleft"></a>marginLeft <span class="propType">number</span> <a class="hash-link" href="#marginleft">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginright"></a>marginRight <span class="propType">number</span> <a class="hash-link" href="#marginright">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="margintop"></a>marginTop <span class="propType">number</span> <a class="hash-link" href="#margintop">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginvertical"></a>marginVertical <span class="propType">number</span> <a class="hash-link" href="#marginvertical">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="padding"></a>padding <span class="propType">number</span> <a class="hash-link" href="#padding">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingbottom"></a>paddingBottom <span class="propType">number</span> <a class="hash-link" href="#paddingbottom">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddinghorizontal"></a>paddingHorizontal <span class="propType">number</span> <a class="hash-link" href="#paddinghorizontal">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingleft"></a>paddingLeft <span class="propType">number</span> <a class="hash-link" href="#paddingleft">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingright"></a>paddingRight <span class="propType">number</span> <a class="hash-link" href="#paddingright">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingtop"></a>paddingTop <span class="propType">number</span> <a class="hash-link" href="#paddingtop">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingvertical"></a>paddingVertical <span class="propType">number</span> <a class="hash-link" href="#paddingvertical">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="position"></a>position <span class="propType">enum(&#x27;absolute&#x27;, &#x27;relative&#x27;)</span> <a class="hash-link" href="#position">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="right"></a>right <span class="propType">number</span> <a class="hash-link" href="#right">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="top"></a>top <span class="propType">number</span> <a class="hash-link" href="#top">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="width"></a>width <span class="propType">number</span> <a class="hash-link" href="#width">#</a></h4></div></div></div><div class="docs-prevnext"><a class="docs-next" href="geolocation.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
(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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><script src="/react-native/js/scripts.js"></script></body></html>