Cách căn giữa div bằng CSS

 (joshwcomeau.com)
5 điểm bởi GN⁺ 2024-02-14 | 3 bình luận | Chia sẻ qua WhatsApp
  • Căn giữa trong CSS không còn là một mẹo duy nhất nữa; tùy vào việc phần tử nằm trong luồng tài liệu, nổi lên trên hay có nhiều phần tử, đây là vấn đề chọn giữa Flow, Flexbox, Positioned layout, CSS Grid, text-align
  • Khi căn giữa theo chiều ngang một phần tử đơn lẻ, cách Flow layout giới hạn chiều rộng bằng max-width: fit-content rồi áp dụng margin-inline: auto ít ảnh hưởng đến các phần tử anh em hơn
  • Flexbox có thể căn giữa một hoặc nhiều phần tử con theo chiều ngang/dọc chỉ với justify-content: center và align-items: center, và ngay cả khi phần tử con bị tràn thì cũng tràn đối xứng
  • Với UI nổi như modal hoặc banner, tổ hợp position: fixed, inset: 0, giới hạn kích thước và margin: auto là phù hợp; CSS Grid mạnh ở cú pháp ngắn gọn và xếp chồng lên nhau
  • Bản thân văn bản không cần căn chỉnh layout mà cần text-align: center; khi hỗ trợ align-content trong Flow layout rộng rãi hơn, việc phải chuyển sang Flexbox hoặc Grid chỉ để căn giữa theo chiều dọc đơn giản có thể giảm đi

Căn giữa theo chiều ngang bằng auto margin trong Flow layout

  • Một trong những chiến lược lâu đời là giới hạn chiều rộng của phần tử rồi đặt margin hai bên là auto
.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
  • Phần tử trong Flow layout mặc định lấp đầy không gian ngang, nên để đặt vào giữa, trước tiên cần giới hạn chiều rộng
  • fit-content khiến phần tử ôm lấy nội dung, để width được quyết định bởi kích thước nội dung giống như height
  • Dùng max-width thay vì width chỉ giới hạn kích thước tối đa, nên khi container hẹp lại, phần tử cũng có thể co lại theo
  • Nếu chỉ có margin-left: auto, phần không gian còn lại sẽ đi vào margin bên trái; nếu đặt cả hai margin là auto, phần không gian còn lại được chia đều và phần tử nằm ở giữa
.element {
  max-width: fit-content;
  margin-inline: auto;
}
  • margin-inline là cách hiện đại để đặt margin-left và margin-right cùng một giá trị, và có hỗ trợ trình duyệt tốt
  • margin-inline là một phần của logical properties nên hoạt động dựa trên trục inline của hướng viết, chứ không phải trái/phải
    • Có thể áp dụng margin đúng phía trong cả ngôn ngữ viết từ trái sang phải lẫn ngôn ngữ viết từ phải sang trái
  • Cách này hữu ích khi muốn chỉ căn giữa một phần tử con đơn lẻ như hình ảnh giữa các đoạn trong bài blog mà không muốn ảnh hưởng đến các phần tử anh em

Căn giữa một hoặc nhiều phần tử con bằng Flexbox

  • Flexbox là chế độ layout mạnh trong việc sắp xếp nhiều mục dọc theo trục chính, và cũng thường được dùng để căn giữa
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • Dùng đồng thời justify-content: center và align-items: center có thể đặt phần tử con vào giữa theo cả chiều ngang lẫn chiều dọc
  • Ngay cả khi phần tử con không vừa container, việc căn chỉnh vẫn được giữ nguyên; khi bị tràn, phần tràn cũng đối xứng
  • Có thể căn giữa nhiều phần tử con và điều khiển hướng xếp bằng flex-direction
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
  • Phù hợp làm lựa chọn mặc định áp dụng rộng rãi cho một hoặc nhiều phần tử con

Căn giữa UI nổi bằng Positioned layout

  • Các phần tử cần thoát khỏi luồng tài liệu thông thường và nổi lên trên như modal, prompt, banner có thể được xử lý bằng Positioned layout
.element {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}
  • position: fixed cố định phần tử vào viewport, còn inset: 0px đặt cả top, left, right, bottom thành 0px
  • Nếu chỉ có inset: 0px, phần tử sẽ cố lấp đầy toàn bộ viewport, nên cần giới hạn kích thước bằng width, height, max-width, max-height
  • Tổ hợp này cố ý tạo ra các điều kiện bất khả thi
    • Phần tử không thể vừa cách bên trái và bên phải 0px đồng thời vừa có chiều rộng 12rem
    • Engine render CSS ưu tiên ràng buộc width và giải quyết xung đột bằng cách dính vào một phía tùy theo hướng ngôn ngữ
  • Khi thêm margin: auto, cách trình duyệt giải quyết thay đổi và phần tử được đặt giữa theo cả chiều ngang lẫn chiều dọc
  • Bốn điều kiện cần thiết là position: fixed, inset: 0px, chiều rộng và chiều cao bị giới hạn, cùng margin: auto

  • Chỉ căn giữa một hướng như banner ở đáy

    .element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
    • Nếu bỏ qua top: 0px, điều kiện bất khả thi theo chiều dọc biến mất và phần tử được cố định ở đáy
    • calc(100vw - 8px * 2) giới hạn chiều rộng tối đa để chừa khoảng đệm ở hai bên viewport
    • margin-inline: auto thể hiện chính xác hơn ý định căn giữa theo chiều ngang

  • Phần tử không biết trước kích thước

    .element {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
    • Khi không biết trước kích thước phần tử, có thể dùng width: fit-content và height: fit-content để phần tử ôm lấy nội dung
    • Có thể thêm giới hạn như max-width: 60vw, nhưng không bắt buộc; phần tử sẽ nằm trong viewport

  • Tâm lệch nhẹ có chủ ý

    • Nếu điều chỉnh giá trị inset một phía như bottom: 48px, phần tử sẽ dịch chuyển bằng một nửa giá trị đã chỉ định
    • Với bottom: 48px, phần tử dịch lên 24px
    • Điều này là vì phần tử được treo ở giữa trong một hộp ảo giữa biên trên và biên dưới
    • Dùng transform: translateY(-48px) có thể di chuyển phần tử lên đúng 48px
    • Cách offset bằng bottom có thể để dành thuộc tính transform cho animation hoặc hiệu ứng xuất hiện về sau

Căn giữa ngắn gọn và xếp chồng bằng CSS Grid

  • Trong CSS Grid, đoạn mã căn giữa ngắn nhất là tổ hợp display: grid và place-content: center
.container {
  display: grid;
  place-content: center;
}

  • place-content là shorthand của justify-content và align-content, áp dụng cùng một giá trị cho hàng và cột

  • Thiết lập này tạo ra một ô Grid 1×1 ở giữa container cha

  • Khác biệt với Flexbox

    • Trông có vẻ giống Flexbox, nhưng CSS Grid dùng một thuật toán layout hoàn toàn khác
    • Sự khác biệt lộ rõ khi đặt width: 50% và height: 50% cho phần tử con
    • Trong Flexbox, phần trăm được tính dựa trên .container cha
    • Trong CSS Grid, phần trăm được tính dựa trên ô Grid
    • Nếu không chỉ định grid-template-columns hoặc grid-template-rows, track của Grid sẽ tính kích thước dựa trên nội dung, nên phần tử có thể nhỏ hơn dự kiến
    • Trong trường hợp này, có thể thêm CSS để sửa Grid, nhưng với căn giữa đơn giản thì Flexbox có thể đơn giản hơn

  • Xếp chồng nhiều phần tử vào cùng một vị trí

    .container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • CSS Grid có thể đặt nhiều phần tử con vào cùng một ô
    • Nếu đặt grid-row: 1 và grid-column: 1 cho tất cả .element, các phần tử sẽ dùng chung cùng một không gian Grid và xếp chồng trước/sau lên nhau
    • Cách này vẫn có thể hoạt động ngay cả khi kích thước các phần tử con khác nhau
    .container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • Để chồng các phần tử con có kích thước khác nhau vào giữa, cần thêm place-items: center
    • place-items là shorthand của justify-items và align-items, điều khiển cách căn chỉnh hình ảnh trong ô Grid
    • Nếu không có thuộc tính này, bản thân ô Grid vẫn ở giữa, nhưng các hình ảnh trong ô sẽ xếp ở góc trên bên trái
    • Để tìm hiểu sâu hơn về CSS Grid, có thể tham khảo An Interactive Guide to CSS Grid

Văn bản cần được căn riêng bằng text-align

  • Văn bản cần được xử lý riêng trong CSS; các kỹ thuật layout như Flexbox không căn chỉnh từng ký tự riêng lẻ
  • Nếu căn giữa đoạn văn bằng Flexbox, khối đoạn văn sẽ nằm ở giữa, nhưng chữ trong đoạn vẫn giữ trạng thái căn trái
  • Để căn giữa bản thân văn bản, cần dùng text-align: center
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Tương lai của Flow layout: align-content

  • Trong Flow layout, có thể căn giữa theo chiều ngang bằng auto margin, nhưng để căn giữa theo chiều dọc, từ trước đến nay vẫn cần các chế độ layout khác như Flexbox hoặc Grid
  • Tính đến đầu năm 2024, các nhà cung cấp trình duyệt đang triển khai align-content trong Flow layout
  • Hành vi mới này điều khiển việc căn chỉnh nội dung theo hướng block, và tại thời điểm đó chỉ có thể dùng dưới dạng tính năng sau flag trong Chrome Canary và trong Safari Technical Preview
  • Demo ví dụ không phải là hành vi Flow layout thực tế, mà là bản tái hiện bằng Flexbox sau khi kiểm tra hành vi trong Chrome Canary và Safari TP
  • Tính năng này không tạo ra UI mới, nhưng có thể giảm nhu cầu phải chuyển sang một chế độ layout riêng chỉ để căn giữa đơn giản

Tiêu chí chọn theo tình huống

  • Nếu muốn căn giữa theo chiều ngang một phần tử đơn lẻ mà không ảnh hưởng đến các phần tử anh em, hãy dùng chiến lược Flow layout auto margin
  • UI nổi như modal hoặc banner nên được đặt ở giữa bằng Positioned layout và auto margin
  • Nếu muốn chồng nhiều phần tử vào giữa tại cùng một vị trí, CSS Grid là phù hợp
  • Để căn giữa văn bản, dùng text-align; có thể dùng cùng các cách căn giữa khác
  • Trong hầu hết các tình huống còn lại, Flexbox là lựa chọn đa dụng nhất
    • Có thể xử lý một hoặc nhiều phần tử con
    • Có thể căn giữa cả theo chiều ngang lẫn chiều dọc
    • Có thể dùng dù phần tử con nằm trong container hay bị tràn ra ngoài

Bài viết liên quan

3 bình luận

 
v08zbv8fvlkjasdflkj 2024-02-15

Nghĩ lại thì tự dưng mình cũng thấy khó chịu vì ngay cả bài viết trên GeekNews cũng không được căn giữa, hic haha
 
joyfui 2024-02-14

Tôi hay dùng place-items: center;, nhưng hóa ra còn nhiều cách khác nữa.
 
GN⁺ 2024-02-14
Ý kiến trên Hacker News

  • Vì các bình luận khác đang bình luận về chính các bình luận, tôi cũng xin góp một ý: meme căn giữa trong CSS phần lớn được hiểu là “cách đặt một phần tử vào đúng tâm của một phần tử khác”
    Đúng là xét từ góc độ triển khai thì việc căn giữa khó và có thể mang nhiều nghĩa khác nhau, nhưng với thế hệ GeoCities hay AngelFire thì điều này khó chấp nhận, vì ngay từ thập niên 90 với HTML họ đã có thể đặt hello vào chính giữa một ô vuông vàng 600x600 mà không gặp vấn đề gì
    Bực ở chỗ bộ công cụ mới được ca ngợi là tốt hơn lại không làm nổi công việc tiêu chuẩn mà cái cũ đã làm được, nên đến tận cuối những năm 2000 họ vẫn tiếp tục dùng bố cục bằng bảng. Tôi thích CSS, nhưng có khi đó cũng là một dạng hội chứng Stockholm
    Tôi cũng ngạc nhiên khi valign vẫn hoạt động trong Chromium dù không còn tồn tại nữa, và không rõ đây có phải thay đổi gần đây không

    • Đúng như bạn nói, tức là đặt hello vào chính giữa một ô vuông vàng 600x600, thì điều đó đã làm được từ phiên bản đầu tiên của CSS. Ví dụ, thuộc tính HTML valign tương ứng với thuộc tính CSS vertical-align của các hộp inline, inline-block, table-cell
      Tuy vậy, theo kinh nghiệm của tôi, khá nhiều người hoặc là lãng mạn hóa việc cứ dùng bảng là được, hoặc phàn nàn rằng CSS hạn chế và rối rắm, thực ra lại không mấy cố gắng học cách CSS vận hành. Ít nhất tác giả cũng tự nhận thức được điểm đó
    • Trên Firefox cũng hoạt động mà không cần thuộc tính "valign". Tuy nhiên, khi dùng bảng mà không có bố cục cố định, tôi luôn thấy có những khác biệt tinh vi giữa ba trình duyệt lớn, nên nhìn chung tôi sẽ không dựa vào hành vi tự động bố cục

  • Bài viết hay, và phản ứng ở đây khá đáng ngạc nhiên đối với một nhóm độc giả vốn dĩ là dân kỹ thuật. Bố cục trang tự động và định dạng thực sự rất khó, khó đến mức đúng nghĩa là đề tài luận án tiến sĩ[1]
    Kỳ vọng có thể trừu tượng hóa sự phức tạp đó bằng một cách diễn đạt đơn giản kiểu “hãy làm theo ý tôi” là không thực tế
    Nhìn vào trang web của Gwern Branwen[2], nó gần như là nghệ thuật, nhưng cốt lõi là trước hết phải quyết định hình thức mong muốn, rồi ràng buộc bài viết sao cho có thể biểu đạt được trong phong cách đó
    Tôi đã theo dõi bố cục trang web từ khi tham gia startup “tạp chí golf đầu tiên trên web”[3] vào năm 1995, và nhờ Zen Garden cùng mailing list/trang web A List Apart[4], tôi đã hiểu được việc làm nội dung web hiển thị tốt trên nhiều môi trường đầu ra khác nhau khó đến mức nào
    Việc chuyển nội dung ngữ nghĩa lên màn hình, giấy, hay một mặt phẳng hữu hạn vốn là một ánh xạ hoặc phép chiếu từ không gian ban đầu sang tập quy tắc của không gian đích, mà các quy tắc đó bao gồm cả ràng buộc vật lý, ràng buộc của phần mềm trình duyệt, và hành vi riêng của từng trình duyệt
    Vì thế CSS có thể trông như một mớ hỗn độn với những ai bước vào với suy nghĩ “tôi sẽ làm web page từ đầu”, nhưng thực ra nó giống một hệ có quá nhiều lựa chọn hơn là một tập ràng buộc ngăn cản bạn làm việc
    [1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...
    [2] https://gwern.net/
    [3] Tên là Golfweb, và có vẻ cuối cùng đã trở thành một phần của CBS Sports
    [4] https://www.alistapart.com

    • Tôi bắt đầu làm bố cục web từ năm 1998 nên chậm hơn khoảng 3 năm, nhưng trong toàn bộ trải nghiệm của mình tôi vẫn chưa thấy tài liệu nào xuất sắc bằng Every Layout[1]. Rất khuyến nghị
      [1] https://every-layout.dev/rudiments/boxes/
    • Vấn đề của CSS gần như hoàn toàn là độ phức tạp do tự mình tạo ra. Đúng là bố cục vốn khó, nhưng tôi vẫn thắc mắc vì sao lại nhắm đến mô hình như hiện nay để khiến nó còn khó hơn
      Cụ thể là nó hướng đến một mô hình lớn duy nhất cho mọi trang, rồi lại gắn với mục tiêu kiểu Sisyphe là phải tính lại bố cục tự động cho từng trang. Cộng thêm mục tiêu phục vụ mọi kích thước cửa sổ, tôi không hiểu sao người ta từng nghĩ điều này là khả thi
    • Tôi không thể không thêm liên kết này vì muốn xem thêm nghệ thuật CSS
      https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/
      Không biết trong đó có bao nhiêu div được căn giữa
    • Mấy ngày gần đây tôi đã cố nhồi bố cục dựa trên luồng và phân trang vào một hệ thống bố cục dựa trên Flexbox, và điều đó xác nhận rằng bố cục và định dạng đúng là rất khó
      Đặc biệt với các bảng mà mỗi cột chứa văn bản và đối tượng có kích thước khác nhau, việc quyết định khi nào và bằng cách nào đẩy phần tử sang trang tiếp theo là một bài toán khó trong việc chọn heuristic tốt
    • Tôi không biết làm sao phân biệt được đây là vấn đề do con người tự áp đặt, hay là một bài toán nghiên cứu vốn dĩ khó về bản chất. Trước khi bước vào phát triển web, tôi chưa từng nghĩ “bố cục là khó”, mà khi đó cũng đã có các cửa sổ có thể cuộn và thay đổi kích thước
      Trong custom appkit, các control GTK, hay cả những toolkit nền Lua không công khai, việc căn giữa nội dung hoặc ngắt dòng/căn chỉnh phần tử chẳng có gì ghê gớm, nên tôi tự hỏi trên web thì mình đang bỏ sót điều gì
      Câu “chỉ là có nhiều lựa chọn hơn thôi” nghe cũng khá giống với TMTOWTDI đã bị chôn vùi từ lâu

  • Bài viết rất hay, và phần tử tương tác đặc biệt tốt. Thứ đã giúp tôi rất nhiều trong việc hiểu định vị và căn giữa bằng CSS vài năm trước là đọc về mô hình hộp
    Hiểu mô hình hộp giúp ích cho việc phán đoán luồng trong DOM, và các thuộc tính CSS display và position cũng là nền tảng khi học định vị. Tài liệu MDN làm rất tốt
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

  • “Cách căn giữa” là một câu hỏi kinh điển của CSS, và bản thân việc nó không hiển nhiên đến mức ai cũng nhìn ra ngay đã nói lên rất nhiều điều. CSS gần giống một mớ hỗn độn đục ngầu hơn, là tập hợp kiểu “bồn rửa chén” do nhiều ủy ban thiết kế cùng lúc chứ không phải một ủy ban duy nhất
    Khái niệm phát hành thực sự đã bị từ bỏ từ lâu, và trạng thái hiện tại của CSS gần như là tập hợp trạng thái của các mô-đun riêng lẻ luôn thay đổi. Đây không phải là cách để phát triển phần mềm, và thật ra cũng không phải cách tốt để tạo ra bất kỳ thứ gì

    • Vừa đồng ý vừa phản đối. Các tập thể lớn của con người vốn vận hành chậm chạp và hỗn loạn như vậy, gần giống như lùa mèo
      Bản thân web và các công nghệ của nó cũng không rõ ràng đang cùng nhau đi về đâu, nên khó tránh khỏi nhiều thử nghiệm thất bại và sự thiếu nhất quán. Phạm vi của nó rộng hơn rất nhiều so với một dự án kỹ thuật được hoạch định tốt với mục tiêu và lộ trình rõ ràng
    • Tôi nghĩ câu hỏi về căn giữa xuất hiện thường xuyên vì từ góc nhìn người học, đó là câu hỏi đầu tiên quá tự nhiên để đặt ra
      Khi học cách làm một trang web trông theo ý mình, những thứ đầu tiên người ta thường học là cỡ chữ, màu sắc, màu nền và căn chỉnh; nếu bỏ phần căn chỉnh ra thì những thứ còn lại gần như tương ứng 1:1 với cách làm trước thời CSS
      Trước CSS, nếu muốn đặt nội dung vào giữa thì chỉ cần cho nó vào thẻ đó là xong, bất kể là văn bản, div, bảng hay đối tượng HTML như nút bấm. Nhiều người đã kỳ vọng CSS cũng hoạt động như trước đây không phân biệt giữa đối tượng inline và block, nhưng vì CSS không khớp với định kiến đó nên mới sinh ra những câu hỏi như vậy

  • Bài này thực sự rất hay, đặc biệt là cách tương tác rất tuyệt. Cũng có một công cụ từ lâu gần như luôn cho ra kết quả mong muốn
    http://howtocenterincss.com

  • CSS phải mất hàng chục năm mới đưa ra được một giải pháp dùng được ngang với bảng căn giữa nội dung, trong khi suốt thời gian đó dùng bảng cho bố cục lại bị chỉ trích

    • Bảng HTML không co giãn xuống dòng tốt trên màn hình di động. Nếu tạo bố cục bằng bảng thì rất dễ xuất hiện thanh cuộn ngang và có thể phải viết lại để hỗ trợ di động, nên nếu không phải bảng dữ liệu thì framework CSS thường an toàn hơn
      Bảng HTML ít nhất cũng cần các xử lý như `` để đảm bảo khả năng truy cập
      https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/A...
      Tài liệu về CSS Grid Layout cũng rất đáng tham khảo
      https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
      Firefox DevTools > INTRODUCTION TO CSS GRID LAYOUT: https://mozilladevelopers.github.io/playground/css-grid/
      CSS Grid Garden: https://cssgridgarden.com/
      MDN > "Relationship of grid layout to other layout methods": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
      MDN: "Box alignment in grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
    • Biểu diễn dữ liệu không phải dạng bảng bằng bảng là không mang tính ngữ nghĩa và còn phá vỡ khả năng truy cập
      Phát triển web không chỉ có chuyện nội dung nằm ở đâu trên trang, và đó là lý do làm web tốt lại khó đến vậy
    • Đúng vậy, tôi còn nhớ thời đó. Ưu điểm của div và CSS là danh tiếng hipster, còn nhược điểm là súp DIV
      CSS thời ấy cực kỳ không phù hợp với những gì mọi người muốn làm, vì nó được thiết kế để định dạng tài liệu chứ không phải cho web app hay bố cục màn hình
      Trong khi đó, ưu điểm của table là nó thực sự hoạt động
    • Hồi đó, cách dùng bảng có cảm giác là chắc ăn nhất

  • Giống như nhiều người ở đây, tôi thấy CSS là một thảm họa hoàn chỉnh. Vấn đề cốt lõi là các chỉ thị style liên tục ghi đè lẫn nhau, hoặc âm thầm thất bại mà không tạo ra bất kỳ hiệu ứng nào

  • Tôi thích việc một trong các ví dụ về thông báo cookie lại thẳng thắn đến tàn nhẫn
    “Chúng tôi coi trọng dữ liệu riêng tư cá nhân của bạn. Để cải thiện trải nghiệm duyệt web, chúng tôi sử dụng cookie bán dữ liệu này cho nhà quảng cáo. Nó rất có giá trị”

  • Điều thú vị là những gì có thể học được từ lịch sử dùng bảng cho bố cục. Bảng có viền, padding, bố cục dựa trên các ô sắp theo cột, và khi mở rộng thì xung quanh bảng và ô còn cần khoảng trống, tức margin
    Bảng là một thành phần đã được thiết lập từ lâu trong bố cục, và thực ra nó chứa đựng sự khôn ngoan rằng mọi phần tử ở một mức độ nào đó đều nên hoạt động giống như ô của bảng
    Phần tử nên tuân theo box model; điều này khá hiển nhiên với những người làm typography, nhưng việc đồng thời phải được sắp xếp theo cột thì ít hiển nhiên hơn, và đó là nền tảng của Grid layout và Bootstrap
    Khi gặp vấn đề bố cục rồi giải quyết bằng bảng, sau đó nhận ra mình cần một tính năng mới có một phần thuộc tính của bảng nhưng không phải tất cả, đó là một tiến hóa rất tự nhiên
    CSS đã phát hiện ra điều này, nhưng kỳ lạ là một số hệ thống như trình xử lý văn bản lại không thể hợp nhất các phần tử dưới box model

  • Có cảm giác những lời phàn nàn kiểu “sao chuyện này đến giờ vẫn còn khó thế” khá là trật hướng. Như bài viết đã nói, Flexbox giải quyết trực quan mọi trường hợp căn giữa đơn giản
    Nếu Flexbox không giải quyết được thì đó không còn chỉ là căn giữa đơn thuần nữa mà là đang làm việc gì đó phức tạp hơn, nên kỳ vọng cách triển khai phải cực kỳ đơn giản là không phù hợp

    • Từ góc nhìn của người đã làm lâu năm, trước thời Flexbox chuyện này đúng là khó, và ngay cả trong giai đoạn Flexbox chưa được hỗ trợ 100% thì vẫn phải liên tục theo dõi mức sử dụng trình duyệt để quyết định có dùng được hay không
      Giờ thì lại có quá nhiều cách nên độ phức tạp trở nên choáng ngợp. Thường xuyên phải sửa mã cũ hơn là làm mới, và phải cân nhắc vì sao CSS được viết theo cách đó, trường hợp biên nào có thể bị vỡ, có nên sửa hay không, và nếu không đơn giản thì trong nhiều lời giải phải chọn cách nào
      Chỉ lướt qua bài thôi cũng không thấy trực quan. Ngay cả với Flexbox, thiết lập ngang là justify-content, thiết lập dọc là align-items, mà tên thuộc tính CSS thì quá nhiều và khá tùy ý nên giờ cũng khó mà nhớ hết
      Cuối cùng, khác biệt nằm ở chỗ: bạn xây lời giải phức tạp từ những khối nền tảng đơn giản, trực quan, đáng tin cậy; hay xây lời giải phức tạp từ những khối nền tảng cũng phức tạp, chồng lấn một phần lên nhau và phải liên tục tra cứu
      Go hay Python gần với kiểu thứ nhất hơn, còn CSS gần với kiểu thứ hai hơn
    • Flexbox là hình hài mà tôi luôn mong CSS sẽ trở thành; nó đã không như vậy trong một thời gian dài, rồi đến một ngày thì trở thành như thế, và tôi có thể bỏ hỗ trợ các trình duyệt không có Flexbox. Nó gần như cho cảm giác là hình thái cuối cùng của CSS
      Có lý do để mọi người từng thích hệ thống lưới của Bootstrap, và Flexbox làm được tất cả những điều đó cùng nhiều hơn nữa ngay trong trình duyệt. Khó mà cường điệu được mức độ tôi yêu thích nó
    • Có thời từng khá khó trong một số trường hợp nhất định, nhưng khoảng 10 năm trở lại đây thì đây đã là vấn đề được giải quyết xong. Vẫn còn người nói về việc căn giữa div trong CSS như thể nó nằm đâu đó giữa giả kim thuật và khoa học tên lửa
      Điều đó cho thấy họ không theo kịp những thay đổi của CSS nhiều như với các phần khác của phát triển web, nhưng lại vẫn thoải mái đưa ra những khẳng định như vậy
    • Hơn nữa, Flexbox đã được hỗ trợ rộng rãi hơn 10 năm nay. Mạch bình luận ở đây khá thú vị
    • Quá đúng. Khi vật lộn với Flexbox, lùi lại một bước và gỡ từng lớp một sẽ rất có ích
      Đi từ ngoài vào trong, từ phần tử cha đến phần tử con thì sẽ dễ hơn nhiều. Đúng là cần kỹ năng, nhưng về cơ bản nó gần với đại số co giãn hơn