Hướng dẫn bố cục CSS

là thứ bạn sẽ thấy thường xuyên nhất

Theo mặc định, các div được hiển thị trên dòng riêng của chúng, vì vậy nhiều div sẽ hiển thị chồng lên nhau. Phần còn lại của hướng dẫn này nói về cách thay đổi hành vi mặc định đó

CSS có một vài cách khác nhau để định vị các phần tử và cá nhân tôi thấy thật khó hiểu khi có quá nhiều tùy chọn để lựa chọn. Tôi có nên sử dụng phao? . Vì vậy, hãy lướt qua lịch sử ngắn gọn về bố cục trong CSS

HTML được phát hành vào khoảng năm 1993. Trong những ngày đầu phát triển web, không có thứ gọi là CSS. Việc tạo kiểu đã được thực hiện với các thẻ HTML như

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

phao nổi

Đây là cách bạn tạo điều hướng bên trái bằng float

Phao vẫn thường được sử dụng trong bố cục CSS, mặc dù chúng có một vài nhược điểm. Trình duyệt xử lý các phần tử nổi như thể chúng không chiếm dung lượng - đó là lý do tại sao div nội dung có lề trái. Hãy thử xóa phong cách đó để xem điều gì sẽ xảy ra. Sau đó, hãy thử thêm chân trang vào trang để xem tại sao các float có thể khó làm việc với

khối

Và đây là cách bạn có thể làm điều đó với các khối nội tuyến

Giống như float, các khối nội tuyến vẫn được sử dụng trong bố cục CSS, nhưng chúng cũng có nhược điểm riêng. Ví dụ: các trình duyệt sẽ bọc một khối nội tuyến vào dòng tiếp theo nếu nội dung quá rộng. Hãy thử thêm một số văn bản dài vào div nội dung và sau đó làm cho trình duyệt của bạn bớt rộng hơn để xem ý tôi là gì

Sau CSS 2, lịch sử của CSS trở nên khá phức tạp, chủ yếu là do CSS được chia thành nhiều mô-đun khác nhau với lịch sử của riêng chúng. Tóm lại, CSS 3 được xây dựng dựa trên CSS 2 và một trong những tính năng được thêm vào CSS 3 là flexbox vào năm 2017

Flexbox cho phép bạn xác định mối quan hệ giữa các phần tử cha và phần tử con. Bản thân điều đó nghe có vẻ không hữu ích lắm, nhưng nó là một công cụ cực kỳ mạnh mẽ khi bạn đang cố gắng định vị một loạt nội dung trong trang của mình. Ví dụ: với flexbox, bạn có thể yêu cầu trình duyệt hiển thị một số phần tử liên tiếp và bạn có thể cung cấp cho mỗi phần tử con các quy tắc khác nhau về cách định cỡ chính chúng. Và trình duyệt sẽ làm phần việc còn lại cho bạn

Để sử dụng flexbox, hãy đặt

.container {
  display: flex;
  flex-wrap: wrap;
}

Ví dụ: đây là ví dụ điều hướng bên trái ở trên, lần này sử dụng flexbox

Thuộc tính linh hoạt

Để sử dụng flexbox, hãy đặt

.container {
  display: flex;
  flex-wrap: wrap;
}

Dưới đây là một vài thuộc tính flex phổ biến

trưng bày. uốn cong

Đây là tài sản khởi đầu cho tất cả. Đặt cái này trên một phần tử cha (thường là div) để bảo nó sử dụng các quy tắc flex để sắp xếp các phần tử con của nó (các phần tử mà nó chứa)

.container {
  display: flex;
  flex-direction: column;
}

hướng uốn

Theo mặc định, các thùng chứa linh hoạt (các phần tử có

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-direction: column;
}

uốn dẻo

Theo mặc định, các thùng chứa linh hoạt sắp xếp các phần tử con của chúng trong một hàng hoặc một cột. Nếu vùng chứa chứa nhiều phần tử hơn mức sẽ vừa với một dòng, thì các phần tử đó sẽ bị nhòe

Để bọc các phần tử con thay vì làm mịn chúng, hãy đặt

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Giá trị mặc định là

.container {
  display: flex;
  flex-direction: column;
}

Đối với các hộp chứa linh hoạt có phần tử con được bao bọc, bạn cũng có thể đặt thuộc tính

.container {
  display: flex;
  flex-direction: column;
}

biện minh cho nội dung

Theo mặc định, các hộp chứa linh hoạt sắp xếp các phần tử con của chúng bắt đầu từ ngoài cùng bên trái (hoặc trên cùng đối với các hộp chứa có

.container {
  display: flex;
  flex-direction: column;
}

Để thay đổi khoảng cách giữa các phần tử con, hãy đặt thuộc tính

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

Có một vài giá trị để lựa chọn

• .container {
    display: flex;
    flex-direction: column;
  }
  

  56 là mặc định

• .container {
    display: flex;
    flex-direction: column;
  }
  

  57 đặt trẻ ở trung tâm, không có khoảng cách giữa chúng

• .container {
    display: flex;
    flex-direction: column;
  }
  

  58 thêm khoảng cách giữa các phần tử con, nhưng không phải trước mục đầu tiên hoặc sau mục cuối cùng

• .container {
    display: flex;
    flex-direction: column;
  }
  

  59 thêm khoảng cách giữa các phần tử con, kể cả trước mục đầu tiên và sau mục cuối cùng

• .container {
    display: flex;
    flex-direction: column;
  }
  

  70 thêm khoảng cách giữa các phần tử con và làm cho phần tử đầu tiên và phần tử cuối cùng có cùng khoảng cách với phần tử con ở giữa

Hãy thử thay đổi mã này để thấy sự khác biệt

sắp xếp các mục

Theo mặc định, các thùng chứa linh hoạt căn chỉnh các phần tử con của chúng lên trên cùng (hoặc bên trái đối với các thùng chứa có

.container {
  display: flex;
  flex-direction: column;
}

Để thay đổi cách các phần tử con được căn chỉnh, hãy đặt thuộc tính

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

Có một số tùy chọn để lựa chọn

• .container {
    display: flex;
    flex-direction: column;
  }
  

  73 là mặc định

• .container {
    display: flex;
    flex-direction: column;
  }
  

  56 căn chỉnh trẻ em lên trên cùng (hoặc sang trái đối với các hộp chứa có

  .container {
    display: flex;
    flex-direction: column;
  }
  

  54) nhưng không kéo căng chúng để lấp đầy khoảng trống còn lại

• .container {
    display: flex;
    flex-direction: column;
  }
  

  76 sắp xếp trẻ em xuống dưới cùng (hoặc phải) nhưng không kéo dài chúng để lấp đầy khoảng trống còn lại

• .container {
    display: flex;
    flex-direction: column;
  }
  

  57 lấy trẻ làm trung tâm

Hãy thử thay đổi mã này để thấy sự khác biệt

lỗ hổng

Theo mặc định, các thùng chứa flex không thêm bất kỳ khoảng cách nào giữa các phần tử con của chúng. Bạn có thể thay đổi điều đó bằng

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

uốn cong

Theo mặc định, các phần tử bên trong hộp chứa linh hoạt sẽ không mở rộng để lấp đầy khoảng trống thừa trong vùng chứa

Bạn có thể yêu cầu một phần tử lấp đầy bất kỳ khoảng trống thừa nào bằng cách sử dụng thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

Đó là một chút khó hiểu, vì vậy đây là một ví dụ

Trong ví dụ này, lớp

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Hãy thử thay đổi mã để xem ảnh hưởng của các giá trị khác nhau

uốn cong

Theo mặc định, nếu một bộ chứa linh hoạt không đủ rộng (hoặc đủ cao cho các bộ chứa có

.container {
  display: flex;
  flex-direction: column;
}

Để có các phần tử con khác nhau co lại ở các tỷ lệ khác nhau, hãy đặt thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Điều này tương tự như

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

cơ sở linh hoạt

Theo mặc định, các thành phần bên trong hộp chứa linh hoạt đặt kích thước riêng của chúng, thông qua thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Thay vì dựa vào kích thước riêng của phần tử, bạn có thể đặt kích thước ban đầu của nó bằng thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

uốn cong

Sức mạnh của

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Có một vài lý do

1. Không phải lúc nào bạn cũng biết kích thước cửa sổ trình duyệt của người dùng. Họ sẽ ở trên một máy tính xách tay?
2. Không phải lúc nào bạn cũng biết kích thước nội dung của chính mình. Điều đó nghe có vẻ đáng ngạc nhiên, nhưng bạn có muốn điều chỉnh độ rộng của mọi thành phần trên trang của mình bất cứ khi nào nội dung của bạn thay đổi không?

Với flexbox, bạn có thể đặt các thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Trên thực tế, ba thuộc tính này hữu ích đến mức bạn có thể kết hợp chúng thành một thuộc tính duy nhất có tên là

.container {
  display: flex;
  flex-wrap: wrap;
}

Vì vậy, nếu bạn có CSS ​​này

.container {
  display: flex;
  flex-wrap: wrap;
}

Bạn có thể rút ngắn nó như thế này

Để hiểu tại sao điều này lại hữu ích, hãy thử thay đổi độ rộng của div cha trong ví dụ này

(Có thể hữu ích khi xem phiên bản toàn màn hình. )

Tất cả trẻ em đều bắt đầu ở những kích thước nhất định, nhờ vào đặc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

Khi bạn làm cho div cha lớn hơn, phần tử con màu đỏ không lớn lên chút nào, bởi vì

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Khi bạn làm cho div gốc nhỏ hơn, phần tử con màu đỏ co lại nhanh hơn phần tử con màu xanh, vì các thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Điều này có nghĩa là bạn có thể đặt các thuộc tính này và sau đó không phải lo lắng về kích thước chính xác của nội dung hoặc kích thước chính xác của cửa sổ trình duyệt của người dùng

Học nhiều hơn nữa

Chúng tôi đã đề cập đến các nguyên tắc cơ bản của flexbox ở trên, nhưng có các thuộc tính và giá trị khác mà bạn có thể sử dụng. Để tìm hiểu thêm về chúng, hãy xem Hướng dẫn đầy đủ về Flexbox trên Thủ thuật CSS

Và tất nhiên, đừng ngại tìm kiếm trên internet khi bạn không chắc chắn về điều gì đó. Có rất nhiều tài nguyên tuyệt vời ngoài kia

Flexbox hữu ích nhất khi bạn có một hàng (hoặc cột) nội dung. Bộ chứa Flexbox có thể bọc nội dung của chúng thành nhiều hàng (hoặc cột) bằng cách sử dụng thuộc tính

.container {
  display: flex;
  flex-direction: column;
}

Điều đó có thể ổn đối với nhiều bố cục, nhưng nếu bạn muốn kiểm soát nhiều hơn cách các thành phần của mình được định vị, bạn có thể sử dụng bố cục lưới

Để đặt bố cục lưới trong bối cảnh lịch sử, về mặt kỹ thuật, nó vẫn chưa được phát hành chính thức, nhưng kể từ năm 2022, hầu hết mọi trình duyệt đều đã hỗ trợ nó. CSS thật kỳ lạ

Đây là ví dụ điều hướng bên trái ở trên bằng Grid

Thuộc tính lưới

Để sử dụng lưới, hãy đặt

.container {
  display: flex;
  flex-wrap: wrap;
}

trưng bày. lưới

Đây là tài sản khởi đầu cho tất cả. Đặt cái này trên phần tử cha (thường là div) để bảo nó sử dụng quy tắc lưới để sắp xếp các phần tử con của nó (các phần tử mà nó chứa)

.container {
  display: flex;
  flex-direction: column;
}

Bản thân điều đó không thú vị lắm, vì theo mặc định, lưới là một cột gồm các phần tử

lưới-mẫu-cột

Theo mặc định, lưới là một cột gồm các phần tử

Để chia lưới của bạn thành nhiều cột, hãy sử dụng thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-direction: column;
}

Thuộc tính

.container {
  display: flex;
  flex-wrap: wrap;
}

Các kích thước có thể là một vài loại giá trị khác nhau

• Độ dài cụ thể như

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

  36 hoặc

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

  37 cung cấp cho cột chiều rộng được xác định trước
• Phần trăm độ dài như

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

  38 cho biết cột chiếm phần trăm chiều rộng của cột gốc
• Độ dài phân số như

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

  39 hoặc

  .container {
    display: flex;
    flex-direction: column;
  }
  

  00 cho biết cột chiếm chiều rộng so với các cột khác trong lưới. Bạn có thể coi điều này tương tự như cách hoạt động của

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

  92 ở trên. một cột có

  .container {
    display: flex;
    flex-direction: column;
  }
  

  00 sẽ chiếm khoảng gấp đôi chiều rộng so với một cột có

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  

  39

• .container {
    display: flex;
    flex-direction: column;
  }
  

  04 báo cho cột tự kích thước dựa trên các thành phần trong đó, cũng như kích thước của vùng chứa và của các cột khác trong vùng chứa

Xem grid-template-columns trên MDN để biết các loại giá trị khác

Ví dụ trên của

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

lưới-mẫu-hàng

Tương tự như

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-direction: column;
}

Bằng cách xác định cả

.container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

Thay vào đó, hãy thử thay đổi mã này để mã có 3 cột và 2 hàng

Đặt các mục trong lưới

Theo mặc định, các mục chiếm một ô trong lưới chính của chúng và chúng xuất hiện theo thứ tự mà bạn liệt kê chúng trong HTML của mình

Bạn có thể làm cho một phần tử chiếm nhiều hơn một ô bằng cách sử dụng các thuộc tính này

• .container {
    display: flex;
    flex-direction: column;
  }
  

  11 và

  .container {
    display: flex;
    flex-direction: column;
  }
  

  12 cho một ô biết cột nào sẽ chiếm

• .container {
    display: flex;
    flex-direction: column;
  }
  

  13 và

  .container {
    display: flex;
    flex-direction: column;
  }
  

  14 cho một ô biết hàng nào sẽ chiếm

.container {
  display: flex;
  flex-direction: column;
}

Đây là một ví dụ

Div màu đỏ bắt đầu từ cột 1 và kéo dài đến cột 3, vì vậy nó chiếm cả hai cột. Div màu xanh lục bắt đầu từ hàng 2 và kéo dài đến hàng 4, vì vậy nó chiếm hàng 2 và 3

Cũng lưu ý rằng div màu xanh lá cây xuất hiện trước div màu xanh lam, mặc dù nó xuất hiện sau trong HTML. Điều này có thể hữu ích để đảm bảo nội dung chính của bạn xuất hiện đầu tiên trong HTML, điều này có thể trợ giúp với những thứ như trình đọc màn hình và SEO

Bạn cũng có thể sử dụng tốc ký

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

Các ô được đặt tên

Các ví dụ trên sử dụng các số để chỉ định các ô mà một phần tử chiếm giữ

Thay vào đó, bạn có thể đặt tên cho các ô của mình, sau đó chỉ định vị trí phần tử bằng các tên đó

Trước tiên, hãy thêm tên vào các hàng và cột vùng chứa của bạn bằng cách sử dụng dấu ngoặc vuông

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

Bạn đang thực sự đặt tên cho các dòng giữa các ô. Đây là CSS giống như trên, ngoại trừ bây giờ một số dòng giữa các ô có tên

Sau đó, sử dụng các tên đó để đặt các phần tử con của bạn

.container {
  display: flex;
  flex-direction: column;
}

Đây là mã đầy đủ

Thuộc tính lưới khác

Lưới có nhiều thuộc tính khác và các phím tắt để viết ít dòng mã hơn. Thay vì cố gắng liệt kê tất cả chúng ở đây, tôi khuyến khích bạn đọc qua Hướng dẫn đầy đủ về lưới trên thủ thuật CSS, Bố cục lưới CSS trên W3Schools và Bố cục lưới CSS trên MDN

Quan trọng hơn, tôi khuyến khích bạn dùng thử. Nếu bạn muốn thử nghiệm với bố cục dạng lưới (hoặc flexbox, hoặc bất kỳ thứ gì thực sự) thì điều tốt nhất bạn có thể làm là tạo một tệp sơ bộ hoặc một dự án CodePen và dùng thử. Làm cho thứ gì đó hoạt động và sau đó xem liệu có cách nào khác để viết mã của bạn không

Một bố cục cụ thể phổ biến đến mức họ đã đặt cho nó một cái tên. chén Thánh

Bố cục chén thánh là một trang web có tiêu đề, thanh bên trái, khu vực nội dung chính, thanh bên phải và chân trang. Bạn có thể kể tên một số trang web sử dụng bố cục này

Dưới đây là một vài ví dụ về cách bố trí chén thánh

sử dụng flexbox

Sử dụng lưới

Nếu bạn muốn thử thách và nếu bạn muốn hiểu điều gì làm cho flexbox và grid trở nên phổ biến, hãy thử triển khai bố cục chén thánh chỉ sử dụng float hoặc blocks

Tôi đã liệt kê một vài cách tiếp cận để tạo bố cục ở trên, nhưng bạn không cần phải chọn chỉ một. Trên thực tế, hầu hết các trang web sử dụng kết hợp tất cả những điều trên

Ví dụ: bạn có thể sử dụng lưới để tạo bố cục ngoài cùng của mình để đặt tiêu đề, thanh bên, nội dung chính và chân trang. Tiêu đề của bạn có thể sử dụng flexbox để tạo một hàng liên kết điều hướng. Nội dung chính có thể chứa các hình ảnh được di chuyển sang trái hoặc phải

Hãy thử nghĩ về từng phần trên trang của bạn dưới dạng bố cục riêng, sau đó sử dụng bất kỳ công cụ nào có ý nghĩa nhất cho phần cụ thể đó

Đảm bảo trang web của bạn hoạt động trên màn hình của mọi người là một phần quan trọng của bố cục và thiết kế, kể từ những ngày đầu của HTML

Nhưng điều này thậm chí còn trở nên khó khăn hơn vào cuối những năm 2000 và đầu những năm 2010, khi điện thoại di động trở nên phổ biến hơn để duyệt web. Làm cách nào để bạn đảm bảo rằng trang web của mình hiển thị tốt trên một chiếc điện thoại di động nhỏ, màn hình rộng và mọi thứ ở giữa?

Một cách phổ biến để nghĩ về nó là thiết kế đáp ứng. Thiết kế đáp ứng là ý tưởng rằng trang web của bạn sẽ phản ứng với những thay đổi về kích thước màn hình. Có thể trang của bạn chỉ hiển thị nội dung chính trên thiết bị màn hình hẹp, nhưng thêm thanh bên trái trên thiết bị cỡ trung bình và chia nội dung thành nhiều cột trên thiết bị màn hình rộng

Đây là một ví dụ

Thiết kế ưu tiên thiết bị di động và cải tiến liên tục

Thiết kế đáp ứng có nghĩa là bạn hiển thị một bố cục khác trên các kích thước màn hình khác nhau. Bạn có thể coi điều này là ẩn các phần của trang web trên màn hình nhỏ hơn, nhưng một cách khác để nghĩ về điều này là màn hình nhỏ hơn chứa tất cả nội dung cần thiết và màn hình lớn hơn hiển thị nội dung "bổ sung" không bắt buộc

Bắt đầu thiết kế của bạn bằng cách suy nghĩ về màn hình nhỏ được gọi là thiết kế ưu tiên thiết bị di động và suy nghĩ về việc thêm các tính năng bổ sung cho màn hình rộng hơn được gọi là cải tiến liên tục

Đây là một từ thông dụng nhỏ, nhưng tôi thấy chúng hữu ích trong việc suy nghĩ về cách thiết kế bố cục của trang web

Bạn có thể đọc thêm về thiết kế đáp ứng tại Thiết kế đáp ứng - MDN và Thiết kế web đáp ứng - Wikipedia

Để hiển thị bố cục khác tùy thuộc vào kích thước màn hình, bạn có thể sử dụng tính năng CSS có tên là truy vấn phương tiện

Truy vấn phương tiện sử dụng từ khóa

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

(Có thể hữu ích khi xem phiên bản toàn màn hình. )

Theo mặc định, lớp

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

Đây là một ví dụ phức tạp hơn hiển thị nội dung trong một cột theo mặc định và trong bố cục chén thánh trên các thiết bị rộng hơn 600 pixel

(Có thể hữu ích khi xem phiên bản toàn màn hình. )

Ví dụ này cũng ẩn hoàn toàn thanh bên trái trên thiết bị di động

Xem hướng dẫn dành cho người mới bắt đầu về truy vấn phương tiện trên MDN và CSS @media Rule trên W3Schools để biết thêm thông tin

Khi bạn đang tạo và gỡ lỗi bố cục trong CSS, người bạn tốt nhất của bạn là các công cụ dành cho nhà phát triển của trình duyệt. Họ có thể giúp bạn hiểu lý do tại sao mọi thứ đang thẳng hàng theo một cách nhất định hoặc một vài pixel không gian thừa đó đến từ đâu

Bạn thậm chí có thể sử dụng chế độ thiết bị để xem trang web của mình trông như thế nào trên các thiết bị khác nhau. Điều này dễ dàng hơn nhiều so với việc liên tục thay đổi kích thước cửa sổ của bạn

Làm cách nào để tạo bố cục CSS?

Bố cục nào là tốt nhất trong CSS?

Kỹ thuật bố cục CSS là gì?

Bố cục trang web CSS là gì?