CSS3: Flex Responsive
Giải phóng thời gian, khai phóng năng lực
Mục lục bài viết:
Tạo bố cục 2 cột và 1 cột
Nếu bạn muốn tạo bố cục hai cột cho hầu hết các kích thước màn hình lớn (laptop chẳng hạn) và bố cục một cột cho các kích thước màn hình nhỏ (chẳng hạn như điện thoại và máy tính bảng), bạn có thể làm theo một trong hai cách dưới đây.
Cách 1: Dùng flex-direction: row
và flex-direction: column
Thay đổi flex-direction
từ row
thành column
tại một điểm ngắt cụ thể (<=800px như trong ví dụ bên dưới đây), lưu ý là bạn cần thay đổi độ rộng trình duyệt <=800px để thấy được hiệu ứng:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .flex-container { display: flex; flex-direction: row;/*Mặc định là row*/ font-size: 30px; text-align: center; } .flex-item-left { background-color: #f1f1f1; padding: 10px; flex: 50%; } .flex-item-right { background-color: dodgerblue; padding: 10px; flex: 50%; } /* Khi độ rộng trình duyệt <=800px thì bố cục (layout) sẽ thành 1 cột thay vì 2 cột*/ @media (max-width: 800px) { .flex-container { flex-direction: column; } } </style> </head> <body> <h1>Flex Responisve</h1> <p>"flex-direction: row;" sẽ đặt các mục flex nằm ngang (hướng trái sang phải).</p> <p>"flex-direction: column;" sẽ đặt các mục theo phương dọc (hướng trên xuống dưới).</p> <p><b>Bạn hãy thay đổi kích thước độ rộng trình duyệt <=800px để thấy hiệu ứng.</b></p> <div class="flex-container"> <div class="flex-item-left">1</div> <div class="flex-item-right">2</div> </div> </body> </html>
Kết quả:
Cách 2: Kết hợp flex-wrap: wrap
với flex
dùng tỷ lệ %
Cách thứ hai là thay đổi tỷ lệ phần trăm thuộc tính flex
của các mục flex để tạo các bố cục khác nhau cho các kích thước màn hình khác nhau. Lưu ý rằng ta cũng phải đưa flex-wrap: wrap;
vào class .flex-container để ví dụ dưới đây này hoạt động, lưu ý là bạn cần thay đổi độ rộng trình duyệt <=800px để thấy được hiệu ứng:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .flex-container { display: flex; flex-wrap: wrap; font-size: 30px; text-align: center; } .flex-item-left { background-color: #f1f1f1; padding: 10px; flex: 50%; } .flex-item-right { background-color: dodgerblue; padding: 10px; flex: 50%; } @media (max-width: 800px) { .flex-item-right, .flex-item-left { flex: 100%; } } </style> </head> <body> <div class="flex-container"> <div class="flex-item-left">1</div> <div class="flex-item-right">2</div> </div> </body> </html>
Kết quả:
Tạo gallery ảnh responsive
Sử dụng flexbox để tạo thư viện hình ảnh đáp ứng thay đổi giữa bốn, hai hoặc hình ảnh toàn chiều rộng, tùy thuộc vào kích thước màn hình, lưu ý là bạn cần thay đổi độ rộng trình duyệt để thấy được hiệu ứng:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial; } .header { text-align: center; padding: 32px; } .row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* Tạo 4 cột giống nhau và được đặt cạnh nhau */ .column { flex: 25%; max-width: 25%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; } /* Đổi thành 2 cột thay vì 4 cột */ @media (max-width: 800px) { .column { flex: 50%; max-width: 50%; } } /* Làm cho 2 cột nằm so le nhau thay vì nằm ngang nhau */ @media (max-width: 600px) { .column { flex: 100%; max-width: 100%; } } </style> </head> <body> <!-- Thiết lập lưới ảnh với mặc định gồm 4 cột--> <div class="row"> <div class="column"> <img src="https://lh3.googleusercontent.com/KOU6q0wlxd7SK0iLPa2eXqDbQGGXSpnWDSIZOFyyg7AQu87ciVioG3IUU1ps5zkxHaIQ0YdkoKpWa7izCoYMnVzYtB_gsNOzRhvjxRyTMfGD86UQ0WUan6VBbYeD-xt39edNrSHPO5IqUA8bVl-WfIaB8q2Yo4dz8KrSGBlNFMdNdYwn2Jim1D91sFANay3G8-95zvej_ykFcyAl8JFDAFpZWW4NG9BLL_tMmYUVs2-lSAvjnZ8TDmPkRHLufBXrvh9UfLKJanCxYAUNz5Halmr6EAUKIQDTOzzD2jpISR_ukA7wryhWlzTMqo8dFO1gw1tWX3W5gOr3LBjCrCwYwMYpP-2p6O9H7EvXewA5XPhK5SwOp_3Jz2E4iQoOHVTVnDclIsqGDycMvj0-LgF_NZc3OvBl1qQ4KX6AI7YT4dtT4AtpcEBwfNsluoyv-xsapF0hZJfui3cFejltzcriCvAUjnkeUWmofp4wA3QdICWzR5hD7U-bu3QT1jyr41LYajNGcOqdGzFuklfCOOp5WnOZDDKA5PUwIP6p2RQdhhmgyr0xnmGsZJxYbzcpUlO6IWpvyTyjqNNXdzQBzN_8uAkCczvE8nqURNijD9nlkwrSgStCff_QZwjsLlTIEsnodoWG33bYjAhPp9z1tXuXy7glcXLnyfoJTiQzyyB4GhTqZAANoABCvVYBbnIeS2_FHIShwkN0lBRCtUwY1gYE7aw=w960-h700-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/YnoeA1QOxoUbRbPHq3akNAaY6BXaYkwcR3Kia3F34OFjo3INxgK31nQBNM6PohKDU_0cLlw73cu0TsWZePt4kWqiul0EKRuCyATZ6ee2mlmkUSbIf2jiK7zZ2-mI8gUZY0UDsumX6nCIHos6m4g-xwlyTee9ZMhvpSqh0ICvi2o4YWdA9Foihy73ek69H10F8x3pY-x1XT6-Cus4unvtdVSEn1dchfoCKl18G50VE7KHMO3JpseYuBmsJRom-ALzHe0ibmSloiKIr3Rv2p1yvh4yw4HY8xFpqSM_K64J0iryPq2OXnNPgzETW7DWbEvVwJ1MdZGojzqp5-YDNe35mmJEm-85GrxGX1ijPMSO9hAX486kKusPfdiRfhLcGWDp48Yjm5lBEb4VsDzM5HoLrwrUR3Gk5JSilemVnlUbC5Q8ljSZ80l4M9bcp1kYnHk3AdsnAAcn2gx5kLLvXlfG5kKjculFEcuMhY75oUxVLvQRahJi4IbQd8KJJq8Ir9Jiq_I2Rom-rtBeIYilWN2vgk2fvcomlwTdR00KRJue27tMM_Fx3j_nLi1aQ1AYV2g53OuwvrH8GMkRbO49f1AkER97-UvsmSbc1yjMtd4GVSPHFnBwamx4u8RkW9aKdVEKmPKXRmD_w3lGZ7hT0Lj4kbpyrpMbhhfiwbqo8Tuvp8K7T2KD2jUIXBl-_Z30ygxzH-gmnzYnBu39VtyC-YjkVH0=w405-h851-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/_NX3LF-Cpyn8KtjBF9jGy0uU5hdifB6YtoDnGhkqZ4A8Db3HJMuFDl1-dgcy3Yh33SSaHQhlhX-Gb1OEXwn1bUq8jrbbe5FWzHc9PjO-gkIl4VcgoES8mfXo-MMFf-yv26NgNCEd6HWJnAzRvMlksHj0BmAFKgMiugm5Fi6XIpJ9TSNBuXpsAnV2rrsNY-Io6iCAKsVx_dYBWlVyxSgyxsogZS-qrll4B8CowKQ9Bkgap_n6Nq4px50igUpgN2EyMD5RJ2WSKB046B2JJwcpO1byrplB35z26oibnym95CTTkF75qxDNHE6FfaSIm7xSqzd9pLY54lvhc-PoZDf4QGuX8Q3LSySxcFXVv3bGqH3YNKRlKHIjZWDR9ayRIw59bfWHoY2M1TElhSvoDRJ8sg4heuA6zcQYKfwpPI4jDNmbGf7G2SSZNIfmupZN5i2ipDvRV1V1Hfc5oveRGzDDC3-v2Ti4Ba_LEdh5VlaE1liugQK4GuMIczyPjxAznM3GJ71ASktXRL8A04LvpmqMA5KCV4uoT2ymnApIemJfDy4sVjNxgdmwBcRyL-nJcPc7jOzlowRI97AxtGQK8MG9t641GT3TUzHyDBXtOPjdgVR9uQp7LDW0Lc7lrtQghmQXHuAafIv-fEfJDXivinZ_jzcRFh1XkxDYz92qEjRW-P9Db67SgLshWZ3IHiSYHVjTpmi-VK1bXAe7d75jh0lv3fY=w564-h294-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/0Fh6LaQ0pnu7Zu9Hiy3cVIvWnfTwxirIW_qGFoTmY63zdOis07dEIkL-3Z3BuJxbxX_2_IVmmsStkldqrlktu2Dg6waimI9ckxIpMS6dTqzLtJBVj4Dd-k98hIAITHOV8P7wNTk_ywPSmchLB9Sd-rbJrm00qTO1F8b5RROngkSQrqWGEsU4xNy5DkkgNoE_TR3cw1Hd0g9VqL3L6N_SXIlSfLbAWt1JHVS4AED4sYeEzk21DY3JKMXWYtQUK2Pe7Lf3GEqCDKNaZNq2omY_m_0MnJyQZJiKyKqSadaxCLHfymv9247GhIaM0cneLBMy4rmncFgbKUkTzGkMk77OSPJqsuk00favi-BOPesez4erqy7gnjWeahDzppGpjlYA_1VtWXpq-mv6y1GpXK5BpzRtl8YFspCMDkWOPufz9sHkg0GOjs97CPgQ_qNeMzA1Ml_KL4ZddWymcOgXvJaCSpjcP57MBgnKf4-SnPaqm-tRwz9ld4BYYFAPt2LWKAFGhTXDnnruYSrxaBknB4oSDmfPDnjRHeYArXnq7RdBWSYoUlmqyqC30H6QHPr17dZKp8II77gafxfOo_3BfANsW_BbcOYJNcDjR_pJz4pN01cGF_d6cI4JaHv3cwrBwDf22Q-NZCHkm49Ay9jHdkOFUl-ND13APOINTh5Rwi71K4WBZIsCN_egiljSlIilp9G6g4rlFUS35W7ghxLtZ5VBMtQ=w564-h423-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/55B6GElSwFyLGHTl0NtBeGAch7_NTjwseAjfqNCpD3tsFEFv4GSbjWAJpKqB85dqVpx7NfVI7YLizrbu3Gh0ZwHvcJZTRw35yFvaLhFJ4BBSQzWr99UB_aIEvH9Y7aOfcGVUyVFCxKc51DnQzBDLnAHu3o2KONgKZG4FKOFoTbvoBXBpBD9-uwnRNSHW0N4M-aB8qhUoy-bOo-6bn7QQPVmVK8FB1b_-7ZkZqpeW6DLNVmtwXkNKzkwaSan01yVcUrjSTGPOAFrmgt6HGFcDYEzMpIgmtV3fnPbxEzOy8pVdu9xOSr4vXZwRWdxF3k3mzV4jRG2FhH_A8YTVmaUZzZtsSG1PN8shmuZRZfSmEbc0yGkPpKAWhQV-DW-wO8lDpTx8cj_j7Xcq33Zc2_RdFIE05J6vKQTq4pLbalm4GrM_31nVsaFPqNFvcsX8TSUbX_AHultNTmBXjglXRDFzqHXHWvQfcuVAFqLEeCatTHrIDKXPLHMQaFoPovIBRVgaD7Jlg3dmscDl5tyXyGYttVIft0JZARZ54RzCMsQdHXa39XIjtuBFXkXW1uQF1wFiBdctREd_D1PSliW6ic06z5t0Zlu35AW1gJm9BoX4_zH8lvBTs4rIS2X5MIJl1-W1CVeF_nLXWMnMqDOe5ExEg3UC8LZQVWVjhdi4PW2clX6PDMoHQrQ3ewyy9Jtk8LGfQnI6d5857DmPsfIfzTezu8o=w300-h211-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/0tTcaNAqQ3qkxdcx0xsTEOaahkdMpZrVI31gJvlsICqlOcsg0DXzkJaqkQK7kBqp19elkKI_DjzPGYDDLYOOR9OVsP4FP8vVCJY5puJUsvua6LgVGcU4gCOn_s6G6lQzBFoZf4xxLNqw2CigWU-RfytcHUHVPXJbcH6dQjwmZDYm5kiXYG2X9h-3h4B7VCthpowwILrScqLTIyKu6Iwijq-YItACFmLWP6mPkKvJwa4n7gGZCmXfhpvC3CPFa0mQJMjyahycXV2P1VjeSk9qoF8PzpjxjKp7LwrjKP9chiy6HsV7cHbmush7CFnqxwpEBOeQJQcwaTyj4ZkGbK7YhqdZpM-79a5ODU3M4WQ8N2h9fsX3dzUKDcVxYIQ-Hq3YHh51CGW8MEazsygKjsyOyr3_5bLDYntgqXrtTOqUMp0GOsH32HwlEpHzVSR4eR5wzvYsDXGM4hZcQ2_5cO_wlzm9AwLkYFcndYP7APFhSrcI8rTbXe4ITfwhwShEQuRWpWh5GjZPcJqFCnl6CvfIeZ0_zcRZrrz47LfvEvFV2kWG00Q2tvo3aQIHKMz924U9T4tvXr8PFUXK0-I-Mz7UcosRRYNf6NBHOizmFFcYDL09arI9bx1xorjozHoL9kTu7Mhk9yljOZp1r9x8EA-Ckdr2Z1LtGBLjT7Omhy5awRaaqCj9nerA6y0-UCccrf6QS8BEzcIjyhfyBHYAMj1-pXk=w564-h369-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/FeJkW4HgxFXkhABG4jXR2_SUo0qoZXnccTEt0DcGLcbqUpn_tbFqufzD_SpJ312QJIvmotiv3JQd-NkEF0HQkIRTLJFJiby-JRZonI3eZ3AlHGYJIdIcZ_FLlQLGQAo8z5qRyW6SeW1FqrFzfzNWNDGdlgZRguKUei7yJzlTiQ5Ij8yGCeIOEnKZOs7MUU3DEqZT4UBZll7UeqdFjGY2FIQXOYrF6x3bIPX5OhFz8n5rBAUlHDcgWlxxAo52g6SKGdgTNJWwrSZPFznX0f3WQLPfBZwIC4suUpHrVspud1d5uHFcnZwXo9gkdkbpfvCQFxyqL0dAxjGbVgIvfQFvZzHTl0egKxJh1rVOTe1oqiKcdUl09RWhem4xOTkcFDViqJkm58UIKC40EXqaOBuzXMU0XDgTiGXiJ8u5Sc8UGzxuiTUuQf71gE-cMexoPRUj5sjqA0U_5TBEWnMdbp4k04m8Iubtugwc7O8UdIgxrm7TO_WIgNNW4WBDzZZiLwJEh8pTEBGm1O9D-n1y0ibLrJzQGrlSPnQxWgfEdEUaYvMuV_JdEAbyzYJIBAkb3CJ4Gf_j6oFY_BGdu6d0lMupsDRxj80heirdclsGN_mT7rfPGIJp8PvkzOG0EXf1JER-mfIY05CH_LBAvYRDG06z-HkFze2bFR9b3WUkmPy6Pt2UbDuB3b52f4lYhmhzADmhrKehns7zPpy7HBho0r0HQ88=w640-h424-no?authuser=1" style="width:100%"> </div> <div class="column"> <img src="https://lh3.googleusercontent.com/Vf7MHDS71AM8ywi4wrjilDugGm1kB1P9mlVI8xhqi5S1sBoNsattBQq0F_cdEzMXbp2t2GPwAJkZcF9p-5Mz5QfGT5bisEXcrI6W-cuELYw0KkEKYzbYIPVLoFZiz34tEMMslZK0p0OP9npEURkgLa8o7eKSz87alorosY-yplO5xYyjqoea0D_Z5cbo8jtasGYarDMZBYbXGLa8Ip9GblMy7vx68yj-tu7qDB8gdPl6Gak0VmWw3ZtFaQ58TNP73qSJ7ztAqKGfm0AXQaKkoHelkIJCG2dCEQPhdciikyZe2tk7R9qoEmksafEMutpfHDaMUJiF-YyAQUyRN0Ztu9mqQfMuHgSirngUI982jWRAKp2nj_3zLf3iN7Vyv9WUFICVIEm_f7-dOoypooxe5LXqJu72AVrYHpZ1f7ddX54uR8Zv1R0ceo0Vk6CrnHveF1dUIMbxxBv9Jtv7dZMFBxNtMsl2kW8_kgUpIXaMQFO7qQo_M4DrY9V7jX7LZIzH01KnI9YLnCUkX4RcsNgEJrjEtNcbG9jbj6reT1PIMI7L7oOlhkD2b_KiFqzCnSv4QEHfPKcoUMn8LYVdb7V7U-k8SDI8MX5y1EHNjvloSuV-FUsXvcbeLrpQkkDoufEc7NFzhsq4JzULWaUVBTPr3Di_ckYd_kkOTbnyBZihotFksjktie2i1g4McDIzouJlTONp1Qoaczd-rQPTB5_XhKg=w640-h428-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/L-PChygj3SAtYZlfb9j2j8yZDHKtreFYBNtNY04mcoBWWTjCfMiS3WVwp87hKSJWyfm2jB7O5TRMUMWVkCWeLKtXfq5S8nSwR9czdyBuFIp_NYIMHpVtmerTfefO4ScGJ4Ue657WM7qmkwcaaIbH4zFUHHcmqQpKlhphfSideGDBRMnwDrKl9adz4qTJWWA2uvki7P7qXUXyi2ibDKCgkrRv0tz5Ke1if6p_SITXjP9FffGSQxoeZ2wtXsiibYKTWmM9btLn1ku8b9a-7_BWxz3SJ2QJ3rLkcmwLFvy0t4X75uNt1aiCKeqVl-FDjJ0KZ8XUD18IanNo-Jq-Wr0D2RVzKzEDF_RUwYQwx7EhQyjGcoMjB1tUR_1yoVsODKedCFTcF77SFRI5fyi3s-D-L2jfc96wAq5ixPwSVpI6lm1hgSdtiyieDgk04ro_3HqsEuYtevOBszDfu1rhJdmGDHfnK4HjJ5eCAu_w2yDsFDmRuH_DA3_Nv1DvVr6AEPL0XcjXAIx0KKvjHHkiAEV40Sm9kzLvUHnffP4JM52rlBFxmyZ1zwaRnPD9l6UVCN3HAsRt7cUnsfAHHMbJjg8c-T1H8yB5FO5xsZ1lMqtm2E518lcGIvbDd7CNXs0xENN4Yr1vHz8E0HZZEXfiuAxHqRAxy42AtnQXhVr9fUNFsVOhEE7NMKpSzlgtNJ9q-9m7PRDIv5L_lR6M-TGQQfQh8wE=w640-h427-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/dk0O-p7arF4KxxK0djc1D9afxVfz_CW_AFN4Aak4Gsh-7mfCtyYqqB6gDHo8cH3QfuSuiklgG1mKeNQuDXRXNSyeh439srFzGgYW4Jv4zAJuNwZAwEL36hku0FaJBSABzYpI3BEzgOs6ZhEPGhWsIblEEUp3VUEpW8jweB3aU3DGYdjZ1GZNOf2FsURNmNYYxR3EWY-M5o5W8KhH0msFnNCjIByaluHRKL44CbhdEFmB-JQ6GgfIT2haMweclLviAGWRimJp6zenSqG94qjPy-dJUkjwzyQVAbIDCqI1J13BsU490Re3CKd7Ge6Lx1tWvozZFsxx5_FE8Tliw-GPiynvppULLGe5wfqQVEyVIbJwH2qtX-2Tppk_p1dlUTMWXEGDzS_N_d5ZjFzYXJ5NNZlSZlZ2d1tpuiqHXoLVDOrlXc4pLoTMHmf3qAVIZ9sLLrXRtT_sm9QTqxiRlXJZby5q1so2guxmTEPzwDcX8Hvh_IrpCN6d0SKCQVgI0McijfJcKVlYK7A5AOeK6z9Vd-B-gE7rzJgcYJ6-Vu7Tp9EEGvju0gX5III29jXfMdlN95jjUucDDupc6gvuZpj8nkBcqLRNkX_viAz6U1rTpmIuwhHm_JywXRuEwS8bT5dDNr41wsYqQ7upZkM11tKMm5c0Kx1K3OrhzX3EeJm7hEpPPIU-jJqFukpsq1o1jSo3VHX6RpLm-wHLrqXwBLejKXc=w640-h428-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/WexeWOWt1NKU6yQdSnzulYW2eRCHMXRNo3mKnJzroqDTfMXDPo5m5yUGrwAYvLd6OjybZrMo806f0TX2IOA3Qx-rD5ux_ZcKTioKFNrjWgU-4-_rcsr9PZMy5VYUo6ouR-rk6D7cmH9OEPsPNAkRYqTHoIRYiYo2AKQR6HjuzLiDP4jiqjnERBRGAvYDx8jkxc2MCXFoZLTyNoquMO8ZkxA9EwPnlXW1P3gEjXgxpberHPbe4XT8z0lh6_R2Atz7lvLfSKDtATXGBaS6TdE36FJY4OP7r3WQxMkzLPDxuoRh9MCQfLPBLqig8Pr7e4fYZdz2ZxNpf-8dsweRi_nDdu-IDeBXi7yf58czVGD-9BOlDjyqeNXrFRasWeGIFAF7RWSwhQPw6BvYyqvJE03PI-LVMY0p2JV7Hwxd1vFr5Bz5z6vC75hYewXYGYU_YPDJw5HxSgCD5-7doG1i1dUeXQJ7AlddfmErMNjG6DU2qkoYEjV5aE8jPSRDLpuWWl8LSkVDmjIRWx-XO59nulz2s8Xtte9Qu90IznK9GUWANUTREmkEUKzMD9gQd1Knm6CiG3MFSZsYxVUiAeTLZAHCUyRMiFiuAgQW5Y4QdKeeQ-dyyRRW8mx56Rfryx6psKjtS-hzAfxlQ-2Vp4mjPA2HY8AMiYi1ORpX99rUHhQkGXZx-UvmfXPKHHnZ6FSAempRwEBZcDxPWOJPED6yzE81NVc=w640-h428-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/X-2jT8dOPr4UJ3YAojw4e32iuRpXwoHac8A2IaTy-q0PDDu7oq6LkdCH9rKf8AhR5c3TC9BWZNo9aEOdfpW0NT_Dn9bezv3jBx6MSM28Dw5F5AcfEAvRIBKvLHtRPOcQF8hfTK3NkES8FH3JROXsrYxmUdRXmm7XFj2cWOX_5g8N2pKNnW5spGsqFqN8N0Px7JRwXFXAryvS8_ON1wLF7bD6aG3XhoMQtjBTk-L2bBg7NdTf-rBXOSLZT0DkYaPNYsel4kAClN7GNLNkcmEMZm0aV4Da1Ap2yl4TmqkoyfYF1uftKfTAQ5U3G-ZR5c6X1X8Ebr8nNGJQch2BzAOWTl7L-3gYxuqqzWxMEJL9snJO1cjeXbF1QO99jYWP-m6p4Vqba0rpfDnSBogA0bwCGPCT7_txb9tZNeyRYpsexKNuOMlDVgm3RtReRyfAse5YdJWq1uVlOyG8VLGlfa35YrnNu3o1O1IMhZzWrSOVFAYATJRJa5d3n5SM-aMDB8R2s1hUxA22f8TP-v-e3s6y8cBuquXEnBnjF1o1tXrNdw8Lf4jc96UM_1dGT9MXarb_Q9ageTOHqJYsRTP99etghDUtmun-RwDTjyIMPfeIsDWQvSK3ieVuIhodzJENpI7Z9c6e0vpQFxCEdnk8v5R6lIqA2hYCkOIcLB0Zf9jYp7T8_f7VBwWpXMTZLBGgXsk2HBSLoEMCVJu3PW-Tn4edIg0=w640-h428-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/KOU6q0wlxd7SK0iLPa2eXqDbQGGXSpnWDSIZOFyyg7AQu87ciVioG3IUU1ps5zkxHaIQ0YdkoKpWa7izCoYMnVzYtB_gsNOzRhvjxRyTMfGD86UQ0WUan6VBbYeD-xt39edNrSHPO5IqUA8bVl-WfIaB8q2Yo4dz8KrSGBlNFMdNdYwn2Jim1D91sFANay3G8-95zvej_ykFcyAl8JFDAFpZWW4NG9BLL_tMmYUVs2-lSAvjnZ8TDmPkRHLufBXrvh9UfLKJanCxYAUNz5Halmr6EAUKIQDTOzzD2jpISR_ukA7wryhWlzTMqo8dFO1gw1tWX3W5gOr3LBjCrCwYwMYpP-2p6O9H7EvXewA5XPhK5SwOp_3Jz2E4iQoOHVTVnDclIsqGDycMvj0-LgF_NZc3OvBl1qQ4KX6AI7YT4dtT4AtpcEBwfNsluoyv-xsapF0hZJfui3cFejltzcriCvAUjnkeUWmofp4wA3QdICWzR5hD7U-bu3QT1jyr41LYajNGcOqdGzFuklfCOOp5WnOZDDKA5PUwIP6p2RQdhhmgyr0xnmGsZJxYbzcpUlO6IWpvyTyjqNNXdzQBzN_8uAkCczvE8nqURNijD9nlkwrSgStCff_QZwjsLlTIEsnodoWG33bYjAhPp9z1tXuXy7glcXLnyfoJTiQzyyB4GhTqZAANoABCvVYBbnIeS2_FHIShwkN0lBRCtUwY1gYE7aw=w960-h700-no?authuser=1" style="width:100%"> </div> <div class="column"> <img src="https://lh3.googleusercontent.com/dk0O-p7arF4KxxK0djc1D9afxVfz_CW_AFN4Aak4Gsh-7mfCtyYqqB6gDHo8cH3QfuSuiklgG1mKeNQuDXRXNSyeh439srFzGgYW4Jv4zAJuNwZAwEL36hku0FaJBSABzYpI3BEzgOs6ZhEPGhWsIblEEUp3VUEpW8jweB3aU3DGYdjZ1GZNOf2FsURNmNYYxR3EWY-M5o5W8KhH0msFnNCjIByaluHRKL44CbhdEFmB-JQ6GgfIT2haMweclLviAGWRimJp6zenSqG94qjPy-dJUkjwzyQVAbIDCqI1J13BsU490Re3CKd7Ge6Lx1tWvozZFsxx5_FE8Tliw-GPiynvppULLGe5wfqQVEyVIbJwH2qtX-2Tppk_p1dlUTMWXEGDzS_N_d5ZjFzYXJ5NNZlSZlZ2d1tpuiqHXoLVDOrlXc4pLoTMHmf3qAVIZ9sLLrXRtT_sm9QTqxiRlXJZby5q1so2guxmTEPzwDcX8Hvh_IrpCN6d0SKCQVgI0McijfJcKVlYK7A5AOeK6z9Vd-B-gE7rzJgcYJ6-Vu7Tp9EEGvju0gX5III29jXfMdlN95jjUucDDupc6gvuZpj8nkBcqLRNkX_viAz6U1rTpmIuwhHm_JywXRuEwS8bT5dDNr41wsYqQ7upZkM11tKMm5c0Kx1K3OrhzX3EeJm7hEpPPIU-jJqFukpsq1o1jSo3VHX6RpLm-wHLrqXwBLejKXc=w640-h428-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/_NX3LF-Cpyn8KtjBF9jGy0uU5hdifB6YtoDnGhkqZ4A8Db3HJMuFDl1-dgcy3Yh33SSaHQhlhX-Gb1OEXwn1bUq8jrbbe5FWzHc9PjO-gkIl4VcgoES8mfXo-MMFf-yv26NgNCEd6HWJnAzRvMlksHj0BmAFKgMiugm5Fi6XIpJ9TSNBuXpsAnV2rrsNY-Io6iCAKsVx_dYBWlVyxSgyxsogZS-qrll4B8CowKQ9Bkgap_n6Nq4px50igUpgN2EyMD5RJ2WSKB046B2JJwcpO1byrplB35z26oibnym95CTTkF75qxDNHE6FfaSIm7xSqzd9pLY54lvhc-PoZDf4QGuX8Q3LSySxcFXVv3bGqH3YNKRlKHIjZWDR9ayRIw59bfWHoY2M1TElhSvoDRJ8sg4heuA6zcQYKfwpPI4jDNmbGf7G2SSZNIfmupZN5i2ipDvRV1V1Hfc5oveRGzDDC3-v2Ti4Ba_LEdh5VlaE1liugQK4GuMIczyPjxAznM3GJ71ASktXRL8A04LvpmqMA5KCV4uoT2ymnApIemJfDy4sVjNxgdmwBcRyL-nJcPc7jOzlowRI97AxtGQK8MG9t641GT3TUzHyDBXtOPjdgVR9uQp7LDW0Lc7lrtQghmQXHuAafIv-fEfJDXivinZ_jzcRFh1XkxDYz92qEjRW-P9Db67SgLshWZ3IHiSYHVjTpmi-VK1bXAe7d75jh0lv3fY=w564-h294-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/KOU6q0wlxd7SK0iLPa2eXqDbQGGXSpnWDSIZOFyyg7AQu87ciVioG3IUU1ps5zkxHaIQ0YdkoKpWa7izCoYMnVzYtB_gsNOzRhvjxRyTMfGD86UQ0WUan6VBbYeD-xt39edNrSHPO5IqUA8bVl-WfIaB8q2Yo4dz8KrSGBlNFMdNdYwn2Jim1D91sFANay3G8-95zvej_ykFcyAl8JFDAFpZWW4NG9BLL_tMmYUVs2-lSAvjnZ8TDmPkRHLufBXrvh9UfLKJanCxYAUNz5Halmr6EAUKIQDTOzzD2jpISR_ukA7wryhWlzTMqo8dFO1gw1tWX3W5gOr3LBjCrCwYwMYpP-2p6O9H7EvXewA5XPhK5SwOp_3Jz2E4iQoOHVTVnDclIsqGDycMvj0-LgF_NZc3OvBl1qQ4KX6AI7YT4dtT4AtpcEBwfNsluoyv-xsapF0hZJfui3cFejltzcriCvAUjnkeUWmofp4wA3QdICWzR5hD7U-bu3QT1jyr41LYajNGcOqdGzFuklfCOOp5WnOZDDKA5PUwIP6p2RQdhhmgyr0xnmGsZJxYbzcpUlO6IWpvyTyjqNNXdzQBzN_8uAkCczvE8nqURNijD9nlkwrSgStCff_QZwjsLlTIEsnodoWG33bYjAhPp9z1tXuXy7glcXLnyfoJTiQzyyB4GhTqZAANoABCvVYBbnIeS2_FHIShwkN0lBRCtUwY1gYE7aw=w960-h700-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/Vf7MHDS71AM8ywi4wrjilDugGm1kB1P9mlVI8xhqi5S1sBoNsattBQq0F_cdEzMXbp2t2GPwAJkZcF9p-5Mz5QfGT5bisEXcrI6W-cuELYw0KkEKYzbYIPVLoFZiz34tEMMslZK0p0OP9npEURkgLa8o7eKSz87alorosY-yplO5xYyjqoea0D_Z5cbo8jtasGYarDMZBYbXGLa8Ip9GblMy7vx68yj-tu7qDB8gdPl6Gak0VmWw3ZtFaQ58TNP73qSJ7ztAqKGfm0AXQaKkoHelkIJCG2dCEQPhdciikyZe2tk7R9qoEmksafEMutpfHDaMUJiF-YyAQUyRN0Ztu9mqQfMuHgSirngUI982jWRAKp2nj_3zLf3iN7Vyv9WUFICVIEm_f7-dOoypooxe5LXqJu72AVrYHpZ1f7ddX54uR8Zv1R0ceo0Vk6CrnHveF1dUIMbxxBv9Jtv7dZMFBxNtMsl2kW8_kgUpIXaMQFO7qQo_M4DrY9V7jX7LZIzH01KnI9YLnCUkX4RcsNgEJrjEtNcbG9jbj6reT1PIMI7L7oOlhkD2b_KiFqzCnSv4QEHfPKcoUMn8LYVdb7V7U-k8SDI8MX5y1EHNjvloSuV-FUsXvcbeLrpQkkDoufEc7NFzhsq4JzULWaUVBTPr3Di_ckYd_kkOTbnyBZihotFksjktie2i1g4McDIzouJlTONp1Qoaczd-rQPTB5_XhKg=w640-h428-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/L-PChygj3SAtYZlfb9j2j8yZDHKtreFYBNtNY04mcoBWWTjCfMiS3WVwp87hKSJWyfm2jB7O5TRMUMWVkCWeLKtXfq5S8nSwR9czdyBuFIp_NYIMHpVtmerTfefO4ScGJ4Ue657WM7qmkwcaaIbH4zFUHHcmqQpKlhphfSideGDBRMnwDrKl9adz4qTJWWA2uvki7P7qXUXyi2ibDKCgkrRv0tz5Ke1if6p_SITXjP9FffGSQxoeZ2wtXsiibYKTWmM9btLn1ku8b9a-7_BWxz3SJ2QJ3rLkcmwLFvy0t4X75uNt1aiCKeqVl-FDjJ0KZ8XUD18IanNo-Jq-Wr0D2RVzKzEDF_RUwYQwx7EhQyjGcoMjB1tUR_1yoVsODKedCFTcF77SFRI5fyi3s-D-L2jfc96wAq5ixPwSVpI6lm1hgSdtiyieDgk04ro_3HqsEuYtevOBszDfu1rhJdmGDHfnK4HjJ5eCAu_w2yDsFDmRuH_DA3_Nv1DvVr6AEPL0XcjXAIx0KKvjHHkiAEV40Sm9kzLvUHnffP4JM52rlBFxmyZ1zwaRnPD9l6UVCN3HAsRt7cUnsfAHHMbJjg8c-T1H8yB5FO5xsZ1lMqtm2E518lcGIvbDd7CNXs0xENN4Yr1vHz8E0HZZEXfiuAxHqRAxy42AtnQXhVr9fUNFsVOhEE7NMKpSzlgtNJ9q-9m7PRDIv5L_lR6M-TGQQfQh8wE=w640-h427-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/0Fh6LaQ0pnu7Zu9Hiy3cVIvWnfTwxirIW_qGFoTmY63zdOis07dEIkL-3Z3BuJxbxX_2_IVmmsStkldqrlktu2Dg6waimI9ckxIpMS6dTqzLtJBVj4Dd-k98hIAITHOV8P7wNTk_ywPSmchLB9Sd-rbJrm00qTO1F8b5RROngkSQrqWGEsU4xNy5DkkgNoE_TR3cw1Hd0g9VqL3L6N_SXIlSfLbAWt1JHVS4AED4sYeEzk21DY3JKMXWYtQUK2Pe7Lf3GEqCDKNaZNq2omY_m_0MnJyQZJiKyKqSadaxCLHfymv9247GhIaM0cneLBMy4rmncFgbKUkTzGkMk77OSPJqsuk00favi-BOPesez4erqy7gnjWeahDzppGpjlYA_1VtWXpq-mv6y1GpXK5BpzRtl8YFspCMDkWOPufz9sHkg0GOjs97CPgQ_qNeMzA1Ml_KL4ZddWymcOgXvJaCSpjcP57MBgnKf4-SnPaqm-tRwz9ld4BYYFAPt2LWKAFGhTXDnnruYSrxaBknB4oSDmfPDnjRHeYArXnq7RdBWSYoUlmqyqC30H6QHPr17dZKp8II77gafxfOo_3BfANsW_BbcOYJNcDjR_pJz4pN01cGF_d6cI4JaHv3cwrBwDf22Q-NZCHkm49Ay9jHdkOFUl-ND13APOINTh5Rwi71K4WBZIsCN_egiljSlIilp9G6g4rlFUS35W7ghxLtZ5VBMtQ=w564-h423-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/0tTcaNAqQ3qkxdcx0xsTEOaahkdMpZrVI31gJvlsICqlOcsg0DXzkJaqkQK7kBqp19elkKI_DjzPGYDDLYOOR9OVsP4FP8vVCJY5puJUsvua6LgVGcU4gCOn_s6G6lQzBFoZf4xxLNqw2CigWU-RfytcHUHVPXJbcH6dQjwmZDYm5kiXYG2X9h-3h4B7VCthpowwILrScqLTIyKu6Iwijq-YItACFmLWP6mPkKvJwa4n7gGZCmXfhpvC3CPFa0mQJMjyahycXV2P1VjeSk9qoF8PzpjxjKp7LwrjKP9chiy6HsV7cHbmush7CFnqxwpEBOeQJQcwaTyj4ZkGbK7YhqdZpM-79a5ODU3M4WQ8N2h9fsX3dzUKDcVxYIQ-Hq3YHh51CGW8MEazsygKjsyOyr3_5bLDYntgqXrtTOqUMp0GOsH32HwlEpHzVSR4eR5wzvYsDXGM4hZcQ2_5cO_wlzm9AwLkYFcndYP7APFhSrcI8rTbXe4ITfwhwShEQuRWpWh5GjZPcJqFCnl6CvfIeZ0_zcRZrrz47LfvEvFV2kWG00Q2tvo3aQIHKMz924U9T4tvXr8PFUXK0-I-Mz7UcosRRYNf6NBHOizmFFcYDL09arI9bx1xorjozHoL9kTu7Mhk9yljOZp1r9x8EA-Ckdr2Z1LtGBLjT7Omhy5awRaaqCj9nerA6y0-UCccrf6QS8BEzcIjyhfyBHYAMj1-pXk=w564-h369-no?authuser=1" style="width:100%"> </div> <div class="column"> <img src="https://lh3.googleusercontent.com/YnoeA1QOxoUbRbPHq3akNAaY6BXaYkwcR3Kia3F34OFjo3INxgK31nQBNM6PohKDU_0cLlw73cu0TsWZePt4kWqiul0EKRuCyATZ6ee2mlmkUSbIf2jiK7zZ2-mI8gUZY0UDsumX6nCIHos6m4g-xwlyTee9ZMhvpSqh0ICvi2o4YWdA9Foihy73ek69H10F8x3pY-x1XT6-Cus4unvtdVSEn1dchfoCKl18G50VE7KHMO3JpseYuBmsJRom-ALzHe0ibmSloiKIr3Rv2p1yvh4yw4HY8xFpqSM_K64J0iryPq2OXnNPgzETW7DWbEvVwJ1MdZGojzqp5-YDNe35mmJEm-85GrxGX1ijPMSO9hAX486kKusPfdiRfhLcGWDp48Yjm5lBEb4VsDzM5HoLrwrUR3Gk5JSilemVnlUbC5Q8ljSZ80l4M9bcp1kYnHk3AdsnAAcn2gx5kLLvXlfG5kKjculFEcuMhY75oUxVLvQRahJi4IbQd8KJJq8Ir9Jiq_I2Rom-rtBeIYilWN2vgk2fvcomlwTdR00KRJue27tMM_Fx3j_nLi1aQ1AYV2g53OuwvrH8GMkRbO49f1AkER97-UvsmSbc1yjMtd4GVSPHFnBwamx4u8RkW9aKdVEKmPKXRmD_w3lGZ7hT0Lj4kbpyrpMbhhfiwbqo8Tuvp8K7T2KD2jUIXBl-_Z30ygxzH-gmnzYnBu39VtyC-YjkVH0=w405-h851-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/55B6GElSwFyLGHTl0NtBeGAch7_NTjwseAjfqNCpD3tsFEFv4GSbjWAJpKqB85dqVpx7NfVI7YLizrbu3Gh0ZwHvcJZTRw35yFvaLhFJ4BBSQzWr99UB_aIEvH9Y7aOfcGVUyVFCxKc51DnQzBDLnAHu3o2KONgKZG4FKOFoTbvoBXBpBD9-uwnRNSHW0N4M-aB8qhUoy-bOo-6bn7QQPVmVK8FB1b_-7ZkZqpeW6DLNVmtwXkNKzkwaSan01yVcUrjSTGPOAFrmgt6HGFcDYEzMpIgmtV3fnPbxEzOy8pVdu9xOSr4vXZwRWdxF3k3mzV4jRG2FhH_A8YTVmaUZzZtsSG1PN8shmuZRZfSmEbc0yGkPpKAWhQV-DW-wO8lDpTx8cj_j7Xcq33Zc2_RdFIE05J6vKQTq4pLbalm4GrM_31nVsaFPqNFvcsX8TSUbX_AHultNTmBXjglXRDFzqHXHWvQfcuVAFqLEeCatTHrIDKXPLHMQaFoPovIBRVgaD7Jlg3dmscDl5tyXyGYttVIft0JZARZ54RzCMsQdHXa39XIjtuBFXkXW1uQF1wFiBdctREd_D1PSliW6ic06z5t0Zlu35AW1gJm9BoX4_zH8lvBTs4rIS2X5MIJl1-W1CVeF_nLXWMnMqDOe5ExEg3UC8LZQVWVjhdi4PW2clX6PDMoHQrQ3ewyy9Jtk8LGfQnI6d5857DmPsfIfzTezu8o=w300-h211-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/dk0O-p7arF4KxxK0djc1D9afxVfz_CW_AFN4Aak4Gsh-7mfCtyYqqB6gDHo8cH3QfuSuiklgG1mKeNQuDXRXNSyeh439srFzGgYW4Jv4zAJuNwZAwEL36hku0FaJBSABzYpI3BEzgOs6ZhEPGhWsIblEEUp3VUEpW8jweB3aU3DGYdjZ1GZNOf2FsURNmNYYxR3EWY-M5o5W8KhH0msFnNCjIByaluHRKL44CbhdEFmB-JQ6GgfIT2haMweclLviAGWRimJp6zenSqG94qjPy-dJUkjwzyQVAbIDCqI1J13BsU490Re3CKd7Ge6Lx1tWvozZFsxx5_FE8Tliw-GPiynvppULLGe5wfqQVEyVIbJwH2qtX-2Tppk_p1dlUTMWXEGDzS_N_d5ZjFzYXJ5NNZlSZlZ2d1tpuiqHXoLVDOrlXc4pLoTMHmf3qAVIZ9sLLrXRtT_sm9QTqxiRlXJZby5q1so2guxmTEPzwDcX8Hvh_IrpCN6d0SKCQVgI0McijfJcKVlYK7A5AOeK6z9Vd-B-gE7rzJgcYJ6-Vu7Tp9EEGvju0gX5III29jXfMdlN95jjUucDDupc6gvuZpj8nkBcqLRNkX_viAz6U1rTpmIuwhHm_JywXRuEwS8bT5dDNr41wsYqQ7upZkM11tKMm5c0Kx1K3OrhzX3EeJm7hEpPPIU-jJqFukpsq1o1jSo3VHX6RpLm-wHLrqXwBLejKXc=w640-h428-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/_NX3LF-Cpyn8KtjBF9jGy0uU5hdifB6YtoDnGhkqZ4A8Db3HJMuFDl1-dgcy3Yh33SSaHQhlhX-Gb1OEXwn1bUq8jrbbe5FWzHc9PjO-gkIl4VcgoES8mfXo-MMFf-yv26NgNCEd6HWJnAzRvMlksHj0BmAFKgMiugm5Fi6XIpJ9TSNBuXpsAnV2rrsNY-Io6iCAKsVx_dYBWlVyxSgyxsogZS-qrll4B8CowKQ9Bkgap_n6Nq4px50igUpgN2EyMD5RJ2WSKB046B2JJwcpO1byrplB35z26oibnym95CTTkF75qxDNHE6FfaSIm7xSqzd9pLY54lvhc-PoZDf4QGuX8Q3LSySxcFXVv3bGqH3YNKRlKHIjZWDR9ayRIw59bfWHoY2M1TElhSvoDRJ8sg4heuA6zcQYKfwpPI4jDNmbGf7G2SSZNIfmupZN5i2ipDvRV1V1Hfc5oveRGzDDC3-v2Ti4Ba_LEdh5VlaE1liugQK4GuMIczyPjxAznM3GJ71ASktXRL8A04LvpmqMA5KCV4uoT2ymnApIemJfDy4sVjNxgdmwBcRyL-nJcPc7jOzlowRI97AxtGQK8MG9t641GT3TUzHyDBXtOPjdgVR9uQp7LDW0Lc7lrtQghmQXHuAafIv-fEfJDXivinZ_jzcRFh1XkxDYz92qEjRW-P9Db67SgLshWZ3IHiSYHVjTpmi-VK1bXAe7d75jh0lv3fY=w564-h294-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/FeJkW4HgxFXkhABG4jXR2_SUo0qoZXnccTEt0DcGLcbqUpn_tbFqufzD_SpJ312QJIvmotiv3JQd-NkEF0HQkIRTLJFJiby-JRZonI3eZ3AlHGYJIdIcZ_FLlQLGQAo8z5qRyW6SeW1FqrFzfzNWNDGdlgZRguKUei7yJzlTiQ5Ij8yGCeIOEnKZOs7MUU3DEqZT4UBZll7UeqdFjGY2FIQXOYrF6x3bIPX5OhFz8n5rBAUlHDcgWlxxAo52g6SKGdgTNJWwrSZPFznX0f3WQLPfBZwIC4suUpHrVspud1d5uHFcnZwXo9gkdkbpfvCQFxyqL0dAxjGbVgIvfQFvZzHTl0egKxJh1rVOTe1oqiKcdUl09RWhem4xOTkcFDViqJkm58UIKC40EXqaOBuzXMU0XDgTiGXiJ8u5Sc8UGzxuiTUuQf71gE-cMexoPRUj5sjqA0U_5TBEWnMdbp4k04m8Iubtugwc7O8UdIgxrm7TO_WIgNNW4WBDzZZiLwJEh8pTEBGm1O9D-n1y0ibLrJzQGrlSPnQxWgfEdEUaYvMuV_JdEAbyzYJIBAkb3CJ4Gf_j6oFY_BGdu6d0lMupsDRxj80heirdclsGN_mT7rfPGIJp8PvkzOG0EXf1JER-mfIY05CH_LBAvYRDG06z-HkFze2bFR9b3WUkmPy6Pt2UbDuB3b52f4lYhmhzADmhrKehns7zPpy7HBho0r0HQ88=w640-h424-no?authuser=1" style="width:100%"> <img src="https://lh3.googleusercontent.com/L-PChygj3SAtYZlfb9j2j8yZDHKtreFYBNtNY04mcoBWWTjCfMiS3WVwp87hKSJWyfm2jB7O5TRMUMWVkCWeLKtXfq5S8nSwR9czdyBuFIp_NYIMHpVtmerTfefO4ScGJ4Ue657WM7qmkwcaaIbH4zFUHHcmqQpKlhphfSideGDBRMnwDrKl9adz4qTJWWA2uvki7P7qXUXyi2ibDKCgkrRv0tz5Ke1if6p_SITXjP9FffGSQxoeZ2wtXsiibYKTWmM9btLn1ku8b9a-7_BWxz3SJ2QJ3rLkcmwLFvy0t4X75uNt1aiCKeqVl-FDjJ0KZ8XUD18IanNo-Jq-Wr0D2RVzKzEDF_RUwYQwx7EhQyjGcoMjB1tUR_1yoVsODKedCFTcF77SFRI5fyi3s-D-L2jfc96wAq5ixPwSVpI6lm1hgSdtiyieDgk04ro_3HqsEuYtevOBszDfu1rhJdmGDHfnK4HjJ5eCAu_w2yDsFDmRuH_DA3_Nv1DvVr6AEPL0XcjXAIx0KKvjHHkiAEV40Sm9kzLvUHnffP4JM52rlBFxmyZ1zwaRnPD9l6UVCN3HAsRt7cUnsfAHHMbJjg8c-T1H8yB5FO5xsZ1lMqtm2E518lcGIvbDd7CNXs0xENN4Yr1vHz8E0HZZEXfiuAxHqRAxy42AtnQXhVr9fUNFsVOhEE7NMKpSzlgtNJ9q-9m7PRDIv5L_lR6M-TGQQfQh8wE=w640-h427-no?authuser=1" style="width:100%"> </div> </div> </body> </html>
Kết quả:
Tạo website responsive
Sử dụng flexbox để tạo trang web đáp ứng, chứa thanh điều hướng linh hoạt và nội dung linh hoạt, lưu ý là bạn cần thay đổi độ rộng trình duyệt để thấy hiệu ứng:
<!DOCTYPE html> <html> <head> <title>Responsive Website</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } /* Style cho body */ body { font-family: Arial; margin: 0; } /* Header/logo Title */ .header { padding: 60px; text-align: center; background: #1abc9c; color: white; } /* Style cho menu top */ .navbar { display: flex; background-color: #333; } /* Style cho menu trái */ .navbar a { color: white; padding: 14px 20px; text-decoration: none; text-align: center; } /* Đổi màu khi chạm chuột vào link */ .navbar a:hover { background-color: #ddd; color: black; } /* Màu cho container */ .row { display: flex; flex-wrap: wrap; } /* Tạo 2 cột đặt cạnh nhau */ /* Sidebar/left column */ .side { flex: 30%; background-color: #f1f1f1; padding: 20px; } /* Main column */ .main { flex: 70%; background-color: white; padding: 20px; } /* Tạo ảnh nền giả */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Footer */ .footer { padding: 20px; text-align: center; background: #ddd; } /* Khi màn hình có độ rộng <=700px thì layout chuyển thành dạng 1 cột */ @media (max-width: 700px) { .row, .navbar { flex-direction: column; } } </style> </head> <body> <!-- Note --> <div style="background:yellow;padding:5px"> <h4 style="text-align:center">Thay đổi độ rộng trình duyệt để thấy hiệu ứng.</h4> </div> <!-- Header --> <div class="header"> <h1>V1Study demo</h1> <p>với layout responsive sử dụng<b> kỹ thuật flex.</b></p> </div> <!-- Navigation Bar --> <div class="navbar"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <!-- Nội dung page --> <div class="row"> <div class="side"> <h2>About Me</h2> <h5>Photo of me:</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Đưa một số ảnh vào đây...</p> <h3>More Text</h3> <p>Lorem ipsum dolor sit ame.</p> <div class="fakeimg" style="height:60px;">Image</div><br> <div class="fakeimg" style="height:60px;">Image</div><br> <div class="fakeimg" style="height:60px;">Image</div> </div> <div class="main"> <h2>TITLE HEADING</h2> <h5>Title description, Mar 02, 2021</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p> <br> <h2>TITLE HEADING</h2> <h5>Title description, Feb 28, 2021</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p> </div> </div> <!-- Footer --> <div class="footer"> <h2>Footer</h2> </div> </body> </html>
Kết quả:
Giải phóng thời gian, khai phóng năng lực