Flexboxの align-items: center; が効かないときの対処法

解決したいこと

ヘッダーメニューの作成時に、ロゴとメニューアイテムを縦方向にセンタリングしたい。flexboxでalign-items: center;を指定しても効かない。

原因と解決方法

.header {
 background-color: #3f51b5;
 height: 100px;
 width: 100%;

 .header-inner {
   padding: 0 140px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

.header にheight: 100px;が指定されているのが原因。
.header-innerに指定し直す。

.header {
 background-color: #3f51b5;
 width: 100%;

 .header-inner {
   padding: 0 140px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 100px;
 }

無事解決。

こんな商品もつくっています👇🏻