Flex trong CSS

Khái quát

Nếu bạn biết đến Postion CSS và Grid CSS có nhiệm vụ phân chia và sắp xếp bố cục cho trang web thì Flex củng xin ra với nhiệm vụ này. Vậy nếu đã cùng nhiệm vụ vậy tại sao còn cần đến Flex trong khi chúng ta có thể sử dụng Position CSS và Grid CSS.

Nếu Position mạnh mẻ bởi sự thao túng vị trí phần tử lên bắt kì nơi nào mà nó muốn một cách linh động nhất. Còn Grid thì hổ trợ phân chia và reponsive layout một cách đơn giản nhất. Những điểm mạnh này khiến cho Position và Grid dù được dùng chung mục đích nhưng lại không thể thay thế được. Vậy với Flex CSS nó củng sẽ có những năng lực vượt trội mà Position hay Grid CSS không thể thay thế được. Cùng tìm hiểu xem đó là gì nhé.

Khai báo

Để có thể làm việc với Flex củng giống như làm việc với Grid vậy. Nếu muốn kiểm soát các item bằng flex vậy thì class cha đang chứa nó cần được khai báo một thuộc tính display flex.

.list{
    background-color: red;
    display: flex;
}
.item{
    background-color: yellow;
    border:1px solid black
}

Minh họa khi được khai báo flex

Ở trạng thái mặc định của Flex thì các item sẽ được căn chỉnh kích thước sao cho chiều rộng của mỗi item luôn vừa khít với nội dung bên trong và chiều cao sẽ bằng chiều cao của class mẹ đang chứa nó.

Flex-direction

Flex-direction được sử dụng để định vị cách thể hiện các item bên trong, ở mặc định thì nó sẽ bằng row.

Row: Các item sẽ được sếp thành một hàng và theo thứ tự từ trái qua phải.
Row-reverse: Hiển thị theo chiều ngang nhưng với thứ tự ngược lại từ trái qua phải.
Colunm: Hiển thị các nội dung bên trong theo chiều dọc.
Column-reverse: Hiển thị nội dung bên trong theo chiều dọc nhưng với thứ tự ngược lại.

Minh họa với flex vơi row-revierse

Minh họa với colunm

Minh họa với colunm-reverse

Flex-wrap

Nếu ta khai báo width cho mỗi item là 100px thì flex vẩn chấp nhận width này. Nhưng nếu khi màn hình bị bo nhỏ lại khung hình không còn chứa đủ nửa thì flex sẽ tự động giảm kích thước của các item lại sao cho vừa với khung hình để tránh làm bể layout.

Nếu bạn không muốn nó thực hiện điều đó có thể sử dụng đến flex-wrap vào class cha.

    .list{
        background-color: red;
        display: flex;
        flex-wrap: wrap;
    }
    .item{
        background-color: yellow;
        border:1px solid black;
        width: 100px;
        height: 100px;
    }

Minh họa với flex-wrap

Khi này nếu có một item nào không còn chứa đủ trên một hàng nửa thì thay vì nó bị bo lại thì nó sẽ được rơi xuống dòng tiếp theo.

Nhưng có một lưu ý rằng ở trường hợp này nếu item nào đó có kích thước lớn hơn khung hình thì vẩn sẽ bị bo lại cho vừa khung hình để tránh việc bị bể design.

Order

Như tên gọi, order được xin ra nhằm mục đích thay đổi vị trí các phần tử một cách linh hoạt hơn. Các phần tử dể dàng đi đến những vị trí bất kì chỉ cần việc khai báo order.

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

Minh họa với order flex

Lưu ý khi làm việc với order, nếu có một item nào không được khai báo order thì mặc định nó có order bằng không và sẽ được đẩy lên đầu vì thuật toán này sắp xếp theo thứ tự tăng dần vậy số không sẽ đứng đầu tiên.

Justify-content

Justify-content là thuộc tính giúp căn lề văn bản theo chiều ngang.

Start: Căn về bên trái.
Center: Căn vào giửa.
End: Căn về bên phải.

Align-item

Tương tự như Justify-content align-item củng được sử dụng với mục đích căn lề tuy nhiên lại là căn theo chiều dọc.

Start: Căn lên đầu.
Center: Căn vào giửa.
End: Căn xuống phía dưới cùng.

Video hướng dẩn chi tiết

Xem nhiều hơn tại kênh youtube Lùn Dev