Đang thực hiện
Tên đăng nhập
Mật khẩu
 
Hoặc đăng nhập bằng:
Nhập lại mật khẩu

Trang chủ Tin tổng hợp
Tin tổng hợp

Hiểu ngay thuộc tính Flexbox bằng bộ ảnh gif

Cập nhật: 09/10/2018 Lượt xem: 205
Flexbox là một trong những thuộc tính các bạn lập trình viên Front - end cần phải nắm thật vững để tạo ra các giao diện website tuyệt vời. Flexbox vô cùng mạnh mẽ và linh hoạt
Flexbox là một trong những thuộc tính các bạn lập trình viên Front - end cần phải nắm thật vững để tạo ra các giao diện website tuyệt vời. Flexbox vô cùng mạnh mẽ và linh hoạt. Chúng ta cùng tìm hiểu 5 thuộc tính cơ bản của Flexbox qua bộ ảnh GIF dưới đây.
 

1. Thuộc tính Display: Flex



Khi khai báo các div trong 1 container thì chúng ta sẽ có được kết quả như sau:
 

Khi chưa sử dụng Flexbox

Ở ví dụ này, các div đang mặc định thuộc tính display: block;

Để bắt đầu sử dụng được siêu năng lực của Flexbox thì ta phải chuyển các thẻ div về dạng flex. bằng cách đặt cho container thuộc tính sau:

 
#container {
  display: flex;
}
 

Sử dụng thuộc tính display: flex;

Khi đó các div sẽ được chuyển về dạng ngang. Tại sao lại như vậy??? Chúng ta sẽ sang phần tiếp theo.
 

2. Thuộc tính Flex direction



Đối với kiểu hiện thị Flex thì các phần tử được biểu diễn theo 2 trục Main axis và Cross axis.

Các trục trong Flexbox
Các trục trong Flexbox
 

Mặc định thì các phần tử sẽ hiển thị theo trục Main axis.
 
#container {
  display: flex;
  flex-direction: row;
}

thuoc tinh flex-direction column và flex-direction row
 
Demo thuộc tính flex-direction
 

Đấy chính là lý do vì sao chúng ta chỉ cần đặt display: flex; là các div trong ví dụ trên chuyển về hàng ngang.

Tuy nhiên, chúng ta có thể thay đổi trục cross axis bằng thuộc tính:

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


Cũng theo mặc định thì các phần tử được sắp xếp theo thứ tự từ trái qua phải, từ trên xuống dưới.

Tuy nhiên, chúng ta có thể thay đổi thứ tự ngược lại như sau:

flex-direction: row-reverse; (Thay đổi kiểu sắp xếp thành từ phải qua trái)
hoặc
flex-direction: column-reverse; (Thay đổi kiểu sắp xếp thành từ dưới lên trên)

dao nguoc thuoc tinh flex-direction

Demo thuộc tính đảo ngược flex-direction
 

3. Thuộc tính justify-content



Thuộc tính justify-content này sẽ giúp chúng ta căn vị trí của các phần tự dựa theo trục main axis

Để thiết lập thuộc tính này trước tên chúng ta phải thiết lập trục main axis cho nó.

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

Sau đó chúng ta thêm thuộc tính justify-content để thiết lập vị trí của các phần tử trên trục main axis (hiện tại là hàng ngang) với 5 lựa chọn như sau:


justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

 
Thuoc tinh justify content trong flexbox
Demo thuộc tính justify-content

2 lựa chọn cuối thì khác nhau đôi chút. Bạn để ý phần khoảng cách ở ngoài cùng thì sẽ hiểu. space-around thì khoảng cách 2 phần tử đầu + cuối cộng vào sẽ bằng khoảng cách giữa 2 phần tử bên trong (dĩ nhiên là có thêm một chút padding)
 

4. Thuộc tính Align-items



Justify-content đã giúp bạn căn chỉnh theo trục main axis rồi, và đúng như bạn đoán, Align-items giúp bạn căn chỉnh theo trục Cross axis.

Chúng ta cũng có 5 giá trị:

 
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;
 
thuoc tinh align items trong flexbox
Demo thuộc tính align-items

Lưu ý: Khi bạn sử dụng thuộc tính align-stretch thì bạn nên để thuộc tính heigh của phần tử là auto. Bởi vì heigh của items của phần tử sẽ bị ghi đè vào strech

Kết hợp các thuộc tính justify-content và align-items để bạn hiểu rõ hơn:
kết hợp căn theo 2 trục của flexbox
 

5. Thuộc tính Align-self



Thuộc tính này thì sẽ cho bạn khả năng căn chỉnh cho từng items cụ thể bằng cách đặt thuộc tính này vào phần css cho phần từ đó.
 
#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Only this square will be centered.


Mặc dù bạn đã căn vị trí bằng thuộc tính align-items nhưng khi sử dụng align-self thì nó sẽ ghi đè lên thuộc tính align-items.


Kết hợp align-items và align-self để hiểu rõ thuộc tính này hơn:
 
 
Kết hợp align-self và align-items trong flexbox
 

Tổng kết


Mặc dù đây mới chỉ là cơ bản của Flexbox, nếu bạn muốn master Flexbox thì bạn có thể tìm hiểu thêm tại các khóa học trên w3c. Hoặc theo dõi NIIT - ICT Hà Nội để cùng tìm hiểu ở các bài viết sau.

Tham khảo: https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35

 
Tư vấn viên 1: Lê Thoa
Tư vấn viên 2: Thu Huyền
Tuyển sinh lập trình viên quốc tế - MMS new vision
Khóa học C&B Excel - Trần Văn Hải