CSS Flex stretch not working together with vertical align

This question already has an answer here:

Flexbox: center horizontally and vertically 8 answers

---

If you also make the inner div 'sa flex container, you can center their text/content vertically.

Stack snippet

nav {
  display: flex;
  /*align-items: stretch;              stretch is default, so this is not needed  */
  justify-content: center;
  background: #60B99A;
  color:white;
}

nav div {
  display: flex;                   /*  added  */
  align-items: center;             /*  added  */
}

nav div:hover {
  color: #60B99A;
  background: white;
}

nav div img {
  display: block;                  /*  remove the bottom white space  */
}

<nav>
    <div><img src="http://placehold.it/100x150/f00"></div>      
    <div>Artists</div>                          
    <div>Playlists</div>
    <div>Genres</div>
</nav>

链接地址: http://www.djcxy.com/p/76006.html

上一篇: 中心元素与柔性盒在柔性下增长受到限制

下一篇: CSS Flex拉伸不与垂直对齐一起工作