React Nativeのデザイン - Stylesheet/Flexbox (part2)

昨日の続きでFlexboxを説明します。flex, flexDirection, flexWrapは[昨日のエントリ](http://qiita.com/shohey1226/items/5185fcba7381bf4da2f2)を参照してください。

# Flexbox

下記のコンポーネントを前提とします。

```

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

## justifyContentプロパティ

親コンポーント内の子コンポーネントの配置を決めます。

### flex-start(デフォルト）

子コンポーネントを先頭から配置します。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
    justifyContent: 'flex-start' //追加
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.14.46.png](https://qiita-image-store.s3.amazonaws.com/0/13663/7fba9c40-7a28-bee8-167c-79929cd2b88e.png)


### flex-end

子コンポーネントを後ろから配置します。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'flex-end'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.17.13.png](https://qiita-image-store.s3.amazonaws.com/0/13663/13786b1e-1701-c576-12e6-2e5229b93630.png)

### center

子コンポーネントを真ん中に配置します。


```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.19.27.png](https://qiita-image-store.s3.amazonaws.com/0/13663/03ea91f7-80b4-c8f1-2082-dfc38d7d7dcf.png)


### space-between

子コンポーネントを先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟みます。


```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'space-between'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.20.20.png](https://qiita-image-store.s3.amazonaws.com/0/13663/26997a69-a49e-14ce-d7bd-3c89a7a13f0e.png)

###  space-around

各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置です。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent:  'space-around',
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.21.28.png](https://qiita-image-store.s3.amazonaws.com/0/13663/fed1b83f-5fd1-2e58-b64d-f7ee2c183d69.png)

## alignItems

### stretch（デフォルト）

子コンポーネントを伸ばして配置します。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'stretch'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.31.00.png](https://qiita-image-store.s3.amazonaws.com/0/13663/e0e184f2-1c99-6747-87ce-5c5178e4ccd2.png)

### flex-start

子コンポーネントを先頭から配置します。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'flex-start'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.27.54.png](https://qiita-image-store.s3.amazonaws.com/0/13663/51db2504-22cd-c523-e251-bb0ac0606520.png)

### flex-end

子コンポーネントを後ろに配置します。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'flex-end'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.28.58.png](https://qiita-image-store.s3.amazonaws.com/0/13663/ae2610d7-30ae-dde5-a9be-6fccab1f7c23.png)

### center

子コンポーネントを真ん中に配置します。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

![スクリーンショット 2015-12-05 14.29.44.png](https://qiita-image-store.s3.amazonaws.com/0/13663/b1ea5b81-cd85-1740-2078-717915d97d5e.png)

## alignSelf

alignSelfはalignItemsで配置したものを子コンポーネント側で上書きします。
したがって、alignItemsと同じ値を設定します。

```
var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'flex-start', 
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
    alignSelf: 'flex-end' //追加
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});
```

このように全体を`alignItems: 'flex-start' `で定義したものをItem1のみflex-endにしたい場合に`alignSelf: 'flex-end'をItem1に指定します。

![スクリーンショット 2015-12-05 14.34.26.png](https://qiita-image-store.s3.amazonaws.com/0/13663/049d5210-a487-4617-2dd9-462b95454506.png)

以上、React Nativeのスタイルシートで悩むポイントのFlexboxについて動きを見てきました。
明日は、開発していく上で必要不可欠なFluxアーキテクチャを見ていきます。