flexbox早見表

いつも検索してたのでメモ。
[Container](http://qiita.com/hrloca/items/e4e31ad96a68f1148d28#container)
[Items](http://qiita.com/hrloca/items/e4e31ad96a68f1148d28#items)

# Container
```css
  flex-direction: row | row-reverse | column | column-reverse;
  flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse'
```
```css
  flex-wrap: nowrap | wrap | wrap-reverse;
  flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'
```
```css
  justify-content: flex-start | flex-end | center | space-between | space-around;
  justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'
```
```css
  align-items: flex-start | flex-end | center | baseline | stretch;
  alignItems: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
```
```css
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  alignContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'
```

## flex-direction
itemsを配置していく方向を指定。

**initial**: row
`row | row-reverse | column | column-reverse`

#### row
```css
flex-direction: row;
flexDirection: 'row',
```
![flex-direction--row.png](https://qiita-image-store.s3.amazonaws.com/0/97756/aeaf71ec-4059-056c-5e98-31b67b7b16db.png)
#### row-reverse
```css
flex-direction: row-reverse;
flexDirection: 'row-reverse',
```
![flex-direction--row-reverse.png](https://qiita-image-store.s3.amazonaws.com/0/97756/2526fc8c-a72e-f1e6-389c-fd0393e9959c.png)
#### column
```css
flex-direction: column;
flexDirection: 'column',
```
![flex-direction--column.png](https://qiita-image-store.s3.amazonaws.com/0/97756/3915c97f-1b1c-0425-6783-5cc78e91c61f.png)
#### column-reverse
```css
flex-direction: column-reverse;
flexDirection: 'column-reverse',
```
![flex-direction--column-reverse.png](https://qiita-image-store.s3.amazonaws.com/0/97756/6c9413f2-235e-f0e7-cfa1-c8533ded8bb3.png)


## flex-wrap
itemsの折り返し方を指定。

**initial**: nowrap
`nowrap | wrap | wrap-reverse`

#### nowrap
```css
flex-wrap: nowrap;
flexWrap: 'nowrap',
```
![flex-wrap--nowrap.png](https://qiita-image-store.s3.amazonaws.com/0/97756/3c4dbb75-0cca-14ed-a543-aef1343043fe.png)
#### wrap
```css
flex-wrap: wrap;
flexWrap: 'wrap',
```
![flex-wrap--wrap.png](https://qiita-image-store.s3.amazonaws.com/0/97756/c57805eb-f940-ba98-741a-74f03c2498eb.png)
#### wrap-reverse
```css
flex-wrap: wrap-reverse;
flexWrap: 'wrap-reverse',
```
![flex-wrap--wrap-reverse.png](https://qiita-image-store.s3.amazonaws.com/0/97756/7aaa5d64-0549-ff69-7c09-033e8b4234e0.png)


## justify-content
itemsの横方向の整列を指定。

**initial**: flex-start
`flex-start | flex-end | center | space-between | space-around`

#### flex-start
```css
justify-content: flex-start;
justifyContent: 'flex-start',
```
![justify-content--flex-start.png](https://qiita-image-store.s3.amazonaws.com/0/97756/c255d071-cfe5-b913-6e9a-d5447363859d.png)
#### flex-end
```css
justify-content: flex-end;
justifyContent: 'flex-end',
```
![justify-content--flex-end.png](https://qiita-image-store.s3.amazonaws.com/0/97756/ee76ecd9-3f53-04a4-4214-a2598da72552.png)
#### center
```css
justify-content: center;
justifyContent: 'center',
```
![justify-content--center.png](https://qiita-image-store.s3.amazonaws.com/0/97756/60b7e6fb-ce76-2950-6eff-abe647d4cce1.png)
#### space-between
```css
justify-content: space-between;
justifyContent: 'space-between',
```
![justify-content--space-between.png](https://qiita-image-store.s3.amazonaws.com/0/97756/c0ad6c71-808a-238a-6a30-d07c6e221cce.png)
#### space-around
```css
justify-content: space-around;
justifyContent: 'space-around',
```
![justify-content--space-around.png](https://qiita-image-store.s3.amazonaws.com/0/97756/6f2cfcd3-83d3-4904-5164-4d8dca6e1d12.png)


## align-items
itemsの縦方向の整列を指定。

**initial**: stretch
`flex-start | flex-end | center | baseline | stretch`

#### flex-start
```css
align-items: flex-start;
alignItems: 'flex-start',
```
![align-items--flex-start.png](https://qiita-image-store.s3.amazonaws.com/0/97756/6b29cd13-d4e7-23d5-b5a7-4ab74dcbc245.png)
#### flex-end
```css
align-items: flex-end;
alignItems: 'flex-end',
```
![align-items--flex-end.png](https://qiita-image-store.s3.amazonaws.com/0/97756/35191451-3ea9-5f11-a8bc-c644face1aaf.png)
#### center
```css
align-items: center;
alignItems: 'center',
```
![align-items--center.png](https://qiita-image-store.s3.amazonaws.com/0/97756/18f83abe-a886-6867-6f8f-11e0634e576f.png)
#### baseline
```css
align-items: baseline;
alignItems: 'baseline',
```
![align-items--baseline.png](https://qiita-image-store.s3.amazonaws.com/0/97756/b0ddaa4e-0e82-66d1-9f51-1f1817560cb2.png)
#### stretch
```css
align-items: stretch;
alignItems: 'stretch',
```
![align-items--stretch.png](https://qiita-image-store.s3.amazonaws.com/0/97756/7e82fa63-e2c6-24c4-41b2-a36c534f4732.png)


## align-content
縦方向にitemをどのように配置していくかを指定。

**initial**: stretch
`flex-start | flex-end | center | space-between | space-around | stretch`

#### flex-start
```css
align-content: flex-start;
alignContent: 'flex-start',
```
![align-content--flex-start.png](https://qiita-image-store.s3.amazonaws.com/0/97756/5f29bcd5-346e-bede-3c39-6c2c5ed20463.png)
#### flex-end
```css
align-content: flex-end;
alignContent: 'flex-end',
```
![align-content--flex-end.png](https://qiita-image-store.s3.amazonaws.com/0/97756/5c6ada2f-897c-ab78-a675-8202415aa4b6.png)
#### center
```css
align-content: center;
alignContent: 'center',
```
![align-content--center.png](https://qiita-image-store.s3.amazonaws.com/0/97756/847e2f6b-fa24-573d-3087-36da290e8b91.png)
#### space-between
```css
align-content: space-between;
alignContent: 'space-between',
```
![align-content--space-between.png](https://qiita-image-store.s3.amazonaws.com/0/97756/ac266b83-3a85-7d91-8086-e8fc53aa4487.png)
#### space-around
```css
align-content: space-around;
alignContent: 'space-around',
```
![align-content--space-around.png](https://qiita-image-store.s3.amazonaws.com/0/97756/31054fd1-c78c-9993-684d-5abd3f26c0c2.png)
#### stretch
```css
align-content: stretch;
alignContent: 'stretch',
```
![align-content--stretch.png](https://qiita-image-store.s3.amazonaws.com/0/97756/534ec33a-3391-cd89-fe87-68b879bab965.png)

## flex-flow
flex-directionとflex-wrapのショートハンド。
**initial**: row nowrap

# Items
```css
flex-grow: <num>;
flexGrow: <num>,
```
```css
flex-shrink: <num>;
flexShrink: <num>,
```
```css
flex-basis: auto | <width>;
flexBasis: 'auto' | <width>,
```
```css
align-self: auto | flex-start | flex-end | center | baseline | stretch;
alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
```
```css
order: <num>;
order: <num>,
```

## flex-grow
itemsの伸びる倍率。(grow:伸びる、増える、育つ)
1以上を指定するとcontainerいっぱいに広がるように伸びる。
`<num>`が大きいほど幅が大きくなる。
0はオリジナルの幅。

**initial**: 0

```css
flex-grow: <num>;
flexGrow: <num>,
```
![flex-grow.png](https://qiita-image-store.s3.amazonaws.com/0/97756/9806c07d-d2f9-4ee6-1bf9-d7bc2deb1f63.png)


## flex-shrink
itemsの縮む倍率。(shrink:縮む)
containerの幅が縮まる時のitemsの縮む割合を指定できる。
`<num>`が大きいほど幅が狭くなる。
0はオリジナルの幅。縮まない。

**initial**: 1

```css
flex-shrink: <num>;
flexShrink: <num>,
```
![flex-shrink.png](https://qiita-image-store.s3.amazonaws.com/0/97756/e62fb2ce-0bf2-ed7d-e502-b2a07abbc764.png)


## flex-basis
flex-itemsは他プロパティで比率が指定されている時、widthプロパティが無視される。
このプロパティを使うと幅を指定出来る。

**initial**: auto

```css
flex-basis: auto | <width>;
flexBasis: 'auto' | <width>,
```
![flex-basis.png](https://qiita-image-store.s3.amazonaws.com/0/97756/c55b3abb-76a5-4799-9c3a-7483d1dfe98b.png)

## align-self
align-itemsはcontainerに指定した子要素の縦方向の整列をコントロールするのに対し、align-selfはitems自体に指定して縦方向の整列をコントロールする。

**initial**: auto

```css
align-self: auto | flex-start | flex-end | center | baseline | stretch;
alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
```
![align-self.png](https://qiita-image-store.s3.amazonaws.com/0/97756/a12d7cbd-b8fe-dda0-046c-2e4b069fdbe2.png)



## flex(Shorthand)
flex-grow, flex-shrink, flex-basisのショートハンド。

**initial**: 0 1 auto
`initial(flex: 0 1 auto) | auto(flex: 1 1 auto) | none(flex: 0 0 auto)`

## order
flex-itemsの順番を指定た数字の順番に並べ替える事が出来る。

**initial**: 0

```css
order: <num>;
order: <num>,
```
![order.png](https://qiita-image-store.s3.amazonaws.com/0/97756/d4b9ed9a-5432-8eae-6b3d-0a55b25908bd.png)