CSS Flex-box: items (Phần 2)
TIL
613
CSS3
52
White

Tấn Huy viết ngày 04/08/2018

Ở phần trước mình đã nói về các property của phần parent trong CSS Flex-box (xem lại ở đây). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các property của phần items. Trong phần items chúng ta sẽ có các property chính sau: order, flex-grow, flex-shrink, flex-basis, flex và align-self.

Các property của items

order

order đơn giản là property dùng để đặt lại thứ tự của các item bên trong parent theo ý của chúng ta, syntax của order sẽ là: order: sốnguyên. Ví dụ ta có đoạn code sau:

.flex-container{
    display:flex;
    background-color:#ddd;
    flex-wrap:wrap;
}
.child{
    margin:10px;
    padding:10px;
    width:100px;
    font-size:20px;
    background-color:#1abc9c;
}
<div class="flex-container">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
</div>

Chúng ta sẽ được như thế này:
alt text
Và nếu chúng ta dùng order để đặt lại vị trí của các items bên trong như sau (chỉ thêm vào, còn lại mọi thứ giữ nguyên) (dùng ngay pseudo-class :laughing:)

.child:nth-child(1){order:4;}
.child:nth-child(2){order:1;}
.child:nth-child(3){order:3;}
.child:nth-child(4){order:2;}

Thì chúng ta sẽ được như thế này:
alt text
Vị trí của các item bên trong sẽ bị thay đổi theo vị trí mà ta dùng order để đặt

flex-grow

Property này dùng để quy định xem độ lớn của một item sẽ lớn như thế nào so với các item còn lại, syntax của flex-grow sẽ là flex-grow: sốnguyên. Vẫn với ví dụ ở trên, nếu chúng ta cho 4 item trên đều có flex-grow là 1:

.child:nth-child(1){flex-grow:1;}
.child:nth-child(2){flex-grow:1;}
.child:nth-child(3){flex-grow:1;}
.child:nth-child(4){flex-grow:1;}

Thì chúng ta sẽ được 4 items bằng nhau như thế này:
alt text
Tuy nhiên nếu chúng ta sửa lại một tí, cho một item có flex-grow là 2 và 3 item còn lại là 1:

.child:nth-child(1){flex-grow:1;}
.child:nth-child(2){flex-grow:2;}
.child:nth-child(3){flex-grow:1;}
.child:nth-child(4){flex-grow:1;}

Chúng ta sẽ thấy độ lớn của item được xét lên flex-grow 2 sẽ có tỉ lệ gấp đôi các item còn lại:
alt text

flex-shrink

Nếu như flex-grow là quy định độ lớn của item thì flex-shirnk sẽ quy định yếu tố co lại của item, nó sẽ quyết định một item sẽ bị co lại như thế nào so với các item còn lại, syntax của nó sẽ là flex-shrink: sốnguyên.

Resize browser nhỏ lại thì chúng ta sẽ thấy được item số 1 sẽ bị co lại nhỏ hơn so với 3 item kia tại vì nó được chỉnh flex-shrink:6:

flex-basis

flex-basis dùng để quy định độ dài ban đầu của một item, syntax của nó: flex-basis: đơnvịđộdài. Nếu ta có class child và độ dài của nó là 100px và chúng ta tùy chỉnh item thứ 2 trong 4 item với flex-basis:300pxthì ta sẽ được như sau:
alt text

flex

flex là property dùng để ghi tắc cho 3 property ở trên: flex-grow, flex-shrink và flex-basis. thay vì chúng ta phải ghi:

.child{
  flex-grow:1;
  flex-shrink:6;
  flex-basis:300px;
}

thì ta sẽ có thể ghi gọn hơn với flex: flex:1 6 300px;. Và lưu ý:

  • Nếu ta dùng flex và viết chỉ với một số thế này: flex:1; thì nó sẽ hiểu đó chính là flex-grow.
  • Nếu ta dùng flex và viết với một "đơn vị độ dài" như thế này: flex:200px; thì nó sẽ hiểu là flex-basis.
  • Nếu ta dùng flex và viết với hai giá trị như thế này: flex:1 200px; thì nó sẽ hiểu là flex-growflex-basis
  • Nếu ta dùng flex và viết với hai giá trị như thế này: flex:1 2; thì nó sẽ hiểu là flex-growflex-shrink
  • Và nếu ta dùng flex và viết với 3 giá trị như thế này flex;1 2 300px thì sẽ lần lượt là flex-grow, flex-shrinkflex-basis.

align-self

Property này có công dụng cũng giống như align-items của phần parent tuy nhiên nó là dùng phần items, chúng ta có thể dùng nó để đặt lại vị trí cho một số item ta thích (hoặc tất cả) mà align-items đã quy định, align-self cũng có các giá trị giống như là align-items đó là: flex-start, flex-end, center, stretch và baseline. Ví dụ ta có 8 item đã được căn ra giữa nhờ align-items:center như sau:
alt text
Tuy nhiên ta lại muốn thằng thứ 3 là phải nằm ở dưới cùng, thằng thứ 5 thì phải kéo giãn dài ra và thằng thứ 7 thì phải nằm trên đầu thì ta chỉ việc dùng align-self để đặt lại cho nó.

.child:nth-child(3){align-self:flex-end;}
.child:nth-child(5){align-self:stretch;}
.child:nth-child(7){align-self:flex-start;}

Và đây là kết quả:
alt text

Link tham khảo

  • W3School ở đây
  • CSS0-tricks ở đây (đây là phần align-selft kéo xuống sẽ thấy related với các property khác)
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
6 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
11 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 2 tháng trước
11 2
White
4 0
1. Website layouts Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là: Header: Tiêu đ...
Tấn Huy viết 2 tháng trước
4 0
White
3 0
Như lần trước ,mình đã nói về (Link) thì lần này chúng ta sẽ tiếp tục với một layout module mới, đó chính là Grid layout module một layout module k...
Tấn Huy viết 15 ngày trước
3 0
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 2 tháng trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
6 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!