Các mục linh hoạt CSS
Phần tử con (Vật phẩm)
Các phần tử con trực tiếp của vùng chứa linh hoạt 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 linh hoạt màu xanh lam bên trong một thùng chứa linh hoạt màu xám.
Thí 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 item flex là:
Thuộc tính đặt hàng
Thuộc ordertính 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 phải xuất hiện dưới dạng mục đầu tiên trong bố cục.
Giá trị đặt hàng phải là một số, giá trị mặc định là 0.
Thí dụ
Thuộc tính order có thể thay đổi thứ tự của các item flex:
<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 phát triển linh hoạt
Thuộc flex-growtính chỉ định mức độ phát triển của một mục linh hoạt so với phần còn lại của các mục linh hoạt.
1
2
3
Giá trị phải là một số, giá trị mặc định là 0.
Thí 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 uốn cong
Thuộc flex-shrinktính chỉ định mức độ mà một mục flex sẽ co lại so với phần còn lại của các mục flex.
1
2
3
4
5
6
7
số 8
9
10
Giá trị phải là một số, giá trị mặc định là 1.
Thí dụ
Đừng để mục flex thứ ba bị 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 flex-basistính chỉ định độ dài ban đầu của một mục linh hoạt.
1
2
3
4
Thí dụ
Đặt độ dài ban đầu của mục linh hoạt 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 flextính là một thuộc tính viết tắt cho các thuộc tính
flex-grow, flex-shrinkvà flex-basis.
Thí dụ
Làm cho mục linh hoạt 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 tự căn chỉnh
Thuộc align-selftính chỉ định căn chỉnh cho mục đã chọn bên trong vùng chứa linh hoạt.
Thuộc align-self tính ghi đè căn chỉnh mặc định do thuộc tính của vùng chứa đặt align-items.
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
align-selftính:
Thí dụ
Căn chỉnh mục linh hoạt 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>
Thí dụ
Căn chỉnh mục uốn thứ hai ở trên cùng của thùng chứa và mục uốn thứ ba ở dưới cùng của thù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 Flexbox CSS
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 |