CSS3: Flex Responsive

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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: rowflex-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ả:

» Tiếp: Cách xoay ảnh khi chạm chuột vào dùng CSS3
« Trước: Flex Item
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!