hướng dẫn sử dụng css flexbox phần 2

Hướng dẫn sử dụng CSS Flexbox phần 212 phút đọc

Sử dụng CSS Flexbox phần 2  – Justify-content

justify-content là thuộc tính chỉ định vị trí các yếu tố con theo chiều ngang như căn giữa, cách đều hai bên hay dịch hết về trái hoặc phải.

Thuộc tính justify-content bao gồm các giá trị dưới đây :

  • flex-start (mặc định) : sắp xếp các yếu tố con theo chiều ngang về phía trái
  • flex-end : sắp xếp các yếu tố con theo chiều ngang về phía phải
  • center : sắp xếp các yếu tố con theo chiều ngang về trung tâm
  • space-between : sắp xếp các yếu tố con theo chiều ngang cách đều nhau nhưng không cách đều hai đầu
  • space-around : như space-between nhưng cách đều hai đầu

Justify-content:flex-start

Justify-content:flex-start: giá trị mặc định của thuộc tính justify-content, khi sử dụng giá trị này thì những phần tử con sẽ nằm sát lề bên trái của phần tử mẹ.Khi viết CSS bạn có thể lược bỏ khai báo thuộc tính này.

sử dụng css flexbox phần 2 justify-content flex-start

Justify-content:flex-end

Justify-content:flex-end: sử dụng giá trị này thì các phần tử con sẽ nằm sát lề bên phải phải của phần tử mẹ.

sử dụng css flexbox phần 2 justify-content flex-end

Justify-content:center

Justify-content:center : giá trị này làm cho các phần tử con nằm giữa phần tử mẹ.

sử dụng css flexbox phần 2 justify-content center

Justify-content:space-between

Justify-content:space-between: giá trị này sẽ tạo ra khoảng cách luôn bằng nhau giữa các phần tử con,phần tử đầu tiên sẽ nằm sát lề bên trái và phần tử cuối cùng sẽ nằm sát lề bên phải.Dù cho chiều rộng màn hình thay đổi thì các khoảng cách này vẫn luôn được đảm bảo bằng cách co giãn các yếu tố con cho phù hợp.

sử dụng css flexbox phần 2 justify-content space-between

Justify-content:space-around

Justify-content:space-around: giá trị này có tác dụng tương tự như space-between  nhưng khoảng cách giữa các phần tử con và cả khoảng cách với lề trái và phải đều bằng nhau dù chiều rộng màn hình có thay đổi.

sử dụng css flexbox phần 2 justify-content space-around

Nhìn vào hình phía trên có thể bạn sẽ thắc mắc rằng khoảng cách giữa các phần tử con và hai bên lề đâu có giống nhau.Mình xin giải thích thế này : khoảng cách giữa hai yếu tố con bất kì bây giờ sẽ gấp đôi khoảng cách so với lề trái hay phải.

Nghĩa là bây giờ margin xung quanh một phần tử con luôn luôn bằng nhau.Ví dụ khoảng cách giữa phần tử số 1 với lề là 60px thì khoảng cách giữa phần tử 1 và phần tử hai sẽ là 120px.

Dưới đây là toàn bộ ví dụ về thuộc tính Justify-content trong trường hợp mặc định hay nói cách khác là flex-direction: row(chiều ngang).

HTML

CSS

Kết quả 

sử dụng css flexbox phần 2 justify-content

Để xem sự khác nhau của thuộc tính Justify-content khi áp dụng thuộc tính flex-direction: row (mặc định) và thuộc tính flex-direction: column (chiều dọc) bạn có thể theo dõi thêm ví dụ dưới đây.

HTML

CSS

Kết quả 

sử dụng css flexbox phần 2 justify-content row 1

sử dụng css flexbox phần 2 justify-content row 2

sử dụng css flexbox phần 2 justify-content row 3

sử dụng css flexbox phần 2 justify-content row 4

sử dụng css flexbox phần 2 justify-content row 5

Để thuộc tính justify-content phát huy tác dụng khi đi kèm với thuộc tính flex-direction: column thì mình đã phải điều chỉnh lại một số đoạn code CSS.Đầu tiên là giá trị width và height của các box mình phải điều chỉnh từ giá trị %, vh sang giá trị rem.

Cùng với đó mình cũng đã thiết lập chiều cao cố định cho mỗi khối row là 20rem.Bạn hãy thử thay đổi code để hiểu rõ hơn nhé.Về cơ bản thì dù theo chiều ngang hay dọc thì nguyên tắc hoạt động của thuộc tính justify-content vẫn không thay đổi.

Sử dụng CSS Flexbox phần 2  – Align-items

Align-items là thuộc tính chỉ định vị trí các phần tử con theo chiều dọc.Thuộc tính align-items bao gồm các giá trị dưới đây :

  • stretch (mặc định) : sắp xếp các phần tử con theo chiều dọc sao cho lấp đầy các khoảng trắng
  • flex-start: sắp xếp các phần tử con theo chiều dọc về phía trên
  • flex-end : sắp xếp các phần tử con theo chiều dọc về phía dưới
  • center : sắp xếp các phần tử con theo chiều dọc về trung tâm
  • baseline : sắp xếp các phần tử con theo chiều dọc dựa trên vị trí các thành phần bên trong chúng

Align-items : stretch

Stretch là giá trị mặc định của thuộc tính align-items nên bạn không cần khai báo nó khi viết CSS.Ý nghĩa của giá trị này là nó sẽ làm cho phần tử con full hết chiều cao của khối bao bọc nó nếu như bạn không thiết lập chiều cao cho nó.

hướng dẫn sử dụng css flexbox phần 2 align-items stretch

Align-items : flex-start

Flex-start là giá trị làm cho các phần tử con dịch chuyển hết về phía trên của phần tử mẹ bao bọc nó.

hướng dẫn sử dụng css flexbox phần 2 align-items flex-start

 

Align-items : flex-end

Flex-end là giá trị làm cho các phần tử con di chuyển hết về phía dưới của phần tử mẹ chứa nó.

hướng dẫn sử dụng css flexbox phần 2 align-items flex-end

Align-items : center

Center là giá trị của sẽ làm cho các phần tử con di chuyển về trung tâm của phần tử mẹ đang bao bọc nó.Trung tâm của phần tử mẹ và phần tử con sẽ nằm trên cùng một đường thẳng.

 

hướng dẫn sử dụng css flexbox phần 2 align-items center

Align-items : baseline

Baseline là giá trị hơi khó hiểu của align-items.Nó sẽ sắp xếp vị trí các phần tử con dựa theo thành phần bên trong các phần tử này.Như hình ví dụ dưới đây thì các giá trị số bên trong các khối con màu xanh dương đều có đáy nằm trên một đường thẳng.Và đường thẳng này được gọi là baseline.

hướng dẫn sử dụng css flexbox phần 2 align-items baseline

Toàn bộ các giá trị của thuộc tính align-items này đều được mình demo qua ví dụ thực tế dưới đây.Nếu chưa hiểu kĩ hay muốn lấy dữ liệu thực hành bạn hãy xem ngay nhé.

HTML

CSS

Kết quả

sử dụng css flexbox phần 2 align-items 01

sử dụng css flexbox phần 2 align-items 02

sử dụng css flexbox phần 2 align-items 03

sử dụng css flexbox phần 2 align-items 04

sử dụng css flexbox phần 2 align-items 05

Trong ví dụ lần này mình có thay đổi giá trị chiều cao của các phần tử con để các bạn dễ hình dung hơn.Còn khi thuộc tính align-items này đi kèm với thuộc tính flex-direction: column thì cách hoạt động cũng sẽ không có gì thay đổi.

Thay vì các phần tử con dịch chuyển theo chiều dọc (trên dưới) như trên thì giờ nó sẽ dịch chuyển theo chiều ngang (trái phải) mà thôi.Mình lưu ý là giá trị baseline sẽ không họat động khi áp dụng thuộc tính flex-direction: column nhé.

Chú ý khi sử dụng

Mặc định thì thuộc tính justify-content sẽ có tác động lên các phần tử con theo chiều ngang và thuộc tính align-items sẽ  tác động lên các phần tử con theo chiều dọc.Nhưng khi đi kèm với thuộc tính flex-direction: column thì sẽ ngược lại.

Do lúc này trục ngang và trục dọc đã đổi vị trí cho nhau.Kiến thức này khá khó nhưng hay được áp dụng trong thực tế.

Để dễ hình dung thì bạn hãy nhìn vào 2 hình dưới đây.

sử dụng css flexbox phần 2 06

Đây là hình minh họa thuộc tính flex-direction : row là giá trị mặc định.Lúc này thì trục ngang sẽ chịu ảnh hưởng của thuộc tính justify-content trục dọc sẽ chịu ảnh hưởng của thuộc tính align-items.

sử dụng css flexbox phần 2 07

Còn đây là hình minh học thuộc tính flex-direction : column.Trục ngang lúc này sẽ chịu ảnh hưởng của thuộc tính align-itemstrục dọc sẽ chịu ảnh hưởng của thuộc tính justịfy-content.

Kết luận

Trong bài hướng dẫn sử dụng css flexbox phần 2 này mình đã giới thiệu đến các bạn hai thuộc tính cực kì quan trọng và chắc chắn sẽ dùng đến khi dàn trang với flexbox đó là justify-content, align-items.

Chỉ có hai thuộc tính thôi nhưng khá nhiều giá trị và cách sử dụng cũng hơi rắc rối nên bạn hay cố gắng hiểu rõ hơn qua ví dụ mình giới thiệu rồi thử thực hành luôn nhé.

 

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x