Đối với lập trình web thì giao diện (UI) và trải nghiệm (UX) người dùng càng ngày càng được chú trọng và đòi hỏi nhiều hơn khi lượng người dùng sử dụng các thiết bị di động để truy cập vào trang càng ngày càng lớn. Thay vì CSS truyền thống mất rất nhiều thời gian và công sức Bootstrap ra đời cung cấp giải pháp responsive cho các trang web. Nếu như Boostrap 3 vẫn phải dùng tới Float để xử lý bố cục thì Boostrap 4 nay khác rồi. Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 là Bootstrap 4 hiện sử dụng flexbox, thay vì float, để xử lý bố cục một cách linh hoạt mà không cần sử dụng phao hoặc định vị. Trong bài viết này chúng ta sẽ học sử dụng Flex trong Bootstrap 4 các bạn nhé!
Flex trong Bootstrap 4
Sử dụng các lớp flex để kiểm soát bố cục của các thành phần Bootstrap 4.
Để tạo một vùng chứa flexbox và chuyển đổi trực tiếp các phần tử con các phần tử Flex hãy sử dụng lớp d-flex:
Ví dụ
<div class="container mt-3"> <h2>Flex</h2> <div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> </div>
Để tạo một vùng chứa flexbox nội tuyến, hãy sử dụng lớp d-inline-flex:
<div class="container mt-3"> <h2>Flex nội tuyến</h2> <div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> </div>
Hướng ngang (Horizontal Direction)
Sử dụng .flex-row để hiển thị các phần tử Flex theo chiều ngang (cạnh nhau). Đây là mặc định.
Mẹo: Sử dụng .flex-row-reverse để căn phải theo hướng ngang:
Ví dụ :
<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div>
Hướng dọc (Vertical Direction)
Sử dụng .flex-column để hiển thị các phần tử flex theo chiều dọc (chồng lên nhau) hoặc .flex-column-reverse để đảo ngược hướng dọc:
<div class="d-flex flex-column"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div>
Căn đều nội dung
Sử dụng các lớp .justify-content- * để thay đổi căn chỉnh của các phần tử flex. Các lớp hợp lệ là start (mặc định), end, center, between hoặc around:
<div class="container mt-3"> <div class="d-flex justify-content-start bg-secondary mb-3"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> <div class="d-flex justify-content-end bg-secondary mb-3"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> <div class="d-flex justify-content-center bg-secondary mb-3"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> <div class="d-flex justify-content-between bg-secondary mb-3"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> <div class="d-flex justify-content-around bg-secondary mb-3"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> </div>
Flex rộng bằng nhau
Sử dụng .flex-fill trên các phần tử flex để buộc chúng thành các phần tử có chiều rộng bằng nhau:
<div class="d-flex"> <div class="p-2 bg-info flex-fill">Phần tử Flex 1</div> <div class="p-2 bg-warning flex-fill">Phần tử Flex 2</div> <div class="p-2 bg-primary flex-fill">Phần tử Flex 3</div> </div>
Grow
Sử dụng .flex-grow-1 trên một phần tử flex để chiếm phần còn lại của không gian. Trong ví dụ dưới đây, hai phần tử flex đầu tiên chiếm không gian cần thiết của chúng, trong khi mục cuối cùng chiếm phần còn lại của không gian khả dụng:
<div class="d-flex"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary flex-grow-1">Phần tử Flex 3</div> </div>
Mẹo: Sử dụng .flex-shrink-1 trên một phần tử flex để làm cho nó co lại nếu cần.
Order flex
Thay đổi thứ tự trực quan của (các) phần tử flex cụ thể bằng các lớp .order. Các lớp hợp lệ là từ 0 đến 12, trong đó số thấp nhất có mức ưu tiên cao nhất (thứ tự-1 được hiển thị trước thứ tự-2, v.v.):
<div class="p-2 bg-info order-3">Phần tử Flex 1</div> <div class="p-2 bg-warning order-2">Phần tử Flex 2</div> <div class="p-2 bg-primary order-1">Phần tử Flex 3</div>
Lề tự động (Auto Margins)
Dễ dàng thêm lề tự động cho các phần tử flex bằng lớp .mr-auto (đẩy các mục sang phải) hoặc bằng cách sử dụng lớp .ml-auto (đẩy các mục sang trái):
<div class="d-flex bg-secondary"> <div class="p-2 mr-auto bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 bg-primary">Phần tử Flex 3</div> </div> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">Phần tử Flex 1</div> <div class="p-2 bg-warning">Phần tử Flex 2</div> <div class="p-2 ml-auto bg-primary">Phần tử Flex 3</div> </div>
Wrap
Chúng ta có thể kiểm soát các phần tử Flex bằng cách bọc chúng trong một thùng chứa flex. Sử dụng .flex-nowrap (mặc định), .flex-wrap hoặc .flex-wrap-reverse.
Nhấp vào các nút bên dưới để xem sự khác biệt giữa ba lớp, bằng cách thay đổi cách gói các phần tử flex trong hộp ví dụ:
<div class="container mt-3"> <h2>Wrap</h2> <p>Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.</p> <p><code>.flex-wrap:</code></p> <div class="d-flex flex-wrap bg-light"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> </div> <br> <p><code>.flex-wrap-reverse:</code></p> <div class="d-flex flex-wrap-reverse bg-light"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> </div> <br> <p><code>.flex-nowrap:</code></p> <div class="d-flex flex-nowrap bg-light"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> <div class="p-2 border">Phần tử Flex 26</div> <div class="p-2 border">Phần tử Flex 27</div> <div class="p-2 border">Phần tử Flex 28</div> <div class="p-2 border">Phần tử Flex 29</div> <div class="p-2 border">Phần tử Flex 30</div> <div class="p-2 border">Phần tử Flex 31</div> <div class="p-2 border">Phần tử Flex 32</div> <div class="p-2 border">Phần tử Flex 33</div> <div class="p-2 border">Phần tử Flex 34</div> <div class="p-2 border">Phần tử Flex 35</div> </div> <br> </div>
Căn chỉnh nội dung (Align Content)
Kiểm soát việc căn chỉnh theo chiều dọc của các phần tử flex đã tập hợp bằng các lớp .align-content-*. Các lớp hợp lệ là .align-content-start (mặc định), .align-content-end, .align-content-center, .align-content-between, .align-content-around và .align-content-stretch.
Lưu ý: Các lớp này không có tác dụng đối với các dòng đơn chứa phần tử flex.
<div class="container mt-3"> <p>.align-content-start (default):</p> <div class="d-flex flex-wrap align-content-start bg-light" style="height:300px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> </div> <br> <p>.align-content-end:</p> <div class="d-flex flex-wrap align-content-end bg-light" style="height:300px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> </div> <br> <p>.align-content-center:</p> <div class="d-flex flex-wrap align-content-center bg-light" style="height:300px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> </div> <br> <p>.align-content-around:</p> <div class="d-flex flex-wrap align-content-around bg-light" style="height:300px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> </div> <br> <p>.align-content-stretch:</p> <div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> <div class="p-2 border">Phần tử Flex 4</div> <div class="p-2 border">Phần tử Flex 5</div> <div class="p-2 border">Phần tử Flex 6</div> <div class="p-2 border">Phần tử Flex 7</div> <div class="p-2 border">Phần tử Flex 8</div> <div class="p-2 border">Phần tử Flex 9</div> <div class="p-2 border">Phần tử Flex 10</div> <div class="p-2 border">Phần tử Flex 11</div> <div class="p-2 border">Phần tử Flex 12</div> <div class="p-2 border">Phần tử Flex 13 </div> <div class="p-2 border">Phần tử Flex 14</div> <div class="p-2 border">Phần tử Flex 15</div> <div class="p-2 border">Phần tử Flex 16</div> <div class="p-2 border">Phần tử Flex 17</div> <div class="p-2 border">Phần tử Flex 18</div> <div class="p-2 border">Phần tử Flex 19</div> <div class="p-2 border">Phần tử Flex 20</div> <div class="p-2 border">Phần tử Flex 21</div> <div class="p-2 border">Phần tử Flex 22</div> <div class="p-2 border">Phần tử Flex 23</div> <div class="p-2 border">Phần tử Flex 24</div> <div class="p-2 border">Phần tử Flex 25</div> </div> <br> </div>
Căn chỉnh các phần tử
Kiểm soát việc căn chỉnh theo chiều dọc của các dòng đơn lẻ chứa các phần tử flex với các lớp .align-items-*. Các lớp hợp lệ là .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, và .align-items-stretch (mặc định).
<div class="container mt-3"> <p>.align-items-start:</p> <div class="d-flex align-items-start bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-items-end:</p> <div class="d-flex align-items-end bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-items-center:</p> <div class="d-flex align-items-center bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-items-baseline:</p> <div class="d-flex align-items-baseline bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-items-stretch (default):</p> <div class="d-flex align-items-stretch bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> </div>
Align Self
Kiểm soát căn chỉnh theo chiều dọc của một phần tử flex cụ thể bằng các lớp .align-self-*. Các lớp hợp lệ là .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, và .align-self-stretch (mặc định).
<div class="container mt-3"> <h2>Align Self</h2> <p>.align-self-start:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border align-self-start">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-self-end:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border align-self-end">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-self-center:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border align-self-center">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-self-baseline:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border align-self-baseline">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> <p>.align-self-stretch (default):</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Phần tử Flex 1</div> <div class="p-2 border align-self-stretch">Phần tử Flex 2</div> <div class="p-2 border">Phần tử Flex 3</div> </div> <br> </div>
Các lớp Flex đáp ứng
Tất cả các lớp flex đi kèm với các lớp đáp ứng bổ sung, giúp dễ dàng đặt một lớp flex cụ thể trên một kích thước màn hình cụ thể.
Biểu tượng * có thể được thay thế bằng sm, md, lg hoặc xl, đại diện cho màn hình nhỏ, trung bình, lớn hoặc phóng to.
