mirror of
https://github.com/status-im/react-native.git
synced 2025-01-17 04:50:59 +00:00
9dcea13795
Summary: Per https://developer.mozilla.org/en-US/docs/Web/CSS/align-items, the default for `align-items` is stretch, so I removed the reference that suggested otherwise Similar to https://github.com/facebook/react-native/pull/9397, but this section was not updated in that PR. Closes https://github.com/facebook/react-native/pull/11373 Differential Revision: D4299871 Pulled By: ericnakagawa fbshipit-source-id: 1bee27b0dced192ef42e21ca8cc800d52edce195
108 lines
4.4 KiB
Markdown
108 lines
4.4 KiB
Markdown
---
|
|
id: flexbox
|
|
title: Layout with Flexbox
|
|
layout: docs
|
|
category: The Basics
|
|
permalink: docs/flexbox.html
|
|
next: handling-text-input
|
|
previous: height-and-width
|
|
---
|
|
|
|
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 CSS on the web, with a few exceptions. The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, and the `flex` parameter only supporting a single number.
|
|
|
|
#### Flex Direction
|
|
|
|
Adding `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`.
|
|
|
|
```ReactNativeWebPlayer
|
|
import React, { Component } from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
class FlexDirectionBasics extends Component {
|
|
render() {
|
|
return (
|
|
// Try setting `flexDirection` to `column`.
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
|
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
|
|
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
|
|
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
|
|
</View>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
|
|
```
|
|
|
|
#### Justify Content
|
|
|
|
Adding `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`, and `space-between`.
|
|
|
|
```ReactNativeWebPlayer
|
|
import React, { Component } from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
class JustifyContentBasics extends Component {
|
|
render() {
|
|
return (
|
|
// Try setting `justifyContent` to `center`.
|
|
// Try setting `flexDirection` to `row`.
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
|
|
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
|
|
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
|
|
</View>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
|
|
```
|
|
|
|
#### Align Items
|
|
|
|
Adding `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`.
|
|
|
|
> 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.
|
|
|
|
```ReactNativeWebPlayer
|
|
import React, { Component } from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
class AlignItemsBasics extends Component {
|
|
render() {
|
|
return (
|
|
// Try setting `alignItems` to 'flex-start'
|
|
// Try setting `justifyContent` to `flex-end`.
|
|
// Try setting `flexDirection` to `row`.
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}>
|
|
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
|
|
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
|
|
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
|
|
</View>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
|
|
```
|
|
|
|
#### Going Deeper
|
|
|
|
We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./docs/layout-props.html).
|
|
|
|
We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to [learn how to handle text input with the TextInput component](/react-native/docs/handling-text-input.html).
|