gap
Bài học 10 trên 15 trong khóa học CSS Flexbox: khóa học đầy đủ của Coddy.
Thuộc tính gap điều khiển khoảng cách giữa các mục flex.
Ví dụ:
.container {
display: flex;
gap: 16px;
}Các thuộc tính
row-gapvàcolumn-gapđiều khiển riêng khoảng cách trên từng trục
Thử thách
Dễthêm khoảng cách gap đã cho vào flexbox, bạn có thể thêm các thuộc tính flex container khác nếu muốn.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>Tất cả bài học trong CSS Flexbox: khóa học đầy đủ
Tự luyện tập: Playground Web