Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến bố cục cột

Các thuộc tính CSS liên quan đến bố cục cột

Bài viết này giải thích các thuộc tính CSS liên quan đến bố cục cột.

Bạn có thể học cách mô tả bố cục cột.

YouTube Video

HTML để Xem trước

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

Bố cục cột

các cột 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

Thuộc tính CSS columns cung cấp một cách tiện lợi để hiển thị nội dung được chia thành nhiều cột. Với một khai báo duy nhất, bạn có thể dễ dàng thiết lập chiều rộng cột và số lượng cột, phù hợp với thiết kế đáp ứng. Điều này đặc biệt hiệu quả khi yêu cầu bố cục mà văn bản được hiển thị dài theo chiều dọc và sắp xếp thành nhiều cột, chẳng hạn như trong báo hoặc tạp chí.

  • Trong ví dụ này, nội dung được chia thành 3 cột với khoảng cách 20px và một đường viền 2px giữa các cột. Ngoài ra, phần tử h5 kéo dài qua nhiều cột.

columns là cách viết rút gọn cho các thuộc tính column-width và column-count.

Cú pháp của thuộc tính columns 

1columns: <column-width> <column-count>;

columns tuân theo định dạng này.

  • <column-width>: Xác định chiều rộng của mỗi cột. Bạn có thể sử dụng giá trị auto hoặc bất kỳ đơn vị độ dài nào (ví dụ: px, em, %, v.v.).
  • <column-count>: Xác định số lượng cột. Được biểu thị bằng giá trị số.
Thuộc tính column-width 
1.container {
2  column-width: 250px;
3}

column-width là thuộc tính xác định chiều rộng tối thiểu của mỗi cột. Khi được sử dụng với column-count, việc sắp xếp tự động và điều chỉnh các cột trở nên khả thi. Trình duyệt tính đến chiều rộng của vùng chứa và tự động tính toán số lượng cột cần thiết.

  • Trong ví dụ này, chiều rộng mỗi cột là 250px, và số lượng cột tối ưu được tính toán dựa trên chiều rộng của vùng chứa.
Thuộc tính column-count 
1.container {
2  column-count: 3;
3}

Thuộc tính column-count được dùng để xác định rõ số cột mà phần tử chỉ định sẽ được chia. Khác với column-width, thuộc tính này cố định số lượng cột.

  • Trong ví dụ này, nội dung trong vùng chứa được chia thành ba cột.
Thuộc tính column-gap 
1.container {
2  column-gap: 20px;
3}

Thuộc tính column-gap được dùng để xác định khoảng cách (khoảng trống) giữa mỗi cột. Thuộc tính gap cũng thường được dùng trong CSS Grid, nhưng column-gap hữu ích khi bạn chỉ muốn tùy chỉnh khoảng cách giữa các cột.

  • Trong ví dụ này, khoảng cách giữa mỗi cột là 20px. Giá trị mặc định là 16px.
Thuộc tính column-rule 
1.container {
2  column-rule: 2px solid #333;
3}

Thuộc tính column-rule được dùng để vẽ các đường kẻ giữa các cột. Nó có cú pháp tương tự như thuộc tính border và cho phép bạn xác định chiều rộng, kiểu và màu sắc của đường kẻ.

  • Trong ví dụ này, một đường kẻ đen liền nét với chiều rộng 2px được hiển thị giữa các cột. column-rule có thể được chia nhỏ thành ba thuộc tính sau:.
    • column-rule-width: Xác định chiều rộng của đường kẻ.
    • column-rule-style: Xác định kiểu dáng của đường kẻ. Ví dụ, có các kiểu như solid, dashed, dotted, v.v.
    • column-rule-color: Xác định màu sắc của đường kẻ.
Thuộc tính column-span 
1h5 {
2  column-span: all;
3}

Thuộc tính column-span cho phép một phần tử cụ thể trải rộng qua nhiều cột. Nó chủ yếu được sử dụng cho các phần tử như tiêu đề hoặc tiêu đề nhỏ. Có hai giá trị có thể sử dụng:. - none: Phần tử không trải qua các cột và nằm gọn trong một cột duy nhất. Đây là giá trị mặc định. - all: Phần tử được hiển thị trải dài qua tất cả các cột.

  • Trong ví dụ này, phần tử h5 được hiển thị trải rộng qua nhiều cột.
Thuộc tính column-fill 
1.container {
2  column-fill: balance;
3}

column-fill là một thuộc tính điều chỉnh cách nội dung được phân bố qua các cột. Thông thường, các cột được làm đầy đều nhất có thể, nhưng thuộc tính này cho phép bạn chỉ định một cách sắp xếp khác. Các giá trị sau đây có sẵn:. - balance: Nội dung được sắp xếp để lấp đầy các cột đồng đều. Đây là giá trị mặc định. - auto: Các cột sẽ được làm đầy tự động. Cột cuối cùng có thể trở nên dài hơn.

  • Cài đặt này điều chỉnh để nội dung được phân bố đều.
Sử dụng với Media Queries 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

Thuộc tính columns có thể được kết hợp với media queries để hỗ trợ thiết kế phản hồi (responsive design). Bạn có thể linh hoạt thay đổi số lượng cột và độ rộng cột tùy thuộc vào các kích thước màn hình khác nhau.

  • Trong ví dụ này, khi độ rộng màn hình là 600px hoặc nhỏ hơn, sẽ chỉ có 1 cột. Đối với màn hình rộng hơn, bố cục sẽ được chia thành 3 cột, mỗi cột có độ rộng 200px.

Tóm tắt

Thuộc tính columns của CSS là một công cụ mạnh mẽ để dễ dàng triển khai bố cục sử dụng nhiều cột. Đặc biệt hữu ích cho thiết kế phản hồi (responsive) và bố cục văn bản ưu tiên khả năng đọc. Bằng cách kết hợp các thuộc tính liên quan, bạn có thể linh hoạt tùy chỉnh số lượng và độ rộng của các cột, khoảng cách, trang trí, v.v.

Điều này cho phép triển khai dễ dàng các thiết kế tinh vi hơn, vì vậy hãy tận dụng nó.

order 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

Thuộc tính order trong CSS được sử dụng để kiểm soát thứ tự hiển thị của các phần tử khi sử dụng bố cục Flexbox hoặc Grid. Thông thường, các phần tử được hiển thị theo đánh dấu HTML, nhưng bạn có thể thay đổi thứ tự hiển thị bằng cách sử dụng thuộc tính order. Thuộc tính này hỗ trợ thiết kế giao diện người dùng linh hoạt và xây dựng các thiết kế phản hồi.

  • Trong ví dụ này, các mục được đánh dấu trong HTML như Item 1, Item 2, Item 3, nhưng thứ tự hiển thị thay đổi thành Item 2, Item 3, Item 1 nhờ thuộc tính order của CSS.

Cơ bản về thuộc tính order

Thuộc tính order được áp dụng cho các mục trong container Flexbox hoặc Grid. Bạn xác định thứ tự sắp xếp bằng cách đặt các giá trị số nguyên cho từng mục. Theo mặc định, order của tất cả các mục được đặt là 0. Bằng cách thay đổi giá trị này, bạn có thể chỉ định thứ tự hiển thị của các mục.

Cú pháp Cơ bản 
1.item {
2  order: <integer>;
3}
  • Bạn có thể chỉ định bất kỳ số nguyên nào cho giá trị order. Có thể sử dụng các giá trị dương, âm hoặc bằng không. Giá trị càng nhỏ, phần tử sẽ được hiển thị sớm hơn, và giá trị càng lớn, phần tử sẽ được hiển thị muộn hơn.

Sử Dụng Giá Trị Dương và Âm

Bạn cũng có thể gán các giá trị âm cho thuộc tính order. Các phần tử có giá trị âm sẽ được hiển thị trước thứ tự mặc định.

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

Trong ví dụ này, Item 1 được đặt order: -1, vì vậy nó xuất hiện đầu tiên. Ngược lại, Item 3 được đặt order: 1, và Item 2 được đặt order: 2, vì vậy chúng xuất hiện theo thứ tự đó.

order trong Thiết kế Responsive

Trong thiết kế responsive, có thể thay đổi thứ tự các phần tử tùy theo kích thước màn hình. Ví dụ, trong chế độ xem trên di động, bạn có thể thay đổi thứ tự phần tử để hiển thị thông tin quan trọng trước.

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

Trong ví dụ này, ở chế độ xem bình thường, các mục được hiển thị theo thứ tự Item 1, Item 2, Item 3, nhưng khi chiều rộng màn hình dưới 600px, Item 2 xuất hiện trước, tiếp theo là Item 3, và cuối cùng là Item 1.

Những điều cần lưu ý khi sử dụng order

Việc sử dụng thuộc tính order có thể dẫn đến thứ tự hiển thị khác với thứ tự trong cây DOM. Điều này có thể ảnh hưởng đến các công cụ hỗ trợ, chẳng hạn như trình đọc màn hình. Khi thay đổi thứ tự, điều hướng bàn phím và các công nghệ hỗ trợ khác có thể không hoạt động như mong đợi. Do đó, cần xem xét kỹ lưỡng tác động đến trải nghiệm người dùng khi sử dụng order.

Kết luận

Thuộc tính CSS order là một công cụ mạnh mẽ, cho phép bạn dễ dàng kiểm soát thứ tự hiển thị của các phần tử trong bố cục Flexbox hoặc Grid. Bằng cách sử dụng các giá trị dương hoặc âm, bạn có thể thay đổi linh hoạt thứ tự của các phần tử, điều này đặc biệt hữu ích trong thiết kế responsive. Tuy nhiên, cần chú ý đến khả năng truy cập và sự khác biệt giữa thứ tự hiển thị và cấu trúc HTML. Nếu những điều này được xem xét đúng cách, thuộc tính order có thể hữu ích trong việc tạo các bố cục linh hoạt và động hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến bố cục lưới