Bố cục Flexbox cho phép bạn dễ dàng định dạng HTML. Flexbox giúp đơn giản để sắp xếp các item theo chiều dọc và chiều ngang bằng cách sử dụng các hàng và cột. Các item sẽ “flex” đến các kích cỡ khác nhau để lấp đầy không gian. Nó làm cho thiết kế đáp ứng dễ dàng hơn.
Flexbox là tuyệt vời để sử dụng cho bố cục chung của trang web hoặc ứng dụng. Nó dễ học, được hỗ trợ trong tất cả các trình duyệt hiện đại và không mất nhiều thời gian để tìm ra những điều cơ bản.
Tất cả các thuộc tính CSS Flexbox
Dưới đây là danh sách tất cả các thuộc tính flexbox có thể được sử dụng để định vị các thành phần trong cấu trúc trang.
CSS có thể được áp dụng cho container
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.
display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: <'flex-direction> || <'flex-wrap'> justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;
CSS có thể được áp dụng cho item
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ó
order: <integer>; flex-grow: <number>; /* default 0 */ flex-shrink: <number>; /* default 1 */ flex-basis: <length> | auto; /* default auto */ flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ] align-self: auto | flex-start | flex-end | center | baseline | stretch;
Thuật ngữ
Dưới đây là các định nghĩa về các thuật ngữ flexbox chính, được lấy từ thông số kỹ thuật chính thức của W3C cho flexbox.
- main axis – là trục chính của một Flex container nó sẽ điều khiển hướng của các flex items sẽ hiển thị. Như hình minh họa ở trên ta thấy main axis là trục ngang các flex items lúc này sẽ hiển thị theo hàng ngang. Nhưng nó không nhất thiết là phải nằm ngang nó sẽ phụ thuộc vào thuộc tính
flex-directionđược set. - main-start | main-end – điểm bắt đầu trong flex container được gọi là
main-startvà điểm kết thúc được gọi làmain-end. Như vậy các flex items sẽ được hiển thị từmain-startđếnmain-end. - main size – chiều rộng hoặc chiều cao của mỗi flex item.
- cross axis – trục vuông góc với trục chính
main axisđược gọi làcross axis, hướng của nó phụ thuộc vào trục chính. - cross-start | cross-end – điểm bắt đầu
cross-startvà điểm kết thúccross-endcác items sẽ hiển thị theo hướng của trụccross axis. - cross size – chiều rộng hoặc chiều cao của mỗi flex item tính theo hướng của trục
cross axis.
Hiển thị Flex
Khi dùng định dạng blog thì item trong mỗi container chiếm hết độ rộng của nó.
Để sử dụng flexbox trên một phần của trang của bạn, trước tiên hãy chuyển đổi container các item qua định dạng flex display: flex;
Điều này sẽ khởi tạo container này như một container flex và áp dụng một số thuộc tính flex mặc định.
Flex Direction
flex-direction: row| column | row-reverse | column-reverse
row: Chuyển trục main axis thành chiều ngang, nghĩa là hiển thị theo hàng.colum: Chuyển trục main axis thành chiều dọc, nghĩa là hiển thị theo cột.row-reverse: Hiển thị theo hàng nhưng đảo ngược vị trí các item.column-reverse: Hiển thị theo cột nhưng đảo ngược vị trí các item.
flex-direction cho phép bạn kiểm soát cách các mục trong màn hình hiển thị. Bạn có muốn chúng từ trái sang phải, phải sang trái, từ trên xuống dưới hoặc từ dưới lên trên không? Bạn có thể thực hiện tất cả những điều này một cách dễ dàng bằng cách đặt thuộc tính direction trong container
Sắp xếp mặc định sau khi áp dụng display: flex dành cho các mục được sắp xếp dọc theo trục chính từ trái sang phải.
Bạn có thể chọnflex-direction row-reverse hoặccolumn-reverse.
Justify Content
Mặc định các item bên trong sẽ rải đều bắt đầu từ main start đến main end, tuy nhiên nếu container vẫn còn khoảng trống thì có thể dùng thuộc tính justify-content để điều chỉnh lại vị trí bắt đầu của nó
justify-content flex-start | flex-end | center | space-between | space-around.
Tùy chọn khác nhau, hiển thị khác nhau
- flex-start – các flex items được sắp xếp linh hoạt bên trái của flex container.
- flex-end – các flex items được sắp xếp linh hoạt bên phải của flex container.
- center – các flex items được sắp xếp linh hoạt ở giữa của flex container.
- space-between – các flex items được phân bố đều trong flex container, item đầu tiên nằm bên trái và item cuối cùng nằm bên phải.
- space-around – các flex items được phân bố đều không gian xung quanh kể cả item đầu tiên và item cuối cùng.
Flex Align Items
align-items Các flex items được xắp sếp theo trục cross axis có nghĩa là trục chéo vuông góc với chục trính main axis. Các bạn hay xem hình bên dưới để hiểu dõ hơn nhé.
align-items: flex-start | flex-end | center | baseline | stretch
stretch để làm việc như bạn mong đợi, chiều cao của các yếu tố phải được đặt thành tự động thay vì chiều cao cụ thể.
Nếu bạn dùng cả hai thuộc tính justify-content vàalign-items . Nó sẽ hiển thị khác nhau giữa main axis và cross axis
Align Self
Thuộc tính này giúp xắp xếp hiển thị item theo giá trị mà nó được nhận, thuộc tính này sẽ ghi đè nếu các bạn dùng thuộc tính align-items ở thành phần bao ngoài flex container
Source: Scott Dom
Flex Wrap
Flexbox theo mặc định sẽ cố gắng khớp tất cả các yếu tố thành một hàng. Tuy nhiên, bạn có thể thay đổi điều này với thuộc tính flex-wrap. Có ba giá trị bạn có thể sử dụng để xác định khi các phần tử chuyển sang hàng khác.
flex-wrap: nowrap Điều này sẽ khiến mọi thứ ở trong một hàng từ trái sang phải.
flex-wrap: wrap cho phép các mục bật lên hàng tiếp theo nếu không có đủ chỗ trên hàng đầu tiên. Các mục sẽ được hiển thị từ trái sang phải.
flex-wrap: wrap-reverse cho phép các mục bật sang hàng tiếp theo nhưng lần này các mục được hiển thị từ phải sang trái.
Flex Flow
flex-flow kết hợp việc sử dụng flex-wrap và flex-direction vào một thuộc tính.
Align Content
Được sử dụng để sắp xếp các mục với nhiều dòng. Nó là để căn chỉnh trên trục chéo và sẽ không có hiệu lực đối với nội dung là một dòng.
Dưới đây là các tùy chọn:
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Căn giữa theo chiều dọc với Flexbox
Nếu bạn muốn căn giữa tất cả các nội dung bên trong một phần tử cha theo chiều dọc:
.parent {
display: flex;
align-items: center;
}
Nguồn: freecodecamp
(5 lượt thả tim)
Loading...
