Cách sử dụng flexbox trong css

Flexbox là một tính năng trong css mà bạn cần phải biết để xây dựng các bố cục từ đơn giản đến phức tạp. Tuy nhiên, cũng có một thực tế là rất khó để hiểu cơ chế và cách sử dụng Flexbox chỉ trong vài dòng văn bản. Do đó, trong bày này tôi sẽ giải thích trực quan bằng hình ảnh cách hoạt động của flexbox và cách sử dụng nó. Hãy làm chủ Flexbox để có thể tạo ra nhiều bố cục khác nhau nhé.

Flexbox là một phương pháp bố trí cho phép bạn sắp xếp các phần tử theo chiều dọc và chiều ngang. Bằng cách sử dụng Flexbox, bạn không chỉ có thể sắp xếp theo chiều dọc và chiều ngang mà còn có thể điều chỉnh tốt các vị trí như căn giữa và căn trên cùng của các phần tử được sắp xếp.

Container item

Các yếu tố bắt buộc khi sử dụng flexbox là flex containerflex item. Ta có một số items nằm cạnh nhau trong một vùng chứa flex như sau:

<div class="container">
  <div class="item item_1"></div>
  <div class="item item_2"></div>
  <div class="item item_3"></div>
  <div class="item item_4"></div>
  <div class="item item_5"></div>
</div>

Đặt thuộc tính display: flex; cho class="container" mà bạn muốn coi là vùng chứa flex. Ngoài ra, các phần tử được xếp bên trong được coi là các flex items.

/* vùng chứa các item */
.container {
  display: flex;
}

/* đặt thuộc tính padding và border cho các items */
.item {
  padding:1rem;
  border: 1px solid #ff00dd;
}

huong dan su dung flexbox, flexbox container
Hình ảnh flex container và các items

Trục chính/Trục giao nhau

  • Flexbox cho phép bạn sắp xếp các flex item cạnh nhau theo hàng (rows) hoặc theo cột (columns).
  • Hướng mà các flex items này được sắp xếp được gọi là trục chính (main axis).
  • Trục vuông góc với trục chính được gọi là trục giao nhau (crossing axis).

huong dan su dung flexbox, flexbox axis
Các trục trong flex

justify, align, content, items, self

  • justify Điều chỉnh hướng trục chính.
  • align Căn chỉnh hướng trục giao nhau.
  • self Từng item riêng lẻ.
  • items Các items trên cùng một hàng.
  • content toàn bộ các items.

huong dan su dung flexbox, flex justify align
flex justify align

Flex Direction/Wrap

Flex Direction

Hướng sắp xếp các Flex items có thể được đặt bằng thuộc tính flex-direction như sau:

.container {
  display: flex;
  flex-direction: row;
}
  • row xếp hàng từ trái sang phải.
  • row-reverse sắp xếp từ phải sang trái.
  • column sắp xếp từ trên xuống dưới.
  • column-reverse sắp xếp từ dưới lên trên.

huong dan su dung flexbox, flex flex-direction
Sử dụng flex-direction

Flex Wrap

.container {
  display: flex;
  flex-wrap: nowrap;
}

Các Flex items có thể được đặt bằng thuộc tính cho flex-wrap như: nowrap, wrap, wrap-reverse xem ảnh dưới đây để dễ hiểu rõ hơn.

huong dan su dung flexbox, flex flex-wrap
Sử dụng flex-wrap

Order

Thứ tự hiển thị của các items có thể được đặt bằng thuộc tính order. Với thuộc tính order chúng ta có thể sắp xếp lại vị trí sắp xếp của các item. Ví dụ:

.item_1 {
  order: 4;
}
.item_2 {
  order: 3;
}
.item_3 {
  order: 1;
}
.item_4 {
  order: 2;
}

huong dan su dung flexbox, flex order
Sử dụng order trong flex

Gap

Khoảng cách giữa các items có thể được đặt bằng thuộc tính gap. Bạn có thể chỉ định giá trị của kích thước, chẳng hạn như 8px hay 1rem.

.container {
  display: flex;
  gap: 8px;
}

huong dan su dung flexbox, flex gap
Sử dụng gap trong flex

Flex Grow/Shrink/Basis

Flex Grow

Bạn có thể tăng độ rộng của items đối với trục chính bằng thuộc tính flex-grow. Ta có thể chỉ định một giá trị số như 1, 0, 5,... và tỷ lệ của giá trị số được đặt cho mỗi item xác định cách nó mở rộnghay hẹp.

  • Tất cả items có độ rộng như nhau
.item {
  flex-grow: 2;
}
  • Chỉ định độ rộng cho từng item
.item_1 {
    flex-grow: 1;
}
.item_2 {
    flex-grow: 2;
}
.item_3 {
    flex-grow: 6;
}
.item_4 {
    flex-grow: 3;
}

huong dan su dung flexbox, flex-grow
Sử dụng flex-grow

Flex Shrink

Mặc định tất cả các item đều có giá trị flex-shrink là 1. Điều này có nghĩa là khi chúng ta thu nhỏ trình duyệt lại, các phần tử đều co lại bằng nhau. Tuy nhiên giả sử mình muốn item_3 nó co lại nhiều hơn so với các item khác thì ta sẽ tăng giá trị flex-shrink của nó lên. Tuy nhiên, nó chỉ hợp lệ nếu kích thước của tất cả các items vượt quá kích thước của vùng chứa flex.

.item_3 {
  flex-shrink: 3;
}

huong dan su dung flexbox, flex-shrink
flex-shrink

Flex Basis

Ta có thể hiểu đơn giản là gán cho item một kích thước nhất định nào đó chẳng hạn như 8px hay 1rem. Ví dụ dưới đây tôi sẽ gán giá trị là 64px cho .item_5

.item_5 {
  flex-basis: 64px;
}

huong dan su dung flexbox, flex-basis
Sử dụng flex-basis

Flex

flex-grow, flex-shrink, và flex-basis có thể được chỉ định chung với thuộc tính flex. Bạn có thể tham khảo thêm tại đây

.item {
  flex: 1;
}

Justify Content

Vị trí của toàn bộ items cho "trục chính (main axis)" có thể được chỉ định bằng thuộc tính justify-content (tham khảo ảnh dưới đây để dễ hình dung hơn).

  • flex-start:items hiển thị phía bên trái.
  • flex-end:items hiển thị phía bên phải.
  • center:items hiển thị ở trung tâm.
  • space-between:phân bố đồng đều (từ xác canh lề trái sang lề phải).
  • space-around:phân bố đồng đều (lề giữa vùng chứa và item bằng một nửa lề giữa các item liền kề).
  • space-evenly:phân bố đồng đều (lề giữa vùng chứa và item sẽ giống như lề giữa các items liền kề).
.container {
  display: flex;
  justify-content: flex-start;
}

huong dan su dung flexbox, justify-content
flex justify content

Align Content/Items/Self

Align Content

Căn chỉnh của toàn bộ items đối với trục giao nhau (crossing axis) có thể được chỉ định bằng thuộc tính align-content.

  • flex-start:đặt items ở phía trên cùng.
  • flex-end:đặt items ở phía dưới cùng.
  • center:Đặt items ở trung tâm.
  • space-between:phân bố items đồng đều (nếu vùng chứa không đủ rộng thì item sẽ tự động xuống hàng dưới cùng).
  • space-around:phân bố items đồng đều (lề giữa vùng chứa và dòng item bằng một nửa khoảng cách giữa các dòng item liền kề).
  • space-evenly:phân bố items đồng đều (lề giữa vùng chứa và dòng items sẽ giống như lề giữa các dòng items liền kề).
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

huong dan su dung flexbox, align-content
Sử dụng align-content

Align Items

Nhận các giá trị để hiển thị items vuông góc với trục giao nhau (crossing axis) có thể được chỉ định bằng thuộc tính align-items.

  • flex-start Đặt ở mặt trước.
  • flex-end được đặt ở cuối.
  • center Đặt ở trung tâm.
  • baseline Được sắp xếp sao cho các item con bám theo đường baseline của hàng hoặc cột.
  • stretch Được sắp xếp sao cho kích thước của mỗi item là như nhau.
.container {
  display: flex;
  align-items: flex-start;
}

huong dan su dung flexbox, align-items
Sử dụng align-items

Align Self

Căn chỉnh của item đơn lẻ đối với "trục giao nhau (crossing axis)" có thể được chỉ định bằng thuộc tính align-self. Nếu căn chỉnh được thiết lập, giá trị của các item căn chỉnh sẽ bị ghi đè.

  • flex-start Đặt ở phía trên cùng.
  • flex-end Đặt ở phía dưới cùng.
  • center Đặt ở trung tâm.
  • stretch Được sắp xếp sao cho kích thước của mỗi item là như nhau.
.item_1 {
    align-self: center;
}
.item_2 {
    align-self: flex-end;
}

huong dan su dung flexbox, align-self
Sử dụng align-self

Place Content

place-content có thể được chỉ định chung với thuộc tính align-contentjustify-content. Giá trị đầu tiên chỉ định giá trị của align-content và giá trị thứ hai chỉ định giá trị của justify-content.

.container {
  place-content: flex-start flex-end;
}

Tham khảo thêm

Đăng ký nhận bản tin!

Tôi sẽ gửi một email cho bạn khi tôi tạo ra một cái gì đó mới. Tôi sẽ không bao giờ gửi thư rác cho bạn 🙅‍♂️! và bạn có thể hủy đăng ký bất kỳ lúc nào.