<div class="container">
  <div class="box">①</div>
  <div class="box">②</div>
</div>

.container{
  display:flex;
}
.box{
  /*flexのありなしを確認してみよう*/
  flex:1;
}

親要素にflexを指定すると、子がflexboxになり横並びになる。
※その2ででてくるflex-direction: row;の状態。

子要素に特に指定なし 子要素にflex指定 flex: (flex-grow) (flex-shrink) (flex-basis) ;
flex:1;は短縮形。
　flex-grow:1
　flex-shrink:1
　flex-basis:0 をまとめたもの、
flex:1 1 0; の略です。

<div class="container">
  <div>①</div>
  <div>②</div>
  <div>③</div>
  <div>④</div>
  <div>⑤</div>
</div>

.container{
  display:flex;
  /*flex-directionの値を変えてみよう*/
  flex-direction:column;
}

flex-directionの値の初期値はrow（横並び）他には、
row-reverse（横方向逆並び）
column-reverse（縦方向逆並び）があります

<div class="container">
  <div class="box">①</div>
  <div class="box">②</div>
  <div class="box">③</div>
  <div class="box">④</div>
  <div class="box">⑤</div>
</div>

.container{
  display:flex;
  /*flex-wrapの値を変えてみよう*/
  flex-wrap:nowrap;
}
.box{
  width:28%;
}

flex-wrapは折返しの指示。
初期値はnowrap（flexコンテナに収まる）
wrap（flexコンテナからあふれて複数行に）
wrap-reverse（wrapの逆順）

nowrap wrap

<div class="container">
  <div>①</div>
  <div>②</div>
  <div>③</div>
  <div>④</div>
  <div>⑤</div>
</div>

.container{
  display:flex;
  /*justify-contentの値を変えてみよう*/
  justify-content: flex-end;
}

flexボックスを横並びさせたときの位置や間隔の指定。

flex-end center space-between space-around space-evenly

<div class="container">
  <div style="height:40px;">①</div>
  <div>②</div>
  <div style="height:70px;">③</div>
  <div>④</div>
  <div>⑤</div>
</div>

.container{
  height:60px;
  display:flex;
  /*align-itemsの値を変えてみよう*/
  align-items: flex-end;
}

flexボックスの縦位置を指定します。高さがバラバラな要素を作って配置してみました。
初期値はstretch。

stretch flex-start flex-end center baseline

  margin-lfetのみ
  <div class="container">
    <div>①</div>
    <div class="box1">②</div>
    <div>③</div>
  </div>

  margin:auto;の場合
  <div class="container">
    <div>①</div>
    <div class="box2">②</div>
    <div>③</div>
  </div>

.container{
  display:flex;
}
.box1{
  margin-left:auto;
  width:20%;
  background-color:#c55;
}
.box2{
  margin:auto;
  width:20%;
  background-color:#c55;
}

marginのかけ方でいろんな配置ができます。

margin-lfetのみ
margin:auto;に設定した場合は中央に配置される

<div class="container">
  <div class="box">子要素</div>
</div>

.container{
  height:160px;
  display:flex;
  justify-content: center;
  align-items: center;
}
.box{
  height:50px;
  width:100px;
  background-color:#eee;
}

justify-content（横並びの位置）、
align-items（縦の位置）、
どちらもcenterにすることで中央配置になります。