Flex Direction<\/strong><\/p>\nAdding flexDirection to a component’s style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.<\/p>\n
import React, { Component } from ‘react’;<\/p>\n
import { AppRegistry, View } from ‘react-native’;<\/p>\n
export default class FlexDirectionBasics extends Component {<\/p>\n
render() {<\/p>\n
return (<\/p>\n
\/\/ Try setting `flexDirection` to `column`.<\/p>\n
<View style={{flex: 1, flexDirection: ‘row’}}><\/p>\n
<View style={{width: 50, height: 50, backgroundColor: ‘powderblue’}} \/><\/p>\n
<View style={{width: 50, height: 50, backgroundColor: ‘skyblue’}} \/><\/p>\n
<View style={{width: 50, height: 50, backgroundColor: ‘steelblue’}} \/><\/p>\n
<\/View><\/p>\n
);<\/p>\n
}<\/p>\n
};<\/p>\n
\/\/ skip this line if using Create React Native App<\/p>\n
AppRegistry.registerComponent(‘AwesomeProject’, () => FlexDirectionBasics);<\/p>\n
Justify Content<\/strong><\/p>\nAdding justifyContent to a component’s style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, space-between and space-evenly.<\/p>\n
import React, { Component } from ‘react’;<\/p>\n
import { AppRegistry, View } from ‘react-native’;<\/p>\n
export default class JustifyContentBasics extends Component {<\/p>\n
render() {<\/p>\n
return (<\/p>\n
\/\/ Try setting `justifyContent` to `center`.\u00a0 Try setting `flexDirection` to `row`.<\/p>\n
<View style={{<\/p>\n
flex: 1,<\/p>\n
flexDirection: ‘column’,<\/p>\n
justifyContent: ‘space-between’,<\/p>\n
}}><\/p>\n
<View style={{width: 50, height: 50, backgroundColor: ‘powderblue’}} \/><\/p>\n
<View style={{width: 50, height: 50, backgroundColor: ‘skyblue’}} \/><\/p>\n
<View style={{width: 50, height: 50, backgroundColor: ‘steelblue’}} \/><\/p>\n
<\/View><\/p>\n
);<\/p>\n
}<\/p>\n
};<\/p>\n
\/\/ skip this line if using Create React Native App<\/p>\n
AppRegistry.registerComponent(‘AwesomeProject’, () => JustifyContentBasics);<\/p>\n
Align Items<\/strong><\/p>\nAdding alignItems to a component’s style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are flex-start, center, flex-end, and stretch.<\/p>\n
For stretch to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting alignItems: stretch does nothing until the width: 50 is removed from the children.<\/p>\n
import React, { Component } from ‘react’;<\/p>\n
import { AppRegistry, View } from ‘react-native’;<\/p>\n
export default class AlignItemsBasics extends Component {<\/p>\n
render() {<\/p>\n
return (<\/p>\n
\/\/ Try setting `alignItems` to ‘flex-start’ Try setting `justifyContent` to `flex-end`.<\/p>\n
\/\/ Try setting `flexDirection` to `row`.<\/p>\n
<View style={{<\/p>\n
flex: 1,<\/p>\n
flexDirection: ‘column’,<\/p>\n
justifyContent: ‘center’,<\/p>\n
alignItems: ‘stretch’,<\/p>\n
}}><\/p>\n
<View style={{width: 50, height: 50, backgroundColor: ‘powderblue’}} \/><\/p>\n
<View style={{height: 50, backgroundColor: ‘skyblue’}} \/><\/p>\n
<View style={{height: 100, backgroundColor: ‘steelblue’}} \/><\/p>\n
<\/View><\/p>\n
);<\/p>\n
}<\/p>\n
};<\/p>\n
\/\/ skip this line if using Create React Native App<\/p>\n
AppRegistry.registerComponent(‘AwesomeProject’, () => AlignItemsBasics);<\/p>\n","protected":false},"excerpt":{"rendered":"
A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout. Flexbox works the same way in React Native as it does in…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8640],"class_list":["post-74502","page","type-page","status-publish","hentry","category-reactjs","tag-layout-with-flexbox"],"acf":[],"yoast_head":"\n
Layout with Flexbox - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Layout with Flexbox - Tutorial\" \/>\n<meta property=\"og:description\" content=\"A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout. Flexbox works the same way in React Native as it does in...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:30+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/\",\"name\":\"Layout with Flexbox - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-17T07:55:35+00:00\",\"dateModified\":\"2024-04-12T08:53:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layout with Flexbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Layout with Flexbox - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/","og_locale":"en_US","og_type":"article","og_title":"Layout with Flexbox - Tutorial","og_description":"A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout. Flexbox works the same way in React Native as it does in...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:30+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/","name":"Layout with Flexbox - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-17T07:55:35+00:00","dateModified":"2024-04-12T08:53:30+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/layout-with-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Layout with Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74502"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74502\/revisions"}],"predecessor-version":[{"id":75392,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74502\/revisions\/75392"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}