mirror of
https://github.com/status-im/react-native.git
synced 2025-01-11 01:56:26 +00:00
8378f0f9f7
Summary: Explain the **motivation** for making this change. What existing problem does the pull request solve? I had tried fixing a broken link in a previous commit (#11453). My commit was merged, but it did not resolve the underlying problem. I have looked into how links should be formed for the docs and have fixed the original problem as well as updated all other links to be consistent. Previous link formats: - /docs/sample.html <-- broken link - sample.html <-- broken link - https://facebook.github.io/react-native/docs/sample.html <-- works - /react-native/docs/sample.html <-- works - docs/sample.html <-- works (permalink format) This PR updates all links to the permalink format. **Test plan (required)** I ran the website locally and manually tested half of the links in each category. They all worked. ``` $ cd website $ npm install && npm start ``` Closes https://github.com/facebook/react-native/pull/12064 Differential Revision: D4489153 Pulled By: mkonicek fbshipit-source-id: bf0231d941ba147317595c3b3466dc579a887169
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](docs/handling-text-input.html).
|