flexで高さを揃えない方法

cssのflexプロパティを使って、要素を横並びにした時普通にしてると全部高さが揃っちゃう。

普段ならそのまま高さの揃ったboxを利用してるけど、レイアウトの都合上どうしても高さが揃ってない要素を並べる時がある。

そんな時に便利なflexで高さを揃えない方法のご紹介です。

.wrapp {
  display: flex;
  align-items: flex-start;
}

「align-items」でflexの高さを揃えず横並びする事が可能です。

実際に下にサンプルを用意したのでみてみてください。

下のサンプルでは「align-items」の値を操作できます。
「align-items」の値が「flex-start」だと、上に揃って
「align-items」の値が「flex-end」だと、下に揃って
「align-items」の値が「center」だと、真ん中揃えになるよ。

サンプル

CSS

.wrapp {
  display: flex;
 
  /* 上揃え */
  align-item: flex-start;
 
  /* 下揃え */
  align-item: flex-end;
 
  /* 中央揃え */
  align-item: center;
}