Sơ lược về CSS Flex-box

Trước Flex-box layout module thì chúng ta có các kiểu layout như: Block dành cho các phần, đoạn trong một trang web, inline dành cho phần text,… Nếu trước kia chúng ta muốn tạo được một trang web với layout cơ bản như là có phần branding, rồi thanh menu, tiếp đến là phần content cuối cùng là phần footer thì chúng ta cần phải làm rất nhiều thứ: nào là float qua trái qua phải hay chỉnh position,bla bla bla,… thì giờ với flex-box chúng ta sẽ dễ dàng làm hơn không cần phải cực khổ như trước nữa (tuy nhiên vẫn cần tí nổ lực ).

Đây là các phiên bản browser khác nhau hổ trợ cho flex-box: (tham khảo để khỏi hoảng hốt khi code mình lại sai trên máy người ta chỉ vì do người ta xài phiên bản cũ không hỗ trợ ) alt text

Để bắt đầu sử dụng flex-box thì chúng ta cần phải xây dựng được cấu trúc của nó, dưới đây là ví dụ:

.flex-container{
	display:flex;
    background-color:#1abc9c;
}
.child{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 20px;
}

Phần code ở trên là một ví dụ về một cấu trúc khi ta dùng flex-box (để dễ hình dung) , nó sẽ chia ra làm 2 phần đó là parent (class flex-container) và items (class child) với phần parent chúng ta cần phải có display:flex để thể hiện là chúng ta đang sử dụng flex-box layout module. Và tiếp theo là phần items sẽ được viết bên trong parent để tạo ra các ô tùy ý. Ví dụ ta có một đoạn code html tiếp nối theo đoạn CSS ví dụ ở trên:

<div class="flex-container">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
</div>

Thì đây là kết quả: alt text Quá dễ dàng để tạo ra layout mà không cần phải float hay gì gì cả. Ở hình trên với phần parent chúng ta sẽ thấy đó là phần có background màu xanh đã được ta đặt ở trên cùng với display:flexđể các items bên trong hiển thị thành từng ô riêng.

Nói nãy giờ thì ta dễ dàng thấy cấu trúc của chúng ta sẽ xoay quay 2 thằng đó là parent và items, chính vì vậy nên chúng ta sẽ đi đến với các property dành riêng cho từng thằng và dùng các property đó để tạo nên một layout website dễ dàng hơn. Trong phần này chúng ta sẽ nói đến các property của phần parent

Các property parent

flex-direction

flex-direction property dùng để thiết lập trục chính của parent (ngang hay dọc) và đặt các items bên trong nằm theo chính hướng đó . flex-direction có 4 giá trị đó là:

Hình minh họa cho 4 giá trị của flex-direction alt text

flex-wrap

Để hiểu về flex-wrap, chúng ta hãy xem ví dụ dưới đây: (thu nhỏ browser lại để thấy sự khác biệt giữa hai ví dụ) Ví dụ 1: có sử dụng flex-wrap:wrap

flex-wrap example Ví dụ 2: sử dụng `flex-wrap:nowrap` hay đó chính là default

flex-wrap example2

Sau khi xem 2 ví dụ ở trên chúng ta đã có thể hiểu được công dụng của flex-wrap là như thế nào. Khi sử dụng flex-wrap chúng ta sẽ quyết định xem các items bên trong parent là sẽ nằm ở trên 1 đường thằng hay là nhiều đường thẳng, nếu là nằm trên nhiều đường thằng thì nó sẽ hình thành nên một trục chéo để xác định khi ta resize lại browser (nhỏ hơn) thì các items sẽ nằm chồng lên nhau như thế nào. flex-wrap có 3 giá trị đó là:

flex-flow

Property này đơn giản là viết tăc, gom cả flex-direction và flex-wrap lại với nhau. Nếu bình thường ta viết như thế này:

.flex-container{
	display:flex;
    flex-direction:row;
  	flex-wrap:wrap;
}

Thì dùng flex-flow để viết tắc lại sẽ ngắn hơn:

.flex-container{
    display:flex;
    flex-flow:row wrap;
}

Nếu ta bỏ trống cái nào thì cái đó coi như sẽ ở giá trị default.

justify-content

justify-content property dùng để căn chỉnh các items bên trong parent theo chiều trục chính của nó (trục chúng ta đã đặc ở flex-direction là ngang hoặc dọc). justify-content có các giá trị như sau:

Đây là hình tổng quát, minh họa cho các giá trị ở trên: alt text (Nguồn từ CSS-tricks)

align-items

với align-items chúng ta có thể hình dung nó giống như justify-content nhưng là phiên bảng dành cho trục chéo (nghĩa là hướng vuông góc với trục chính, nếu trục chính là ngang thì nó sẽ căn chỉnh theo hướng dọc ). align-items có các giá trị sau:

Hình minh họa cho các giá trị ở trên: alt text (Nguồn CSS-tricks)

align-content

align-content có các giá trị như sau: center, flex-start, flex-end, space-around, space-between và stretch. Để dễ hiểu về phần này, dưới đây là ta có một hình ảnh ví dụ: alt text

Link tham khảo