横並びCSSプロパティ（inline-block、table-cell、float、Flexbox）のまとめ

CSSの横並びテクニックを1から整理しました。
**後半の力作「Flexboxのプロパティ一覧」、是非ご覧ください。**

# inline-block

```html
<ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3<br>3</li>
</ul>
```
```css
.container {
  text-align: center;
}
.item {
  display: inline-block;
  vertical-align: middle;
}
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/f851aeab-b69b-60bf-a3ba-82f281323c95.png)


### メリット
本来、インライン要素はwidthやheightを指定できないが、`display: inline-block`をする事によって、文章中にインラインで要素を設置する事ができ、かつwidthやheightを指定する事ができる。
### デメリット
* 子要素の内容は基本上揃えになる。
* 高さを指定している場合、`vertical-align`が使用できない。

### よく使うパーツ
* パンくず
* 文章中の指定した文字に装飾をしたい時

# table-cell

親要素と子要素の関係がある

### メリット

* 親要素に横幅を指定して、`margin: 0 auto;`と指定すれば、左右中央に設置することが可能。
* 子要素の縦幅を均一に揃えてくれて、子要素に`vertical-align: middle;`を指定すれば、上下中央に揃えることが可能。
* ulに`table-layout:fixed`を指定すれば、小要素の幅を均等にする事も可能。


```html
<ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3<br>3</li>
</ul>
```

```css
.container {
  display: table;
  width: 70%;
  margin: 0 auto;
  table-layout: fixed;
}
.item {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.item:nth-child(1) {
	width: 10%;
}.item:nth-child(2) {
	width: 30%;
}.item:nth-child(3) {
	width: 60%;
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/3234ada9-a14d-c60d-800e-75dd5438fef8.png)



### デメリット
* .item間の余白をmarginで調整することが出来ない。
* 孫要素（liの中のaタグなど）の高さが異なると縦幅がマチマチになってしまう。
* 子要素が全て横並びになってしまうので、柔軟なレスポンシブ対応ができない。
    * PCは6列、spは3列x2行にしたい場合（NG）
    * PCは6列、spは1列6行にしたい場合(OK)
    * 1番目と2番目の子要素を横並びにさせて、3番目だけを横1列にしたい場合（NG）

```html
<ul class="container">
  <li class="item"><a href="#">1</a></li>
  <li class="item"><a href="#">2</a></li>
  <li class="item"><a href="#">3<br>3</a></li>
</ul>
```
```css
.container {
  display: table;
  margin: 0 auto;
}
.item {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 180px;
}
.item a {
  display: block;
  padding: 8px 0;
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/5dae5fcd-4ffd-a35c-c345-8c4e8daed76f.png)

### よく使うパーツ
* 要素の高さがマチマチで中央揃えをしたいパーツ。
* ただしflexboxの台頭によって最近は使わなくなってきている。
* 本来は表組みをレイアウトするためのプロパティ。


# float

昔から使われている横並び用のCSS。
レイアウト調整用のCSSと言えばfloatだったが、本来の用途は、特定の要素を左右に寄せて配置するプロパティ。
例えば、文章中の画像に回り込ませる為のCSSでした。

```html
<p>
クスールはWebの技術を中心に “ものづくり”を教える小さな学校です。<img src="http://placehold.it/120x70" alt="">Web制作会社が運営しているので、講師は全員現役のクリエイター。オンラインでは伝えることができない、考える力と制作現場で必要なノウハウを、個人／企業に提供しています。Flash/ActionScript、HTML/CSS/JavaScriptなどのWebの技術を中心としたカリキュラムです。受講者自ら手を動かし、作品制作に必要な技術を身につけることを目的としています。また、イベントの開催、書籍の執筆を行うことで、クリエイターの交流の場や、学ぶ機会を提供しています。
</p>
```
```scss
p {
 font-size: 14px;
 width: 400px;
}
img {
 float: right;
 padding: 16px;
 margin: 8px;
 background-color: #eee;
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/e461ddf8-3eea-24a5-86ff-ec777010d247.png)

```html
<nav>
  <ul class="container">
    <li class="item">1</li>
    <li class="item">2<br>2</li>
    <li class="item">3</li>
  </ul>
</nav>
```
```css
.container {
  overflow: hidden;
  width: 600px;
  margin: 0 auto;
}
.item {
  float: left;
  text-align: center;
  width: 160px;
  padding: 16px 0;
  margin-right: 60px;
}
.item:nth-child(3n) {
  margin-right: 0;
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/d9e7fe9f-51b8-15a8-c948-dab59d4f0282.png)



### メリット
* 子要素の左右の順番を変えることが出来る
* 長らくレイアウト用に使用されていたプロパティなので、検索すれば大抵の事が解決できる。
* 子要素にマージンやパディングで余白を調整することが可能。（だが横幅を計算しないと、カラム落ちしてしまう事がある）

### デメリット
* 子要素は文字通りfloat（浮いた）状態になり、親要素の高さが無くなってしまう。
    * 親要素に`overflow: hidden;`を使い解決する。（IE7以下を対応する場合は、clearfix）
* **子要素の高さを内容によって（可変）揃えることが出来ない。（pxなどで固定値を設定すれば可能）**
* 自動的に横幅を均等にすることができないので、親の横幅に対して子要素の横幅を計算しないといけない。

### よく使うパーツ
* 未だにレイアウト用途で利用する事がある。
* 文章中に画像などを左右に回り込ませて配置する場合。


# flexbox

上記の全てのプロパティ（inline-block、table、float）は、レイアウトをコントロールする（横並び）する為のプロパティではありませんでした。
flexboxはWEBサイトをレイアウトする為に生まれ、スマートフォンなどの端末でも最適で柔軟なレイアウトが実現できるプロパティです。（レスポンシブ）


### メリット

* 親要素に`display: flex;`と指定すれば、子要素が横並びの対象となります。
* 

### デメリット

* レガシーブラウザが対応していない場合がある。
    * IE9は未対応。IE10はdisplay:-ms-flexbox
    * IE11ではflex:1ではなくflex-grow：1としなければならない。
    * Safari8 未満はdisplay: -webkit-flex
    * iOS9 未満はdisplay: -webkit-flex
    * Android 4.3 未満はdisplay: -webkit-box
* モダンブラウザでも問題がある場合がある
    * ![flexboxのバグに立ち向かう（flexboxバグまとめ）](https://qiita.com/hashrock/items/189db03021b0f565ae27)

## Flexboxのプロパティ一覧

### container

#### flex-direction 

| flex-direction      |       flexアイテムを並べる方向 |
|:-----------------|------------------:|
| row [default]             |              ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/57e22cbd-7ba4-5121-553f-cd9161ffbc02.png)
row-reverse |![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/38ee241c-5cba-2bad-d74b-d1754ace5967.png)
| column             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/08a6608c-ac40-c4d0-8ca7-95967c73d03b.png)
| column-reverse             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/8be9ed65-fe5f-d1df-c274-3435a7297005.png)

#### flex-wrap

| flex-wrap     |      flexアイテムの折り返し |
|:-----------------|------------------:|
| nowrap [default]             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/efbb089e-4f4c-7ed4-84cb-1e845fcbdc0c.png)
| wrap            | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/42444a24-4fb3-0860-a712-2de2d30e7516.png)
| wrap-reverse             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/39990523-9290-9615-1b0a-fc641121e3bd.png)

#### justify-content

| justify-content     |       左右位置 |
|:-----------------|------------------:|
| flex-start [default]          | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/851768c5-3c07-af75-35b5-e150cb122e6a.png)
| flex-end             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/164bd56c-8241-a28e-2c19-0d377f25be43.png)
| center             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/0b819396-e77e-b31c-8765-a03a6acff0de.png)
| space-between             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/c8d7c93a-7c63-61c2-e1d1-c83b6f378952.png)
| space-around             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/150b3a82-c944-3106-4a93-09a24c69a04e.png)

#### align-item

| align-item      |       上下位置 |
|:-----------------|------------------:|
| flex-start             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/8c35a611-6b8b-cf05-c8c1-971dbe6cb2f7.png)
| flex-end             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/a2af6bfc-0974-15ce-9f1d-e8567ac786a8.png)
| center             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/c03b27cc-f3c0-513e-8625-85840e587e32.png)
| baseline             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/fa411e4f-a014-8705-ff32-70cb3a3249e2.png)
| stretch [default]             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/fbcb370a-7c06-530f-fc21-0391c22dbb7f.png)
（align-selfは省きます）

#### align-content 
※ 「flex-wrap: wrap」が適用され、アイテムが2行になっている場合のみ有効

| align-content      |       行の揃え方 |
|:-----------------|------------------:|
| stretch [default]             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/cdbf6492-60b1-9309-daeb-2624f0808c4a.png)
| flex-start             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/27f73e91-b30b-ffda-35c5-a61a2b653733.png)
| flex-end             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/137a34db-cc47-c2f9-94c4-71c2bc6c77c9.png)
| center             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/f5b1c0ea-e968-852e-90b0-4f2d88c6011e.png)
| space-between             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/2ecc0e1c-1bc7-dbf7-604a-2f1b58e53f1b.png)
| space-around             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/80987366-33c6-5442-bd7d-5ff4d4394f6a.png)



### item

| flex-grow,flex-shrink,flex-basis      |       伸縮系プロパティ |
|:-----------------|------------------:|
| flex-grow             | 初期値： 0
| flex-shrink             | 初期値： 1
| flex-basis             | 初期値： auto

![【参考】 幅・伸縮率を指定するflexboxのプロパティ](https://blog.mismithportfolio.com/web/20170115flexstretch)

#### flex-grow 
コンテナ内の余った領域を、各アイテムにどう分配するかの割合

#### flex-shrink
縮む割合をコンテナ内の余った領域からどう分配するか。
n番目に`flex-shrink: 0;`を指定した場合、どれだけコンテナが狭くなってもこれ以上は縮まない。

#### flex-basis
width のようなもの。
`flex-direction: column;`で縦並びになった際は、heightと同じ効果。

#### order

| order      |       順番の指定 |
|:-----------------|------------------:|
| 0 [default]             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/18a379a6-85e3-6261-725a-2de585399fbb.png)
| 1             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/8d6fc25e-6e70-5f67-77c6-361b79676fe7.png)
| -1             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/d474b306-c991-d900-2c14-b522110d9d0c.png)
| 9             | ![image.png](https://qiita-image-store.s3.amazonaws.com/0/74438/074d1d04-f71e-51d6-ce4b-c14a610e6424.png)

### :point_up:Flexの小技:point_up:
**:one: liの中にaタグを入れて、そのaタグの内容によって縦を揃えたい場合**
以下のようにすれば、aタグの中で縦中央揃えになる

```css
.item {
  display: flex;
}
.item a {
  display: flex;
  align-items: center;
}
```



**:two: スマホ時は、`display:block`ではなく、flex-directionプロパティを。**

```css
.container {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width:768px) {
  .container {
    flex-direction: row;
  }
}
```