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

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

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

親要素.containerにdisplay:flex;を指定すると、 子要素はflexボックスとなり横並びになります。
子要素にflexプロパティを指定して幅を調整できます。

子要素に特に指定なし 子要素にflex:1を指定した場合 子要素のflexの値を変える。 ②は①の3倍のサイズに

例えばこのようなレイアウトを作りたいときに使えます

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

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

親要素に指定し並ばせる方向を指示できます。値の初期値はrow（横並び）
column（たて並び）
row-reverse（横方向逆並び）
column-reverse（たて方向逆並び）があります。

flex-direction:column;
flex-direction:row;
flex-direction:row-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:nowrap;  /* 値を変えてみよう */
}
.box{
  width:30%;
}

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

flex-wrap:nowrap;
flex-wrap:wrap;

<div class="container">
  <div class="box">①</div>
  <div class="box">②</div>
  <div class="box">③</div>
  <div class="box">④</div>
  <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: wrap;
  align-content: center;  /* 値を変えてみよう */
  height:200px;
}
.box{
  width:30%;
}

親要素にflex-wrap: wrap;（複数行になる）を指定したときの、子要素の配置のされ方を指定します。
stretch（親要素の高さぴったりになる）
flex-start（親要素の頭から始まる）
flex-end（親要素の下付けになる）
center（親要素の天地のセンターになる）

必ず複数行のときに使います。下のように、align-content:center; でも1行だと意味がないです。。。

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

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

flexボックスの位置や間隔を指定します。

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

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

flexボックスのたて位置の配置方法を指定します。高さがバラバラな要素を作って配置してみました。

stretch（高さの指定していない子要素は、高さが親要素に揃います）
flex-start（子要素は親要素の上にそろいます）
flex-end（子要素は親要素の下にそろいます）
center（子要素は親要素に対して天地のセンターに配置されます）
stretch（子要素は親要素の天地のセンターかつ、文字の下の位置にそろいます）

align-items:stretch;

  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;  /* 右に移動する */
  background-color:#c55;
}
.box2{
  margin:auto;  /* センターになる */
  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{
  background-color:#eee;
}

親要素にセンタリングするプロパティを入れます。

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

<div class="container">
  <div class="header">
    <div class="header-logo">logo</div>
    <ul class="header-nav">
      <li class="header-nav-a">menuA</li>
      <li class="header-nav-a">menuB</li>
      <li class="header-nav-a">menuC</li>
    </ul>
  </div>
  <div class="content">
    <div class="key">key</div>
    <ul class="column">
      <li class="col">col1</li>
      <li class="col">col2</li>
      <li class="col">col3</li>
      <li class="col">col4</li>
      <li class="col">col5</li>
      <li class="col">col6</li>
    </ul>
  </div>
  <div class="footer">footer</div>
</div>

.header{
  display:flex;
}
.header-nav{
  display:flex;
  margin-left:auto;
}
.key{
  height:100px;
  display:flex;
  justify-content: center;
  align-items: center;
}
.column{
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
.col{
  width:30%;
}

※border、margin、paddingなどは省略しています。

cssは、flexプロパティを使った要素だけ記載してみました。たったこれだけの記述でも、Webサイトの大枠が組めるのがわかります。