flexbox内の高さを統一したい

Question

![
display:flex;で上記のSNSformを横並びにしたのですが高さが不揃いになってしまいます。おそらくいいね横の画像が大きいからだと思いますがどうすれば３つの要素の高さを統一できますか？(いいね横の画像の大きさは16×16pxです)よろしくお願いいたします。

 <div class="snsform"> 
   <small class="twitter"><i class="fab fa-twitter"></i>ツイート</small>
   <small class="facebook">いいね！</small>
   <small class="share">シェア</small>
 </div>  

.snsform {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 10px;
}
.facebook,.share,.twitter {
  background-color: #1877f2;
  padding: 0 5px;
  margin: 0 4px;
  border-radius: 2px;
}
.twitter {
  background-color: #1b95e0;
}
.facebook::before {
  content: url(OqOE21UvWe3.png);
  position: relative;
  top:3px;
  left: -3px;
}

Comments

[itagagaki]

上辺の位置を揃えたいという意味ですか？

[raid-23]

そうですね。class="facebook"を左右と同じ上辺に揃えたいです。あと、左右をclass="facebookと同じ上辺にすることも可能ですか？追加ですいません

Answer 1

たぶんもっといい解はあると思うのですが、以下、私が試行錯誤してみた案です。
まず、.snsformではalign-items: start;にします。これで上辺が揃います。
そして.facebook,.share,.twitterにheight: 23px;を加えます。これで高さが揃います。
しかしこのままでは「ツイート」と「シェア」の表示が上寄りになってしまっています。
そこで.facebook,.share,.twitterにline-height: 25px;を加えます。
heightとline-heightは調整してみてください。

Answer 2

​こうしてみてはどうでしょうか。

.snsform {
  display: flex;
  justify-content: center;
  /* align-items: baseline;  これを消す */
  font-size: 10px;
}

下端を揃えたければ、さらにこうするといいかもしれません。

.facebook,.share,.twitter {
  background-color: #1877f2;
  padding: 0 5px;
  margin: 0 4px;
  border-radius: 2px;
/* ↓以下を追加 */
  display: flex;
  align-items: end;  
}