Các mục CSS Flex
Các phần tử con (Vật phẩm)
Các phần tử con trực tiếp của một thùng chứa linh hoạt sẽ tự động trở thành các mục linh hoạt (linh hoạt).
1
2
3
4
Phần tử trên đại diện cho bốn mục flex màu xanh lam bên trong một thùng chứa flex màu xám.
Ví dụ
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Các thuộc tính của mục linh hoạt là:
Thứ tự tài sản
Thuộc tính order chỉ định thứ tự của các mục linh hoạt.
1
2
3
4
Mục linh hoạt đầu tiên trong mã không nhất thiết phải xuất hiện dưới dạng mục đầu tiên trong bố cục.
Giá trị đơn hàng phải là số, giá trị mặc định là 0.
Ví dụ
Thuộc tính order có thể thay đổi thứ tự của các mục linh hoạt:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Thuộc tính tăng trưởng linh hoạt
Thuộc tính flex-grow chỉ định mức độ tăng trưởng của một mục flex so với các mục flex còn lại.
1
2
3
Giá trị phải là số, giá trị mặc định là 0.
Ví dụ
Làm cho mục linh hoạt thứ ba phát triển nhanh hơn tám lần so với các mục linh hoạt khác:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
Thuộc tính co rút linh hoạt
Thuộc tính flex-shrink chỉ định mức độ co lại của một mục flex so với các mục flex còn lại.
1
2
3
4
5
6
7
số 8
9
10
Giá trị phải là số, giá trị mặc định là 1.
Ví dụ
Đừng để mục flex thứ ba co lại nhiều như các mục flex khác:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Thuộc tính cơ sở linh hoạt
Thuộc tính flex-basis chỉ định độ dài ban đầu của một mục flex.
1
2
3
4
Ví dụ
Đặt độ dài ban đầu của mục flex thứ ba thành 200 pixel:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Thuộc tính linh hoạt
Thuộc tính flex là thuộc tính viết tắt của các thuộc tính flex-grow , flex-shrink và flex-basis .
Ví dụ
Làm cho mục flex thứ ba không thể phát triển (0), không thể thu nhỏ (0) và có độ dài ban đầu là 200 pixel:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
Thuộc tính căn chỉnh của chính nó
Thuộc tính align-self chỉ định cách căn chỉnh cho mục đã chọn bên trong vùng chứa linh hoạt.
Thuộc tính align-self ghi đè căn chỉnh mặc định do thuộc tính align-items của vùng chứa đặt.
1
2
3
4
Trong các ví dụ này, chúng tôi sử dụng vùng chứa cao 200 pixel để thể hiện rõ hơn thuộc tính align-self :
Ví dụ
Căn chỉnh mục flex thứ ba ở giữa vùng chứa:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Ví dụ
Căn chỉnh mục flex thứ hai ở trên cùng của vùng chứa và mục flex thứ ba ở dưới cùng của vùng chứa:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
Thuộc tính các mục CSS Flexbox
Bảng sau liệt kê tất cả các thuộc tính CSS Flexbox Items:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |
