Dàn trang với CSS Flexbox

  • Xin chào Guest
    Rất vui khi được gặp bạn ở đây, hiện tại bọn mình đang cần tuyển dụng cho vị trí Team Resources với mong muốn phát triển kho tài nguyên đầy đủ nhất dành cho người dùng, xin mời Guest nhấn vào đây để tìm hiểu thêm.
t2snet-css-flexbox-cover.png

Trong thiết kế Layout cho website, khi muốn dàn trang hay chia cột cho các phần tử trên website, chúng ta thường dùng các kỹ thuật như float và áp dụng kỹ thuật clear float hoặc sử dụng các CSS Grid Framework để tiết kiệm thời gian.
Nhưng nếu áp dụng kỹ thuật float và clear float thì sẽ tổn rất nhiều thời gian và khả năng linh hoạt sẽ không cao, còn nếu sử dụng CSS Grid Framework thì chúng ta có thể sẽ bị thừa những đoạn CSS mà chúng ta không dùng đến.
Và kể từ phiên bản CSS3, chúng ta có thêm 1 kỹ thuật dàn trang vô cùng linh hoạt trong CSS đó là Flexbox, trong chủ đề lần này, chúng ta sẽ cùng nhau tim hiểu tất tần tật về kỹ thuật dàn trang với CSS Flexbox nhé.

Flexbox là gì?
Flexbox Layout (hay Flexible Box) (Được đề xuất lần đầu bởi W3C vào tháng 10 năm 2017) nhằm mục đích cung cấp một cách hiệu quả hơn để bố trí, căn chỉnh và phân phối không gian giữa các mục trong một vùng, ngay cả khi kích thước của chúng không xác định hoặc có nhiều kích thước.
Ý tưởng chính đằng sau bố cục Flexbox là cung cấp cho vùng chứa khả năng thay đổi chiều rộng/chiều cao (và thứ tự) của các phần tử bên trong để lấp đầy không gian có sẵn một cách tốt nhất (chủ yếu là để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình). Bố cục Flexbox mở rộng các mục để lấp đầy không gian trống có sẵn hoặc thu nhỏ chúngđể ngăn các phần tử bên trong tràn ra ngoài (vở khung)

Theo lời khuyên từ Mozilla thì chúng ta sử dụng Flexbox để thiết lập bố cục trong phạm vi nhỏ (ví dụ như những khung trong website) và khi thiết lập bố cục ở phạm vi lớn hơn (như chia cột website) thì vẫn nên sử dụng kiểu thông thường là dàn trang theo dạng lưới (grid layout).

Thuật ngữ các thành phần trong Flexbox
Trước khi đi vào tìm hiểu sâu hơn về Flexbox, chúng ta cần nắm qua cấu trúc của Flexbox là như thế nào và một số thuật ngữ liên quan.
Dưới đây là sơ đồ cấu trúc Flexbox từ Mozilla Developer Network.
t2snet-css-flexbox-terms.jpeg

Hai thành phần quan trọng nhất trong một bố cục Flexbox là gồm container và item:
  • container: là thành phần lớn bao quanh các phần tử bên trong, bạn sẽ thiết lập kiểu hiển thị inline (sắp xếp theo chiều ngang) hoặc kiểu sắp xếp theo chiều dọc. Khi đó, các item bên trong sẽ hiển thị dựa trên thiết lập của container này.
  • item: Các phần tử con của container được gọi là item, ở item bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một container, hoặc thiết lập thứ tự hiển thị của nó.
Ngoài hai thành phần chính đó, chúng ta có thể thấy hình trên sẽ có:
  • main start, main end: Khi thiết lập flexbox, điểm bắt đầu của container gọi là main start và điểm kết thúc được gọi là main end. Điều này có nghĩa, các item bên trong sẽ heienr thị từ main start đến main end (hoặc là được phép hiển thị đến main end). Và chiều vuông góc của nó là cross start, cross end cũng có ý nghĩa tương tự nhưng luôn vuông góc với main start, main end.
  • main axis: Trục này là trục chính để điều khiển hướng mà các item sẽ hiển thị. Như bạn thấy ở trên hình main axis là trục dọc nên các item sẽ hiển thị theo chiều dọc, tuy nhiên ta có thể sử dụng thuộc tính flex-direction để thay đổi trục của main axis và lúc đó các item sẽ hiển thị theo nó. Và cross axis luôn là trục vuông góc của main axis.
  • main size: Bạn có thể hiểu đơn giản là kích thước (chiều rộng hoặc dọc) của mỗi item dựa theo trục main axis.
  • cross size: Là kích thước (chiều rộng hoặc dọc) của mỗi item dựa theo trục cross axis.
Bắt đầu với Flexbox
Trước tiên chúng ta bắt đầu với một cấu trúc HTML đơn giản như sau:
HTML:
<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>
Và một đoạn CSS đơn giản để thiết lập màu sắc các phần tử cho dể nhìn
CSS:
.container {
    background: red;
    max-width: 960px;
    max-height: 1000px;
    margin: 0 auto;
    padding: 5px;
}
.item {
    background: blue;
    margin: 5px;
    color: white;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
Áp dụng HTML và CSS trên chúng ta sẽ có một bố cục như sau:
Bây giờ chúng ta sẽ áp dụng đưa Layout bên trên về hiển thị dưới dạng Flexbox bằng cách đặt css display: flex; vào .container và xem kết quả nhé.
CSS:
.container {
  display: flex;
}
Kết quả là chúng ta đã có một bố cục được dàn trang sơ khai rồi, quá đơn giản!
 
Last edited:
Top Bottom