Ảnh GIF mô tả cách vận hành của Flexbox

Cập nhật: Lượt xem: 542 [ Css ]

Các hình ảnh minh họa dưới đây sẽ giúp bạn hiểu rõ cách hoạt động của Flexbox, từ đó sử dụng Flexbox để build các layout tốt hơn.

Ảnh GIF mô tả cách vận hành của Flexbox

Flexbox hứa hẹn sẽ giải cứu chúng ta khỏi những rắc rối đến từ CSS thuần (như tính năng vertical alignment chẳng hạn). Tuy nhiên, để thuần thục model mới này là 1 thách thức không hề dễ dàng.

Hy vọng, các hình ảnh minh họa dưới đây sẽ giúp bạn hiểu rõ cách hoạt động của Flexbox, từ đó sử dụng Flexbox để build các layout tốt hơn.

Nguyên tắc cơ bản của Flexbox là tạo các layouts linh hoạt và trực quan. Để thực hiện được điều này, Flexbox sẽ để các containers tự quyết định cách phân bố đều “đứa con” của chính containers – bao gồm kích thước và khoảng cách giữa các containers.

Về nguyên tắc nghe thì khá hay nhưng hãy xem trên thực tế ra sao nhé! Chúng tôi đi sâu phân tích 5 properties Flexbox phổ biến nhất: chức năng của chúng, cách bạn sử dụng các properties và kết quả thu được là gì.

Property #1: Display: Flex

Đây là ví dụ webpage của chúng tôi:

 
1_ifuseqwi87nbkxgk9oz_7a

Bạn có 4 thẻ với 4 màu và 4 kích thước khác nhau nằm trong 1 thẻ container xám. Hiện tại, mỗi thẻ được mặc định display: block. Mỗi square chiếm đầy bề rộng line của mình.

Để khởi động với Flexbox, bạn cần biến container thành 1 flex container. Rất đơn giản!

 

#container {
  display: flex;
}

1_l2w-ziqu45a1bnwv79ijdq

Không có nhiều thay đổi – các thẻ của bạn đã được hiển thị theo hàng. Nhưng đằng sau đó, bạn đã hoàn thành 1 công việc cực kì “quyền lực”. Bạn đã cho các ô vuông của mình 1 thứ gọi là flex context.

Bây giờ, bạn có thể bắt đầu định vị chúng trong context đó – công việc bớt khó nhằn hơn nhiều so với CSS truyền thống.

Property #2: Flex Direction

Một Flexbox container có 2 trục: 1 trục chính và 1 trục chéo được thiết kế mặc định như sau:

1__ruy6jfg7gupsf76iucjtq

Theo mặc định, các items được sắp xếp dọc trục chính, từ trái qua phải. Đây là lý do các squares của bạn được mặc định thẳng hàng khi bạn áp dụng display: flex.

NhưngFlex-directionsẽ giúp bạn xoay trục chính.

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

1_4ykng2-vupf5xa-bmxadlq

Có 1 sự khác biệt rất rõ ở đây: thay vì trên trục chính, flex-direction: column lại không căn chỉnh các squares trên trục chéo, khiến cho bản thân trục chính sẽ chuyển từ chiều ngang sang chiều dọc. 

Vài phương án cho flex-direction khác chính là: row-reverse và column-reverse.

1_pbr_ncouiehalaeowmsbpq

Property #3: Justify Content

Justify-content quản lý cách bạn căn chỉnh các items trên trục chính.

Đầu tiên, hãy trở lại với flex-direction: row.

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

Bạn có 5 lệnh để sử dụng justify-content:

  1. Flex-start
  2. Flex-end
  3. Center
  4. Space-between
  5. Space-around

1_2-6tw8jqwrmkofiugkyuda

Lưu ý cuối cùng: justify-content hoạt động song song với trục chính và flex-direction sẽ chuyển đổi trục chính. 

Property #4: Align Items

Nếu justify-content chạy trên trục chính thì align-items áp dụng cho trục chéo.

1__ruy6jfg7gupsf76iucjtq

Hãy reset flex-direction lại thành hàng row, nhờ đó các trục của chúng ta sẽ trông giống như hình trên.

Sau đây là 5 lên align-items.

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

Ba lệnh đầu tiên tương tự như justify-content, nên không có gì quá “vi diệu” ở đây.

Tuy nhiên, 2 lệnh ở dưới lại có chút khác biệt.

Bạn có stretch, nhờ đó items có thể chiếm toàn bộ trục chéo và baseline – trong baseline phần cuối của các paragraph tags sẽ được căn chỉnh.

1_htfdnmriifu_verafoj5qa

(Lưu ý rằng với align-items: stretch, tôi phải set chiều cao của các squares ở chế độ auto. Trái lại, property height sẽ ghi đè lên stretch)

Với baseline, nếu bỏ các paragraph tags đi, baseline sẽ căn chỉnh bottom của các squares như sau:

1_6dd9knkmun49lfsbhlji6a

Để chứng mình trục chính và trục chéo tốt hơn, hãy combine justify-content và align-items, và chứng kiến sự khác biệt của centering khi hoạt động trong 2 lệnh flex-direction.

1_6mq-uay7t6nhdf2e41do0g

Với hàng, các squares được set dọc theo trục chính nằm ngang. Với column, các square sẽ nằm theo trục chính dọc. 

Dù các squares được đặt trung tâm theo chiều dọc và chiều ngang trong cả 2 trường hợp nhưng cả 2 trường hợp đều không thể hoán đổi!

Property #5: Align Self

Align-self cho phép bạn vận dụng alignment thủ công của 1 yếu tố cụ thể.

Về cơ bản, align-self ghi đè align-items cho 1 square. Dù được thiết lập auto nhưng tất cả các properties đều như nhau, trong đó align-self sẽ follow align-items của container.

#container {
  align-items: flex-start;
.square#one {
  align-self: center;
}
// Only this square will be centered.

Đây là kết quả hiển thị. Bạn sẽ áp dụng align-self vào 2 squares và phần còn lại thì áp dụng align-items: center và flex-direction: row.

1_hiadl1ol6pxxb2dmh_pxsq

Kết luận

Dù chúng ta mới chỉ tìm hiểu sơ về Flexbox nhưng những lệnh này là đủ để bạn giải quyết các alignments cơ bản nhất – và căn chỉnh dọc nội dung chính của bạn.