Nội dung chính
1/ Ý nghĩa Flexbox
Flexbox là cho phép vùng chứa có khả năng điều chỉnh, co giãn các phần tử bên trong (theo chiều rộng, chiều cao) dựa theo khoảng trống có sẵn bên trong vùng để tránh trường hợp bị tràn vùng, bể giao diện. Bố cục Flexbox khác với bốc cụ thông thường (theo mô hình khối – block) ở chỗ cho phép tính năng thay đổi kích thước, kéo căng, co giãn,… các thành phần giao diện dễ dàng hơn.
Flexbox nhắm đến mục tiêu là cách hiệu quả để tạo bố cục, canh chỉnh và giãn cách khoảng trống giữa các phần tử bên trong vùng chứa bố cục, ngay cả khi chưa biết kích thước của các phần tử này.
2/ Vùng chứa Container
Container là vùng chứa toàn bộ giao diện web, và các thành phần bên trong. Có thể tạo vùng chứa Flexbox như sau:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Đây là vùng chứa Flexbox CSS</title> <style> .flex-container { display: flex; background-color: lightblue; } </style></head> <body><div class="flex-container"> <!-- Nội dung bố cục con được thêm ở đây --></div></body> </html>3/ Các phần tử trong vùng chứa Container
Flex-item được gọi là các phần tử trong vùng chứa contaner, ví dụ như sau:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Flexbox CSS --- DAMMIO.COM</title> <style> .flex-container { display: flex; background-color: lightblue; } .flex-item { background-color: #f1f1f1; margin: 10px; width:33.33%; padding: 20px; font-size: 30px; } </style></head> <body><div class="flex-container"> <div class="flex-item">Phần tử 1 --- dammio.com</div> <div class="flex-item">Phần tử 2</div> <div class="flex-item">Phần tử 3</div> </div></body></html>4/ Các thuộc tính của Flexbox
Các thuộc tính dùng cho phần tử bên trong vùng chứa (item):
order: mô tả thứ tự sắp xếp các phần tử con.
flex-grow: mô tả kích thước tương đối của phần tử con so với các phần tử khác.
flex-shrink: mô tả kích thước của phần tử được co lại.
flex-basis: mô tả kích thước (pixel) của phần tử
flex: thuộc tính dùng chung cho 3 thuộc tính flex-grow, flex-shrink, và flex-basis.
align-self: canh các phần tử theo chiều dọc.
Các thuộc tính dùng cho vùng chứa (container):
flex-direction: mô tả chiều của Flexbox, theo hàng (row) hay cột (column).
flex-wrap: có nên bao phần tử con bên trong hay không (wrap, nowrap).
flex-flow: thuộc tính chung cho 2 thuộc tính flex-direction và flex-wrap.
justify-content: canh phần tử theo chiều ngang.
align-items: canh phần tử theo chiều dọc.
align-content: canh nội dung theo chiều dọc.
5/ Bố cục Flexbox trong thiết kế web
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vùng chứa contaner Flexbox CSS ---</title> <style> .header{ width:100%; height:100px; background-color:yellow; } .flex-container { display: flex; flex-direction: row; background-color: lightblue; } .sidebar-1{ flex:25%; background-color: pink; } .sidebar-2{ flex:25%; background-color: #F7DC6F; } .content{ flex:50%; background-color: #D7BDE2; } .footer{ width:100%; height:50px; background-color: #AAA; } @media screen and (max-width: 768px) { .flex-container { flex-direction: column; }} </style></head> <body><div class="header"> <h3>Header</h3></div><div class="flex-container"> <div class="sidebar-1"> Sidebar 1</br> Sidebar 1</br> Sidebar 1</br> </div> <div class="content"> Content</br> Content</br> Content</br> </div> <div class="sidebar-2"> Sidebar 2</br> Sidebar 2</br> </div> </div><div class="footer">Footer</div> </body></html>
