Kiểm soát kích thước Flex Items với thuộc tính flex

Thuộc tính flex (shorthand) kiểm soát cách flex items co giãn: flex: grow shrink basis.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  .container { display: flex; width: 100%; gap: 10px; }
  div {
    height: 200px;
    color: white;
    text-align: center;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .first { background-color: rgb(55, 0, 255); flex: 2 1 auto; } /* Grow 2 lần, shrink 1, basis auto */
  .second { background-color: red; flex: 1 1 auto; }              /* Grow 1, shrink 1, basis auto */
  .third { background-color: rgb(140, 0, 255); flex: 1 1 auto; }  /* Grow 1, shrink 1, basis auto */
</style>
</head>
<body>
<h1>Kiểm soát kích thước Flex Items với flex</h1>
<div class="container">
  <div class="first">First (flex: 2 1 auto)</div>
  <div class="second">Second (flex: 1 1 auto)</div>
  <div class="third">Third (flex: 1 1 auto)</div>
</div>
<p>First item lớn gấp 2 lần các item còn lại khi có không gian thừa</p>
</body>
</html>

Phân tích flex: grow shrink basis

Thành phần	Mặc định	Mô tả
flex-grow	0	Khả năng lớn lên khi có không gian thừa. 0 = không lớn. Tỷ lệ so với tổng grow của tất cả items.
flex-shrink	1	Khả năng co lại khi thiếu không gian. 0 = không co (có thể tràn). Tỷ lệ so với tổng shrink.
flex-basis	auto	Kích thước ban đầu trước khi grow/shrink. auto = dùng width/height hoặc content size.

Các từ khóa shorthand phổ biến

Shorthand	Tương đương	Hành vi
flex: initial	0 1 auto	Không grow, co được, basis = width/content (mặc định)
flex: auto	1 1 auto	Grow và shrink đều được, basis = width/content
flex: none	0 0 auto	Cố định kích thước (không grow, không shrink)
flex: <number>	<number> 1 0	flex: 2 → 2 1 0 (grow 2, shrink 1, basis 0)
flex: <length>	1 1 <length>	flex: 200px → 1 1 200px

Ví dụ thực tế: Layout Sidebar + Content


.layout { display: flex; min-height: 100vh; }
.sidebar { flex: 0 0 280px; }           /* Cố định 280px, không grow/shrink */
.content { flex: 1 1 auto; min-width: 0; } /* Chiếm phần còn lại, co được */

Lưu ý quan trọng

flex-basis: 0 vs auto: flex: 1 (tức 1 1 0) chia đều không gian TỔNG. flex: 1 1 auto chia đều không gian THỪA sau khi cấp basis.
min-width: 0 trên flex child quan trọng khi content dài (text overflow) để cho phép shrink đúng.
Dùng gap thay vì margin cho spacing giữa flex items.