Sử dụng flexbox để sắp xếp khối hộp responsive (chỉ dùng CSS)

Hình thức giải bài tập giùm không được khuyến khích ở diễn đàn này đâu. Nếu muốn hỗ trợ ít ra bạn cũng phải có những dòng HTML, CSS của bạn đưa lên và bạn đặt câu hỏi tại sao nó ra như này mà nó không ra như kia, để người khác còn hỗ trợ.

Còn không, mình nghĩ là bạn ngồi đợi đến… mọc râu.

Mã Pug đó bác Thìn, có thể xem là pre-processor của HTML, dịch ra như thế này:

<div class="wrapper-box-content">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
</div>

Chào bạn,

Cảm ơn lời nhắc nhở của bạn. Mình ko biết chứ thực ra mình đã tự làm được 2 cách giải nhưng đều bị lỗi. Hiện nay mình đang di chuyển nên chiều mình sẽ up cách làm của mình sau, hy vọng rằng bạn có thể bớt chút thời gian để xem giúp mình.

Mình kết hợp giữa flexbox và grid.

Thuần flexbox không thì mình chỉ dùng cho 1 hàng ngang hay 1 hàng dọc thôi. Sử dụng flexbox cho 2-dimensional space mình chưa thử.

Codepen

<div class="wrapper">
  <div class="box-1">Box 1</div>
  <div class="box-2">Box 2</div>
  <div class="box-3">Box 3</div>
  <div class="box-4">Box 4</div>
</div>

html {
  font-size: 62.5%;
}

.wrapper > * {
  font-size: 1.6rem;
  padding: .5rem;
  text-align: center;
}

.box-1 { background-color: #ccc; }
.box-2 { background-color: #bbb; }
.box-3 { background-color: #aaa; }
.box-4 { background-color: #999; }

.wrapper {
  display: grid;
  grid-template-columns: repeat(12 8.333333%);
  grid-gap: 10px 10px;
}

.box-1 {
  grid-column: 1 / 9; 
}

.box-2 {
  grid-column: 9 / 13;
}

.box-3 {
  grid-column: 1 / 5;
}

.box-4 {
  grid-column: 5 / 13;
}

@media only screen and (max-width: 900px) {
  .box-1 {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
  }
  
  .box-2 {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
  }
  
  .box-3 {
    grid-column: 7 / 13;
    grid-row: 2 / 3;
  }
  
  .box-4 {
    grid-column: 1 / 13;
    grid-row: 3 / 4;
  }
}

@media only screen and (max-width: 600px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper > *:not(:last-child) {
    margin-bottom: 10px;
  }
}

Mình thấy lạ là có 4 khối hộp nhưng lại chỉ có box-1, box-2, box-3, vậy thì BOX còn lại không lẽ tận dụng box “cha mẹ” wrapper-box-content. Cái này tay nào đẻ ra thật là troll người khác rồi. Hoặc dụng ý gì đó chơi kiểu đánh đố. Cũng không rõ là chủ topic định tiếp cận theo hướng 12 hay 16 column grid view?

@superthin
Ôi đúng rồi, có 4 khối mà. Hihi, chắc do mình up vội trước khi đi nên bị sót chứ mình ko có đánh đố ai đâu. Mình mới tự học và cũng mới tham gia forum nên chưa hiểu nhiều. Cảm ơn bạn đã “fix bug” cho mình kakak.

@hungsteve: Mình chưa thử grid bạn ạ do mình đang thử xài bootstrap để làm. Chiều nay khi mình có thể sử dụng laptop được mình sẽ up lên. Khi đó hy vọng bạn có thể cùng mình giải bài này vì mình đã dành 6 - 7 tiếng để thử mọi cách nhưng dường như vẫn chưa tìm ra cách tối ưu bạn ạ. Tks bạn nhiều.

Mình tiếp cận theo hướng 12 column bạn ah

Hi Hùng,

Cảm ơn bạn nhé. Cách của bạn làm hay quá. vậy là mình đã được học thêm 1 cách mới rồi. Bạn xem giúp mình cách của mình làm với.

Mình sử dụng Bootstrap nhưng mình thấy nó cứ “sai sai” thế nào ấy vì mình phải fix cứng kích thước height của box 1.

Nếu trong trường hợp mình sử dụng thêm js (Ở màn hình của tablet) để gán giá trị height của box 1 bằng tổng giá trị height của box 2 + box 3 thì liệu có giải quyết được vấn đề liên quan tới height ko nhỉ?

Bạn xem giúp mình ở link này nhé
Codepen

(Mình chưa biết cách để up bài link code như bạn - mình copy pase vô thì đều bị lỗi kiểu ko nhận mã)

Bạn thấy thế nào?

Vì flexbox chỉ dùng để sắp xếp các elements thành 1 hàng ngang hay 1 hàng dọc thôi. Chiều dọc hàng ngang (hàng dọc) bằng height lớn nhất (width) trong các element trong cùng 1 hàng ngang (hàng dọc).

Ví dụ, Box 1 có height là 80px, Box 2 có 100px, Box 3 có 90px. Nếu wrapper không sử dụng padding, hay các box1, box2 và box3 không có margin. wrapper chỉ có 1 hàng ngang, height của wrapper sẽ là 100px.

Cách bạn làm là cho box1 có display là absolute, tách vị trí box1 khỏi sắp xếp của flexbox. Vì vậy box2, box3, box4 đều có 1 row riêng cho nó. Nếu bạn dùng inspector thì box2 bắt đầu từ left của wrapper đến right của wrapper, nhưng do box 1 che mất nên chỉ thấy phần bên phải của nó thôi. Vị trí của box2 không tự nhiên.

Nếu dùng flexbox cho case 2, mình dùng tới 3 flex. 1 flexbox cho 2, 3 theo column direction. Flex thứ 2 cho 1 và (2,3) theo row direction. Flex cuối cùng cho (1,2,3) và 4 theo column direction.

Tóm lại, flexbox chỉ phù hợp cho dàn trải element 1 hàng ngang hay 1 hàng dọc, còn phân phối theo không gian 2 chiều không phải là mục đích thiết kế ban đầu của flexbox. Nên flexbox chỉ phù hợp với case 1 và case 3, còn case 2 không xử lý được.

P/s: mình không phải fan dùng CSS framework hay atomic design.

Nếu dùng flexbox cho case 2, mình dùng tới 3 flex. 1 flexbox cho 2, 3 theo column direction. Flex thứ 2 cho 1 và (2,3) theo row direction. Flex cuối cùng cho (1,2,3) và 4 theo colum

Cảm ơn bạn đã hỗ trợ mình nhé.

Còn hông biết bấm nút Solution cho bạn ấy nữa