CSS Flexbox

0
21
  • CSS Flexbox giúp thiết kế cấu trúc bố cục đáp ứng linh hoạt dễ dàng hơn mà không cần sử dụng float hay position.

Flexbox Elements

  • Bố cục khi chưa có flex:
  • Khi có flex:

Cú pháp:

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

  • Lưu ý: Thuộc tính display:flex được cho vào <div> cha. Nhờ đó những phần tử con được linh hoạt hơn.

Các thuộc tính :

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content

Thuộc tính flex-direction

  • Thuộc tính này quy định cách trình bày các mục linh hoạt trong khung linh hoạt, bằng cách đặt hướng cho khung linh hoạt theo một trục chính. Chúng có thể được trình bày theo hai hướng, giống như hàng ngang hay hàng dọc.

Cú pháp:

  • flex-direction: column:  Các phần tử được sắp xếp theo chiều dọc, theo thứ tự các phần tử từ trên xuống dưới.
.flex-container { 
    display: flex; 
    flex-direction: column; }

Ví dụ:

Cú pháp:

  • flex-direction: column-reverse : Các phần tử được sắp xếp theo chiều dọc, theo thứ tự các phần tử từ dưới lên trên.
.flex-container { 
    display: flex; 
    flex-direction: column-reverse; }

Ví dụ:

Cú pháp:

  • flex-direction: row : Sắp xếp các phần tử theo chiều ngang  , theo thứ tự từ trái sang phải.
.flex-container { 
    display: flex; 
    flex-direction: row; 
    background-color: DodgerBlue; }

Ví dụ:

Cú pháp:

  • flex-direction: row-reverse: Tương tự nhưng sắp xếp theo thứ tự ngược lại.
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  background-color: DodgerBlue;
}

Ví dụ:

Thuộc tính flex-wrap

  • Các mục flex-wrap được hiển thị trên cùng một hàng, mặc định chúng sẽ tự động dãn hoặc thu hẹp để vừa với chiều rộng của khung lớn.

Cú pháp:

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

Ví dụ:

Hoặc là ngược lại:

Cú pháp:

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

Ví dụ:

Thuộc tính flex-flow

  • Thuộc tính này là một dạng viết tắt (shorthand) cho hai thuộc tính flex-directionflex-wrap.

Cú pháp:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Ví dụ:

Thuộc tính jusify-content

  • Thuộc tính justify-content sắp xếp các mục linh hoạt theo trục chính của dòng hiện tại trong khung flex. Nó giúp bổ sung không gian còn thừa ngay cả khi các mục linh hoạt trên một dòng không thể co giãn hoặc đã đạt đến kích thước tối đa.

Cú pháp:

.flex-container {
  display: flex;
  justify-content: center;
}

Ví dụ:

Cú pháp:

  • justify-content : flex-start  : Các phần tử được sắp xếp về bên trái.

Ví dụ:

Cú pháp:

  • justify-content : flex-end : Các phần tử được sắp xếp về bên phải.

Ví dụ:

Cú pháp:

  • justify-content : space-between Các phần tử sẽ được hiển thị với khoảng cách tương đương nhau ở giữa chúng, phần tử đầu tiên và cuối cùng được xếp vào 2 bên của khung flex.

Ví dụ:

Cú pháp:

  • justify-content : space-around  : Các phần tử được hiển thị với khoảng cách bằng nhau xung quanh mọi phần tử khác, kể cả phần tử đầu tiên và cuối cùng.

Ví dụ:

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây