Flexbox

#要素の配置と並び
HTMLとCSSをこのように記述します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="blog.css">
    <title>blog用</title>
  </head>
  <body>
    <div class="parent-block">
      <div class="child-block-1"></div>
      <div class="child-block-2"></div>
      <div class="child-block-3"></div>
    </div>
  </body>
</html>
```

```css
.parent-block {
  background-color: lightgrey;
  height: 300px;
  width: 400px;
}

.child-block-1 {
  background-color: lightcoral;
  height: 100px;
  width: 100px;
}
.child-block-2 {
  background-color: lightblue;
  height: 100px;
  width: 100px;
}
.child-block-3 {
  background-color: lightgreen;
  height: 100px;
  width: 100px;
}
```

ブラウザではこのように３つのブロック要素が表示されます。
![flexbox1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/a0f68f08-c86d-3433-8f6c-2fd4fafe5057.png)

ブロック要素は縦に並ぶ習性があるのでこのように並びます。
これらの親要素にdisplayプロパティを追加し、値を「: flex;」にしてみましょう。

```css
/* 追加する */
.parent-block {
  background-color: lightgrey;
  display: flex;
  height: 300px;
  width: 400px;
}

.child-block-1 {
  background-color: lightcoral;
  height: 100px;
  width: 100px;
}
.child-block-2 {
  background-color: lightblue;
  height: 100px;
  width: 100px;
}
.child-block-3 {
  background-color: lightgreen;
  height: 100px;
  width: 100px;
}
```

ブラウザを確認しましょう。
![flexbox2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/acb1df50-805e-53f5-6738-b0046b1ad35d.png)

「display: flex;」を記述するとこのように子要素が横並びになります。<br>また、この子要素らは並び順を変えたり、要素間に空間を作ることができます。<br>「display: flex;」を用いて配置や並びを変更する方法のことを<b>Flexbox</b>といいます。

-----
##・【justify-contentプロパティ】
値によって子要素の配置を調整することができます。
###: flex-start;
左寄せになります。
![flexbox2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/b2466689-161c-9500-0101-472f4c9d7037.png)
###: center;
中央寄せになります。
![justify-center.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/8081eba7-3e41-0c87-5872-bde7e763367c.png)
###: flex-end;
右寄せになります。
![justify-end.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/d3527dc2-dcec-a6ff-5dbb-65fd72f05374.png)
###: space-between;
両端の要素が両端に寄り、中の要素は等間隔で配置されます。
![justify-between.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/b3516c35-39fe-7617-f3d1-26afaa7fa2ee.png)
###: space-around;
両端の余白と中の要素の余白が等間隔で、[両端の余白:中の要素間の余白]が[1:2]で作られます。
![justify-around.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/2a36c8b7-6a68-bfdf-bc3f-7c598060a256.png)
###: space-evenly;
両端と要素間がすべて等間隔で余白ができます。
![justify-evenly.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/05e5b07f-a60c-8794-3de9-79c69febf315.png)
------
##・【align-itemsプロパティ】
値によって要素の並びに対して垂直方向の位置を調整することができます。

###: flex-start;
子要素が上揃えになります。
![flexbox2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/eff1a7c5-b54e-646d-9222-2d732f6119aa.png)
###: center;
子要素が中央揃えになります。
![align-center.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/a59d321e-5174-8b77-7ba3-79d419a15f8a.png)
###: flex-end;
子要素が下揃えになります。
![align-end.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/6bbf8ec3-c41c-18c3-95b7-3bac9eb93713.png)
----
##・【flex-directionプロパティ】
子要素の並び順や方向を調整することができます。
###: row;
子要素が左から表示されます。
![flexbox2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/ad3bbed9-3989-d11f-c022-7aef7b13f10d.png)
###: row-reverse;
子要素が右から表示されます。
![direction-reverse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/672b7797-ad10-4ff6-e3c7-6b80c3ea9626.png)
###: column;
子要素が上から表示されます。
![direction-column.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/5c250248-7102-ee72-400f-030a4a51199a.png)
###: column-reverse;
子要素が下から表示されます。
![direction-column-reverse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/fdee8dea-7e7d-6f96-b945-2cfc11c54c5c.png)
-----
##positionプロパティ
Flexboxとは違いますが、要素の配置を調整する方法として<b>positionプロパティ</b>があります。

|プロパティの値|説明|
|:--:|:--:|
|: relative;|要素を子要素の基準に指定することができます。|
|: absolute;|relativeで指定した親要素を基準に配置を調整することができます。|
|: fixed;|要素をその位置にこていすることができます。|

###使い方
HTMLとCSSに以下のように記述します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="blog.css">
    <title>blog用</title>
  </head>
  <body>
    <div class="parent-block">
      <div class="child-block"></div>
    </div>
  </body>
</html>
```
```css
.parent-block {
  background-color: lightgrey;
  height: 200px;
  width: 200px;
}

.child-block {
  background-color: lightcoral;
  height: 100px;
  width: 100px;
}
```
ブラウザ上ではこのように表示されます。
![position1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/bb230b97-9488-bfeb-2e76-6003b1569a4a.png)
親要素（parent-block）の上に子要素（child-block）が乗っています。<br>この親要素に「position: relative;」を書いてみましょう。

```css
.parent-block {
  background-color: lightgrey;
  height: 200px;
  width: 200px;
  /* 追加します */
  position: relative;
}

.child-block {
  background-color: lightcoral;
  height: 100px;
  width: 100px;
}
```
これで親要素が基準に設定できました。
次に子要素に「position: absolute;」を書きます。

```css
.parent-block {
  background-color: lightgrey;
  height: 200px;
  width: 200px;
  position: relative;
}

.child-block {
  background-color: lightcoral;
  height: 100px;
  width: 100px;
  /* 追加します */
  position: absolute;
}
```

###・【top , right , bottom , leftプロパティ】
値に指定した数値だけ要素を移動させることができます。
CSSを記述します。

```css
.parent-block {
  background-color: lightgrey;
  height: 200px;
  width: 200px;
  position: relative;
}

.child-block {
  background-color: lightcoral;
  height: 100px;
  width: 100px;
  position: absolute;
  /* 追加します */
  top: 30px;
  left: 50px;
}
```
ブラウザではこのように表示されます。
![position2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/9a7f54ef-ed21-3ed5-3f7d-9f12417989d6.png)
これは<b>relativeを指定した親要素を基準</b>にし、<b>absoluteを指定した子要素</b>が<b>top(見た目だと下方向)</b>へ30px、<b>left</b>へ50px、のところへ配置されたことになる。

-----
###次は実際にwebページを作ってみます。