Menu
CoddyTech
Bắt đầu học

Flexbox

Bài học 3 trên 15 trong khóa học CSS Flexbox: khóa học đầy đủ của Coddy.

Hãy cùng tìm hiểu về vùng chứa flex.

Để tạo vùng chứa flex, hãy đặt thuộc tính display thành flex,

.container {
  display: flex;
}

Đoạn HTML sau có thể dùng cùng với phần này,

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
challenge icon

Thử thách

Dễ

Tạo một vùng chứa flex.

Bạn đã có code HTML cho vùng chứa này, nhiệm vụ của bạn là thêm phần code CSS còn thiếu.

Lưu ý: Không thay đổi code HTML đã cho hoặc phần CSS tô màu các phần tử.

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>
    </body>
</html>

Tất cả bài học trong CSS Flexbox: khóa học đầy đủ

1Giới thiệu

Giới thiệuVùng chứa và các mục

2Vùng chứa Flex

Flexboxflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentgapCăn giữa hoàn hảo

3Các phần tử flex

Phần tử conorderflex-growalign-self

Tự luyện tập: Playground Web