Tạo bố cục và cấu trúc trang với Display Flex
Để thực hiện, bạn hãy tạo một tập tin với đoạn mã HTML:.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 600px;
}
.box1, .box2, .box3, .box4 {
background: #ddd;
border: 2px solid #FF0000;
padding: 20px;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
Sau đó, chúng ta thêm thuộc tính display: flex cho container.
.container {
width: 600px;
display: flex;
}
Đặt chiều rộng cho các thành phần box.
.box1, .box2, .box3, .box4 {
flex: 20%;
}
Và kết quả các thành phần đã đặt trên một hàng rất đẹp phải không nhỉ.
Các đặc điểm của flexbox
Flexbox CSS có một số thuộc tính để căn chỉnh phần tử. Các thuộc tính này xác định hướng theo chiều ngang (main axis) và chiều dọc (cross axis).
Thuộc tính mở rộng linh hoạt
Flex-grow sẽ làm cho các phần tử có khả năng co giãn theo chiều rộng của container. Khi thiết lập giá trị, các box trong container sẽ tự động tăng kích thước để lấp đầy khoảng trống của container. Giá trị mặc định của flex-grow là 0.
Bây giờ, hãy xóa bỏ đoạn mã .Box1, .Box2, .Box3, .Box4 { flex: 20%; } và thay thế bằng đoạn mã sau đây.
.box1 {flex-grow: 1;}
.box2 {flex-grow: 3;}
.box3 {flex-grow: 1;}
.box4 {flex-grow: 1;}
Box2 khi thiết lập flex-grow: 3 sẽ có chiều rộng gấp ba lần so với các hộp khác.
Thuộc tính gói linh hoạt
Cú pháp:…
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Trong đó:.
Cũng với ví dụ trước, bạn sẽ bổ sung một đoạn mã Css như sau:.
.container {
flex-wrap: wrap;
}
Và mở rộng kích thước cho các mục.
.item {
width: 300px;
}
Và tại thời điểm này, các phần tử sẽ tự động được sắp xếp theo chiều dọc do phần tử cha container được đặt là 600px. Phần tử con item có kích thước là 300px sẽ bị tràn ra khỏi phần tử cha. Tuy nhiên, khi chúng ta thêm thuộc tính flex-wrap: wrap; vào, nó sẽ tự động căn chỉnh lại.
Thuộc tính justify-content
Justify-content sẽ tự động điều chỉnh khoảng trống khi các thành phần đặt trên cùng một hàng.
Cú pháp:…
.container {
justify-content:
flex-start | flex-end |
center | space-between |
space-around | space-evenly |
start | end |
left | right
}
Cũng như ví dụ trước, bây giờ hãy đặt chiều rộng của các hộp là 100px.
Và thêm phần CSS.
.container {
justify-content: space-between;
border:3px solid blue;
}
Và kết quả là:
Thuộc tính align-items
Align-item là thuộc tính dùng để điều chỉnh vị trí bắt đầu và căn chỉnh các phần tử bên trong container theo chiều dọc, theo trục chéo, hoặc theo chiều ngang, tùy thuộc vào hướng linh hoạt của flex-direction.
Cú pháp:…
align-items : stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
Ví dụ, giả sử chúng ta đang thiết lập chiều cao của container là 600px và chiều cao của các box là 100px. Đồng thời, chúng ta cũng thêm thuộc tính align-items vào container.
.container {
align-items: center;
}
Kết quả đã biến đổi.
Thay đổi thứ tự linh hoạt – Thay đổi vị trí của phần tử
Để thay đổi vị trí của một phần tử khi sử dụng Flexbox, bạn có thể dùng Order.
.box1 {
order: 1;
}
.box2 {
order: 3;
}
.box3 {
order: 4;
}
.box4 {
order: 2;
}
Flex-basis
Sử dụng để đặt kích thước ngang và dọc cho thành phần.
Giả sử ban đầu bạn gán cho các mục là.
.box1, .box2, .box3, .box4 {
width: 100px;
}
Sau đó, còn có thêm.
flex-basis: 200px;
Thì flex-basis sẽ ghi đè lên độ rộng là 200px.
Khi phần tử cha có thuộc tính flex-direction là row, flex-basis sẽ làm thay đổi chiều rộng của phần tử. Trong khi đó, khi phần tử cha có thuộc tính flex-direction là column, flex-basis sẽ làm thay đổi chiều cao của phần tử.
Thuộc tính co giãn flex-shrink
Flex-shrink sẽ làm co lại các phần tử so với các phần tử khác còn lại.
Kết hợp flex-grow, flex-shrink, flex-basis
Để hòa nhập bạn sử dụng.
flex: [flex-grow] [flex-shrink] [flex-basis]
Ví dụ:.
flex: 1 1 150px;
Giải thích:.
Kết luận: Chúng ta vừa cùng tìm hiểu về thuộc tính Display Flex trong CSS, một công cụ hữu ích trong việc xây dựng bố cục website. Nó thường được sử dụng để tạo bài viết dạng lưới (Grid), phân trang và nhiều hơn nữa. Sử dụng Flex, bạn không cần lo lắng về việc bố cục bị vỡ khi xây dựng trang web.
