flex による均等な３分割レイアウト

他にも応用がきくので、コピペの為にメモ。

<div class="container-parent">
   <div class="container">Ａ</div>
   <div class="container">Ｂ</div>
   <div class="container">Ｃ</div>
</div>

<ul class="container-parent">
   <li class="container">Ａ</li>
   <li class="container">Ｂ</li>
   <li class="container">Ｃ</li>
</ul>

calc で計算して width を指定する。（レスポンシブも例として書いてる）

.container-parent{
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
}
.container{
   width: calc(100% / 3);
   width: -webkit-calc(100% / 3);
   text-align: center;
}
@media (max-width: 800px){
   .container{
      flex: 100%;
      max-width: 100%;
   }
}

width: 33.33333% と指定するのをネット検索してよく見かけるが、
calc対応ブラウザなら、calcを使うべきだ。
https://caniuse.com/#search=calc
で確認すると良いだろう。
ベースとしてのサンプル用ＣＳＳ

body{  margin: 0; padding: 0; }
ul{ list-style: none; margin: 0; padding: 0; }
.container-parent div:nth-child(1), .container-parent li:nth-child(1){ background-color: #cefff5; }
.container-parent div:nth-child(2), .container-parent li:nth-child(2){ background-color: #abde89; }
.container-parent div:nth-child(3), .container-parent li:nth-child(3){ background-color: #f2eab5; }

例）

幅 800px 以下にブラウザを縮めた時、

境界線を付ける場合は、margin で描画させて、calc（）の中でその分調整する。

.container-parent{
   display: flex;
   flex-wrap: wrap;
   padding: 1px;
   background-color: #909090;
}
.container{
   width: calc(100% / 3 - 5px);
   width: -webkit-calc(100% / 3 - 5px);
   margin: 2px;
   text-align: center;
}

更にコンテンツを中央にする場合は、
コンテンツでも、display: flex;
そして、flex-direction: column; として
justify-content 属性を指定する

.container-parent{
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
}
.container{
   width: calc(100% / 3);
   width: -webkit-calc(100% / 3);
   height: 100px;
   display: flex;
   display: -webkit-flex;
   text-align: center;
   flex-direction: column;
   -webkit-flex-direction: column;
   justify-content: space-around;
   -webkit-justify-content: space-around;
}

float 属性を指定しない横並び配置のデザイン - Oboe吹きプログラマの黙示録