Flexbox System- Serie CSS - phần 10

Định nghĩa:

Flexbox là một hệ thống xây dựng layout, giúp xây dựng cấu trúc layout một cách dễ dàng mà không cần dùng đến float hay position.

Thuộc tính:

{
flex-direction: row | column; Định dạng hàng | cột
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly; Căn chỉnh theo chiều ngang
flex-wrap: wrap | nowrap | wrap-reserve;
flex-flow: row wrap; Được xem như là : flex-direction: row; flex-wrap: wrap;
align-items:flex-start | center | flex-end | stretch(default) | baseline; căn chỉnh theo chiều dọc
}

Cách dùng:

Để dùng được các thuộc tính trên chúng ta phải định nghĩa được dạng hiển thị của component hoặc element mà ta muốn bằng display: flex; và các thuộc tính phụ để định nghĩa cho element như flex-direction: row | column; 

Phân tích ví dụ ở trên, nếu các bạn mở trên codepen check responsive sẽ thấy mặc dù chưa viết responsive nhưng nó vẫn hoạt động trên các thiết bị khá tốt.

Example:

Mình sẽ phân tích code example như sau:

Định nghĩa thuộc tính element parent là flex, show item theo hàng, căn khoảng cách theo chiều dài của màn hình và không bị biến dạng khi thu nhỏ :

.container {
 display:flex; //Flex system
 flex-direction:row; // show item theo hàng
 justify-content:space-between; // Căn theo chiều dài màn hình
 flex-shrink:1; // ko bị biến dạng
}

Tiếp theo là định nghĩa các item bên trong:

Với mỗi flex item bên trong flex-item-custom, có 3 element phân biệt là header-content, body-content và footer-content.

Chúng ta tiếp tục gán cho nó thêm thuộc tính flex để có thể dễ dàng custom các element bên trong, show item theo cột ( column), và set width cho mỗi phần tử.

.flex-item-custom {
 display:flex; //Flex system
 flex-direction:column; // show item theo cột
 flex-basis: calc( calc(100% / 4) - 10px);
}

Flex-basis tương đồng với width, dùng cái nào cũng được. calc là hàm tính toán mặc định của css. ở đây chúng ta lấy 100% / 4 = 25%. để có khoảng cách giữa các cột để cải thiện ui , chúng ta margin 5px. Vì lẽ đó trong thuộc tính flex-basis chúng ta lấy 25% – 10px để các phần tử ko bị xuống hàng khi > 100%. Nói thì có vẻ khá dài dòng, ai chưa hiểu có thể xem lại bài margin, padding.

Với 2 đoạn code trên layout bạn trông sẽ như thế này

Giờ tiếp đến chúng ta sẽ style từ trên xuống.

Về cơ bản: khi để flex-direction: column thì width mặc định là 100%. vì lẽ đó chúng ta chỉ cần style lại height thôi. Height bao nhiêu là tùy các bạn. Như example thì mình dùng padding-bottom: 75%.

Tiếp đến là phần body, các bạn cần lưu ý nè. Phần này chứa các title, nếu các title bằng nhau thì ko có vấn để gì. Nhưng nếu, title mỗi cái dài ngắn khác nhau thì như thế nào? Trông nó sẽ như này:

Khác biệt của title

May mắn là, trong flex system có hỗ trợ chúng ta thuộc tính flex, giúp chúng ta xử lý việc này. Vậy thuộc tính Flex làm được những gì ?

Chưa có flex	flex = 1

Các bạn để ý phần xanh xẫm với các nét chéo, nếu ko dùng flex ( mặc định là 0 : false ), thì sẽ như hình, khoảng dư đấy ko được sử dụng, làm cho mất cân bằng giữa các item. Nếu dùng flex:1 ( true), thì nó sẽ lấy khoảng xanh xẫm đấy vào height của element và tận dụng làm của riêng nó. Điều đó giúp cho chúng ta style dễ dàng hơn.

Và đây là khi flex = 1;

Dưới đây là đoạn code của phần body:

.flex-item-custom .body-content {
 flex:1;
 padding:10px;
 font-size:18px;
 font-weight:500;
 color:rgb(0 0 0 / 75%);
}

Cơ bản là đã xong, giờ chúng ta còn công đoạn cuối là custom lại cái footer-content này thôi. Vì trong footer-content này có 3 element con và chúng ta muốn nó xếp thành 1 hàng nên chúng ta sẽ áp dụng tương tự với cái element container.

.flex-item-custom .footer-content {
 display:flex;
 flex-direction:row;
 color:rgb(0 0 0 /75%);
 justify-content:space-between;
 padding:10px;
 border-top:1px solid #eee;
 margin-top:auto;
}
.flex-item-custom .footer-content:nth-child(1) {
 flex-shrink: 1;
}
.flex-item-custom .footer-content:nth-child(2) {
 flex-shrink: 1;
}
.flex-item-custom .footer-content:nth-child(3) {
}

Trong đây có 1 thuộc tính flex-shrink: 1 , nó có nghĩa là khi bạn có gán nó width 50px thì dù cho width màn hình bạn còn 20px nó vẫn có giá trị là 50px. Không bị thay đổi khi width co lại.

Tổng kết:

Trên đây là 1 số kinh nghiệm của mình khi xử lý layout bằng flexbox. Và một số trường hợp khác có lẽ không có trong bài này mình sẽ ráng tổng hợp ở 1 bài khác. GLHF.