CSS3 11 – CSS3 FlexBox (P.1)

0
96

Từ trước tới nay nếu chúng ta muốn dàn layout của một website thì chúng ta thường sử dụng thuộc tính float và các kỹ thuật clear float để chia layout như ý muốn. Nếu dùng các kỹ thuật truyền thống này thì sẽ rất mất thời gian và việc hiển thị chúng trên các thiết bị khác nhau phải cân chỉnh nhiều khiến cho css của chúng ta rất phức tạp.

CSS3 Flexbox ra đời giúp chúng ta giải quyết các khó khăn này

1. Giới Thiệu CSS3 FlexBox

Flexbox là một kiểu dàn trang mà nó sẽ tự điều chỉnh kích thước của các phần tử bên trong làm sao cho nó có thể hiện thị trên các thiết bị khác nhau.

Mặc dù Flexbox là thuộc tính dàn trang cực kỳ mạnh nhưng các chuyên gia khuyến khích các bạn dùng để thiết lập các bố cục trong phạm vi nhỏ, còn các phạm vi lớn như chia cấu trúc website thì nên sử dụng các kiểu dàn trang dạng lưới thông thường.

2. Các thuật ngữ trong FlexBox

Sơ đồ Cấu trúc Flexbox từ Mozila Developer Network

  • Flex container : phần tử cha chứa các mục con ở phía trong.  Ở đây các bạn có thể thiết đặt cách hiển thị flex để biểu thị dạng khối  hoặc inline-flex thông qua thuộc tính display.
  • Flex item: là các phần tử con của flex container , các phần tử con này sẽ hiện thị theo các thiết đặt của phần tử cha bên ngoài.
  • Trục : các khối được bố trí theo 2 trục. Các trục chính (main axis) là trục dọc theo các flex item. Các trục chéo (cross axis) là trục vuông góc với trục chính.
  • Hướng : main start / main end  và cross start/cross end của flex container mô tả các hướng bắt đầu và kết thúc của các khối flex item
  • Kích thước : main size và cross size lần lượt là chiều rộng và chiều cao của các flex item

Ví dụ về flex đơn giản

See the Pen vJpedw by Cao Anh Nhất (@xeko995) on CodePen.dark

3. Các thao tác trên phần tử cha

3.1. Thiết đặt flex

Để có thể sử dụng được flex thì chúng ta phải thiết đặt hiển thị flex trên phần tử cha.*

Cú pháp

Các giá trị bao gồm:

  • flex: Biểu thị dưới dạng khối
  • inline-flex: Biểu thị dưới dạng inline.

* Bắt buộc phải có nếu sự dụng flex

3.2. Các thuộc tính trong thành phần cha

a. Thuộc tính flex-direction

Thuộc tính này cho phép chúng ta thiết đặt lại trục và hướng xuất hiện của các phần tử bên trong.

Cú pháp :

Giá trị của thuộc tính bao gồm:

  • row: hiển thị trên một hàng trục chính là main-axis hướng chính main-start
  • row-reverse: hiển thị trên một hàng trục chính là main-axis hướng chính main-end
  • column: hiển thị trên một cột trục chính là cross-axis hướng chính cross-start
  • column-reverse:hiển thị trên một cột trục chính là cross-axis hướng chính cross-end

Ví dụ hiện thị trên một hàng trục chính là main-axis hướng chính main-end

See the Pen ayEVRb by Cao Anh Nhất (@xeko995) on CodePen.dark

b. Thuộc tính flex-wrap

Mặc định thì flexbox sẽ tự căn chỉnh chiều rộng các flex-item hiện thị đều nhau theo trục chính. Vì thế nếu bạn để độ rộng lung tung thì flexbox sẽ tự động căn các khối bị nhảy lung tung.

Flex-wrap cho phép chúng ta điều chỉnh hướng ngoài ra thuộc tính này sẽ tự động đưa các khối xuống hàng khi không đủ chỗ chứa các khối.

Các giá trị trong thuộc tính flex-wrap

  • nowrap : Giá trị mặc định ban đầu.
  • wrap :  Các flex-item sẽ được tự động xuống dòng. Điểm cross-start là điểm bắt đầu , điểm kết thúc là
  • wrap-reverse: Tương tự như Wrap nhưng điểm bắt đầu là cross-end và điểm kết thúc là cross-start

Ví dụ

See the Pen YxeJvd by Cao Anh Nhất (@xeko995) on CodePen.dark

c. Thuộc tính flex-flow

Thuộc tính flex-flow là kết hợp của 2 thuộc tính flex-direction và flex-wrap

Cú pháp

Trong đó các giá trị truyền vào là các thuộc tính của 2 thuộc tính flex-direction và flex-wrap.

Ví dụ

See the Pen praxxN by Cao Anh Nhất (@xeko995) on CodePen.dark

d. Thuộc tính justify-content

Thuộc tính Justify-content cho phép chúng ta điều chỉnh khoảng trống giữa và xung quan các nội dung bên trong flex-container theo trục chính main-exist

Các giá trị của thuộc tính

  • space-between : Các khoảng trống sẽ được chia đều giữa các dòng
  • space-around : Các khoảng trống sẽ được chia đều trước ,sau , giữa các dòng
  • flex-start : Giá trị mặc định. Được hiển thị theo trục chính của flex-container
  • flext-end : Hiển thị bắt đầu từ cuối
  • center : Nội dung bên trong sẽ tự động ra giữa khối

Ví dụ

See the Pen eEVPoG by Cao Anh Nhất (@xeko995) on CodePen.dark

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here