Flex css hay còn có tên gọi đầy đủ là CSS flexbox ra đời là để khắc phục tình trạng khi dàn trang phải ngồi căn chỉnh từng thành phần một. Tuy nhiên đây là khái niệm khá mới và lạ lẫm với nhiều người. Trong bài viết này chúng tôi sẽ cung cấp cho bạn những thông tin cơ bản dễ hiểu nhất về flex css.
Khái niệm cơ bản về flex css
Flex css là gì?
Flex css là một kiểu dàn trang mà khi sử dụng nó sẽ tự cân đối kích thước của các thành phần để hiển thị trong mọi thiết bị. Điều đó có nghĩa là bạn không cần ngồi căn chỉnh kích thước phần tử, không cần ngồi float chỉ cần thiết lập nó theo chiều ngang dọc là lúc đó các phần tử bên trong sẽ tự hiển thị theo mong muốn.
Nguyên lý hoạt động của flex css dựa trên hình ảnh 1 chiếc hộp chứa nhiều thành phần nhỏ bên trong do đó việc căn chỉnh sẽ dễ dàng hơn nhiều.Hiện nay, flex css thường được sử dụng để thiết lập bố cục phạm vi nhỏ còn các bố cục có phạm vi rộng thì thường được sử dụng kiểu dàn trang thông thường.
Cấu trúc của flex css
Trong flex css có hai thành phần chính quan trọng là container và item:
- Container
là phần tử lớn bao quanh toàn bộ các phần tử con, container sẽ thiết lập cách sắp xếp theo chiều dọc hoặc chiều ngang, các phần tử con bên trong sẽ hiển thị theo thiếp lập đó.
- Item
là các phần tử con, bạn có thể thiết lập số cột cũng như thứ tự hiển thị của các item.
Ngoài ra còn có các thành phần khác như :
- Main start, main end, cross start, cross end
: Điểm bắt đầu và kết thúc của container theo main axis được. gọi lần lượt là main start, main end ; đối với cross axis cũng tương tự là cross start, cross end.
- Man axis
hướng của item hiển thị được mặc định chạy từ trái qua phải.
- Cross axis
Trục vuông góc với main axis, chạy theo chiều trên xuống dưới.
- Cross size
là kích thước của item dựa theo trục cross axis.
- Main size
là kích thước của item dựa theo trục main axis.
Trình duyệt hỗ trợ flex css
Các thuộc tính của flex css hiện tại hầu như được hỗ trợ bởi tất cả các phần mềm trình duyệt hiện đại như :Chrome, Firefox, Internet Explorer, Opera, Safari.
Các thuộc tính của flex css
Tuy nhiên để sử dụng flex css một cách tốt nhất cần phải hiểu thuộc tính của nó, các thuộc tính này sẽ xác định được chiều của các phần tử.
Flex- direction
Thuộc tính flex- direction quy định cách trình bày chính với các mục linh hoạt trong khung hình theo một trục chính. Các hướng được trình bày theo hàng ngang hoặc hàng dọc.
Flex- direction có thể có 4 giá trị:
-
row : trục chạy từ trái sang phải.
-
row-reverse: trục chạy từ phải sang trái.
-
column: trục chính chạy từ trên xuống dưới.
-
column-reverse: trục chính chạy từ dưới lên trên.
Flex- grow
Thuộc tính này sẽ điều chỉnh cho các phần tử co giãn theo độ rộng của container. Các giá trị của các phần tử sẽ tăng kích thước sao cho lấp đầy các khoảng trống của container .Giá trị mặc định của chúng là 0.
Flex-flow
Thuộc tình này là một dạng viết tắt cho hai thuộc tính là flex-direction ( giá trị đầu tiên) và flex-wrap ( giá trị thứ 2 )
Flex-wrap
Flex-wrap dùng để điều chỉnh việc bọc các item nằm trong container. Thuộc tình này giải quyết vấn đề là khi chúng ta tăng chiều rộng của trình duyệt thì có thể một số item sẽ bị nhảy khỏi hàng.
Nowrap : không có thay đổi
Wrap : các item sẽ bọc trọn trong container
Đảo ngược
Justify-content
Justified – content có khả năng căn chỉnh vị trí của các item với trục main axis. Với thuộc tính này có 6 giá trị có thể dùng là :
flex-start: là giá trị mặc định, sẽ đặt item ở vị trí bắt đầu là main start.
flex-end: đặt item tại vị trí main end.
center : đặt item tại giữa main axis.
space-between: phân đều khoảng cách giữa các item.
space-around : phân chia khoảng cách ở đầu và cuối, khoảng cách đầu sẽ bằng một nửa khoảng cách cuối.
space-evenly : chia sẻ đều khoảng cách giữa item và item, item với main start và main end.
Align-item
Align-item là thuộc tính dùng để xác định chính xác các mà item được đặt trong container theo hướng của cross axis
Align-item : Stretch chiều dài item sẽ bằng chiều dài của cross axis
flex-start : item sẽ được đặt tại vị trí bắt đầu của cross start, kích thước không thay đổi
flex-end: item đặt ở điểm bắt đầu của cross end
center: item được đặt ở giữa điểm bắt đầu của cross start và điểm bắt đầu của cross end
Flex-basis
Thuộc tính này đơn giản nhất khi gán cho item một kích thước nhất định, với cách này bạn có thể sử dụng giá trị tuyệt đối hoặc tương đối căn chính theo kích thước của container.
Flex css là một kỹ thuật dàn trang nổi bật với những tính năng hữu ích có khả năng thay thế cho nhiều phương thức dàn trang thông thường.
Tự điều chỉnh kích thước của item
Flex css có ưu điểm là tự điều chỉnh được kích thước của các thành phần. Nó có khả năng tự điều chỉnh kích thước của item theo hướng của main axis để item không vượt khỏi phạm vi container. Đây là tính năng mặc định không cần thực hiện việc thiết lập giúp item tự căn chỉnh chiều rộng.
Tổng kết ưu điểm sử dụng của flex css
-
flex css cho phép 1 khung chứa nhiều đối tượng thành phần.
-
flex css cho phép căn chỉnh thành phần dễ dàng , người dùng có thể căn chỉnh theo trục chính, trục phụ và cho từng riêng thành phần.
-
flex css cho phép chúng ta dàn nhiều dòng điều này có nghĩa là bạn được hiển thị thành phần ở dòng khác nếu không đủ dòng hiển thị.
-
flex css giup chúng ta không cần thay đổi mã HTML nhưng vẫn có thể chỉnh sửa thứ tự các thành phần
-
flex css hỗ trợ khả năng tăng giảm kích thước đối tượng mà bạn muốn hiển thị.
Hy vọng với những thông tin cung cấp trong bài viết bạn có thể hiểu thêm về flex css cũng nhưng những thuộc tính và cách sử dụng của nó.Mong rằng bạn có thể áp dụng flex css một cách hiệu quả nhất. Chúc bạn thành công !
Các tìm kiếm liên quan đến chủ đề “flex css”
Flex CSS Mozilla
Display: flex CSS
Flex-grow
Flexbox CSS Mozilla
Flex-basis
Flex-grow trong CSS
Display: flex trong CSS
Flex-shrink
Bài viết liên quan
Media CSS là gì? Giới thiệu 02 cách sử dụng Media CSS cơ bản
Responsive CSS là gì? 5 điều cần biết về Responsive CSS
Cursor CSS là gì? 2 Cách sử dụng thuộc tính Cursor CSS
Thuộc tính Float CSS là gì? Phân biệt Float và Clear trong CSS
