Giả sử bạn có container flexbox với button bên trong:
<div class="container"> <button class="button">Button</button> </div>Nếu bạn thử căn giữa button (child element) ngang với property justify-content như sau:
.container { height: 300px; display: flex; justify-content: center; }Thì height của button (child element) sẽ stretch bằng height của parent element (trong trường hợp này 300px):
Điều này có thể không phải bạn muốn!
Có vài cách ngăn flex items (children của flex container) stretch vertically.
Nếu bạn căn giữa flex items dọc với property align-items, stretch tự động biến mất:
.container { height: 300px; display: flex; justify-content: center; /* Vertical center alignment: */ align-items: center; }
Nhưng nếu bạn không muốn vertically align flex items của flex container?
Thì bạn có thể dùng giá trị max-content của CSS property height trên flex item:
.button { height: max-content; }
Bây giờ height của flex item sẽ được quyết định bởi height của content nó, trong ví dụ button này là text, 14px (+ padding mặc định của button):
Bạn cũng có thể dùng property align-self trên flex item:
.button { align-self: flex-start; }Điều này cho cùng kết quả như dùng max-content trong use cases đơn giản, nhưng tùy context cụ thể (thử cả hai).