Hàng chứa ba ô hoặc hai ô
```css
.row { display: flex; flex-wrap: wrap; }
.block_3 { flex: 0 0 auto; width: 33.333333%; padding: 0.75rem; }
.block_2 { flex: 0 0 auto; width: 50%; padding: 1rem; }
```
.row là vùng chứa flex. flex-wrap:wrap cho phép các ô sang hàng khác khi cần; flex:0 0 auto trong mẫu không tự giãn hoặc co ngang các ô, mà dùng width làm cơ sở cỡ. Khi không vừa và được wrap, ô có thể xuống hàng. Ba ô block_3 yêu cầu khoảng một phần ba mỗi ô; hai ô block_2 yêu cầu một nửa mỗi ô.
Mẫu đặt box-sizing:border-box cho các phần tử, nên width đã bao đệm và viền. Nếu vẫn tính width theo content-box rồi cộng thêm padding vào ba ô tổng gần 100%, các ô có thể không vừa hàng. Không chỉ cộng các con số phần trăm mà bỏ qua đệm, viền và cách tính hộp.
Quy tắc riêng khi màn hình hẹp
```css
* { box-sizing: border-box; }
@media (max-width: 600px) {
.block_3, .block_2 { width: 100%; }
}
```
Ở vùng hiển thị không vượt 600px, quy tắc media viết sau đặt cả block_3 và block_2 rộng 100%. Khi đó các ô của mẫu đi xuống từng hàng để nội dung dễ đọc. Màn hình rộng hơn giữ kiểu ba ô và hai ô.
Giữ tên class và tên tệp chính xác: style.css khác styles.css. Nếu mất toàn bộ kiểu riêng, kiểm link và đường dẫn trước; nếu chỉ một vùng sai, kiểm class của vùng đó.
Bài luyện
HTML ở thư mục g12-css-b18/, CSS ở css/style.css. Dòng link nào trỏ đúng tệp CSS?
Tệp không nằm ngay cạnh HTML trong mẫu.
assets chứa media, không chứa style.css.
Tên styles.css khác style.css đã tạo.
Đúng. Cả thư mục và tên tệp đều khớp.
Lời giải
Từ vị trí HTML, đi vào css/ rồi mở style.css nên href="css/style.css". Sai thư mục hoặc thêm s vào tên có thể làm trình duyệt không tìm được CSS.
Bài luyện
Trong css/style.css, url("../assets/banner.svg") được tính từ đâu?
Đây là đường dẫn tương đối, không phải đường dẫn gốc máy.
Đúng. Mốc là vị trí stylesheet.
URL tương đối trong CSS ngoài có mốc khác HTML.
Tiêu đề không quyết định đường dẫn.
Lời giải
Với CSS ngoài, URL tương đối được giải từ vị trí tệp CSS. css/style.css nằm trong css/, nên ../assets/banner.svg đi lên thư mục dự án rồi vào assets/.
Bài luyện
Vì sao mẫu dùng border-box cho các ô có width theo phần trăm và padding?
Đúng. width bao nội dung, đệm và viền.
box-sizing không đổi loại media.
Tên class vẫn phân biệt hoa–thường.
Cách tính hộp không thay việc tổ chức flex.
Lời giải
Với border-box, width đã gồm đệm và viền. Điều đó giúp ba ô width gần một phần ba cộng lại vừa vùng chứa theo mẫu. Với content-box, đệm có thể cộng thêm ngoài width và làm ô xuống hàng.
Bài luyện
Theo CSS mẫu, ở vùng hiển thị 390px, các ô block_3 nhận width nào?
Quy tắc media khớp có thể thay width ban đầu.
Số trang con không quyết định width.
Đúng. 390px không vượt 600px.
600px là ngưỡng điều kiện, không phải width gán cho ô.
Lời giải
390px thỏa max-width:600px. Trong CSS mẫu, khai báo .block_3{width:100%} ở media viết sau và cùng mức nên có hiệu lực; mỗi ô chiếm một hàng trong bố cục này.
Đang học