2019/09/05

CSS flex で3カラムレイアウト






いまだにフレックス覚えられないので、よくやるレイアウトのメモ。



サンプル

See the Pen CSS flex で3カラムレイアウト by takapen (@takapen) on CodePen.






てすと
てすとてすとてすとてすとてすとてすと
てすとてすと




.content {
  width: 600px;
  background:#ccc;
  display: flex;
  justify-content:space-between;/*左右をアレして、それ以外は均等に配置*/
  align-items:stretch;/*高さを揃える*/
}
.item {
  width: 80px;
  background: #eee;
}