flex-wrap
Bài học 5 trên 15 trong khóa học CSS Flexbox: khóa học đầy đủ của Coddy.
Thuộc tính flex-wrap xác định các mục flex có xuống dòng hay không.
Các giá trị có thể có: wrap, nowrap, wrap-reverse (xuống dòng theo thứ tự ngược lại).
Giá trị mặc định của vùng chứa flex là nowrap.
Ví dụ:
.container {
display: flex;
flex-wrap: wrap;
}Xuống dòng là khái niệm chỉ việc các phần tử chuyển sang hàng hoặc cột tiếp theo (dòng) khi không đủ chỗ.
Thử thách
DễĐặt kiểu bọc của flexbox đã cho thành wrap-reverse.
Bạn nên thử tất cả các giá trị!
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 đủ
2Vùng chứa Flex
Flexboxflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentgapCăn giữa hoàn hảoTự luyện tập: Playground Web