Sắp xếp các thành phần từ trên xuống dưới, từ trái qua phải

Bài viết này sẽ hướng dẫn cho bạn một số cách để sắp xếp các thành phần từ trên xuống dưới, từ trái qua phải. Nếu không hiểu các bạn có thể xem trong hình dưới.

Do chỉ tập trung vào CSS nên code HTML rất đơn giản chỉ là 1 list ul có 6 li
và ít CSS để phân biệt các thành phần.

[CodePen height=300 show=html href=Ekcbz user=jshung92]

Sử dụng position: absolute

Nếu bạn muốn vị trí các thành phần là chính xác như bạn đã thiết kế và bạn biết rõ width và height của từng phần mà bạn muốn sắp xếp, bạn có thể dùng position: absolute để cố định nó. Đây là cách thường dùng cho các thành phần mà bạn biết rõ có width và height.

[CodePen height=350 show=css href=gasif user=chriscoyier]

Chia cột bằng display: flex

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 306px; /* tính cả border */
  width: 200px;
}

Cho thành phần cha của các thành phần cần sắp xếp là display: flex. Chuyển Flex sang dạng column và cho phép wrap với width và height cố định. Tức là các thành phần con sẽ width bằng width của thành phàn cha và xếp từ trên xuống, khi tổng height các thành phần con bằng height cha thì sang cột mới bên phải.

Nếu thành phần cha không có width thì width của cột sẽ tự động căn chỉnh theo thành phần con. Nếu thành phần cha không có height thì sẽ chỉ có 1 cột từ trên xuống dưới.

[CodePen height=350 show=css href=yHoeI user=chriscoyier]

Chú ý: Đối với IE thì chỉ hoạt động trên IE10+

Dùng CSS3

ul {
  column-count: 2;
  column-gap: 0;
}
li {
  display: inline-block;
}

Một cách nữa là đât display:inline-block cho các thành phần con và dùng code CSS3 “column-count” (số cột) và “column-gap” (khoảng cách giữa các cột).

[CodePen height=350 show=css href=oFyEH user=chriscoyier]

Các thành phần con sẽ được sắp xếp theo cách phù hợp nhất so với yêu cầu. Cột sẽ được chia dựa theo width của thành phần cha nên nếu muốn giống theo thiết kế thì bạn cần điều chỉnh width của thành phần cha một cách chính xác.

Chú ý: Đối với IE thì chỉ hoạt động trên IE10+

Bài này là mình viết theo bài gốc tiếng Anh. Xem bài gốc: http://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float/

Viết theo cách mình hiểu nên một số điểm có thể không đúng lắm. Mong các bạn thông cảm