Hello there.
Đây là html va css file của mình
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar__item {
background: yellow;
}
.navbar__link {
border: 2px solid red;
}
<body>
<div class="navbar">
<div class="nav__container">
<a href="/" id="navbar__logo">NEXT</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="/" class="navbar__link">Home</a>
</li>
<li class="navbar__item">
<a href="/" class="navbar__link">Tech</a>
</li>
<li class="navbar__item">
<a href="/" class="navbar__link">Products</a>
</li>
<li class="navbar__item">
<a href="/" class="navbar__link">Sign Up</a>
</li>
</ul>
</div>
</div>
</body>
Vấn đề của mình là, khi mình thêm property align-items: center, thì có một vài items bị mất, với trường hợp mình để height 60px thì mất logo NEXT, còn nếu set height thấp hơn nữa khoảng 20px thì mất HOME, cứ như vậy giảm xuống thì mất nhiều hơn. Mình đã đọc kỹ về display: flex nhưng chưa giải thích được tại sao lại như vậy. Nếu mình bỏ align-items: center đi, thì không cái nào bị mất cả
Vấn đề thứ hai là khi mình không bỏ align-items: center nữa, mình tăng giá trị height khoảng 100px thì tất cả lại hiện ra. Mình chưa hiểu lắm.
Mọi người giải thích cho mình với. Có thể chạy test luôn trên
Thank you very much!
EDIT:
Một số link mình đã đọc và đã hiểu
https://dfmcphee.com/flex-items-and-min-width-0/
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?