Cách sử dụng Flex để căn chỉnh các phần tử HTML

Các thuộc tính linh hoạt trong CSS cho phép bạn căn chỉnh các mục một cách linh hoạt và nhạy bén hơn. Điều này rất hữu ích khi bạn muốn các phần tử HTML của mình phản hồi nhanh hơn bên trong trình duyệt web.

Bài viết này sẽ trình bày về cách bạn có thể sử dụng một số thuộc tính flex nhất định. Điều này bao gồm các thuộc tính flex-direction, justify-content, align-self, align-items, align-content và gap.

Cách thiết lập CSS Flex Display

Một cấu trúc mẫu mà bạn có thể sử dụng để khám phá những điều cơ bản về flexbox là một tập hợp các div con bên dưới một div cha. Trong đoạn mã dưới đây, có một div “chính”. Ba div con đại diện cho các mục mà bạn có thể căn chỉnh bằng cách sử dụng thuộc tính flex.

<div class="parent">
<div class="child-item"></div>
<div class="child-item"></div>
<div class="child-item"></div>
</div>

Để bất kỳ kiểu uốn cong nào hoạt động, bạn sẽ cần thêm hiển thị: flex thuộc tính của vùng chứa linh hoạt chính.

.parent {
display: flex;
}

Không có flex, các div con hiển thị lần lượt theo hình cột xuống trang.

Để xem ví dụ về thiết lập này, hãy xem và chạy mã trong đoạn mã CodePen này.

Cách kiểm soát hướng bố cục

Các hướng uốn thuộc tính xác định hướng hàng hoặc cột của các mục con.

Các tùy chọn cho thuộc tính hướng uốn bao gồm:

flex-direction: row | column | row-reverse | column-reverse

Bạn sẽ cần thêm một vùng chứa chính xung quanh các mục bạn muốn căn chỉnh.

HTML:

<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>

CSS:

.red { background-color:red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: green;}
.blue { background-color: blue; }
.purple { background-color: purple; }
.parent div {
width: 40px;
height: 40px;
}

Áp dụng thuộc tính flex-direction cho vùng chứa flex chính. Điều này sẽ căn chỉnh các mục div con.

.parent {
width: 300px;
display: flex; 
flex-direction: row;
}

Nhiều thuộc tính flex đề cập đến khái niệm trục chính và trục chéo. Khi hướng uốn là hàng ngang, trục chính thể hiện hướng nằm ngang và trục chéo biểu thị phương thẳng đứng. Giá trị của cột sẽ chuyển các trục này.

Xem mã cho thuộc tính flex-direction trong đoạn mã CodePen này để xem một số ví dụ.

Cách sắp xếp các mục dọc theo trục chéo

Các căn chỉnh các mục thuộc tính kiểm soát việc căn chỉnh các mục dọc theo trục chéo. Đối với hướng uốn, hàng, căn chỉnh mặc định sẽ kiểm soát việc căn chỉnh theo chiều dọc của các mục.

Các tùy chọn cho thuộc tính align-items bao gồm:

align-items: flex-start | flex-end | align-items | stretch

Thêm thuộc tính align-items vào vùng chứa mẹ để căn chỉnh các thuộc tính con của nó.

.parent {
display: flex; 
align-items: flex-start;
}

Ngoài ra, bạn có thể chọn căn chỉnh các mục bằng cách sử dụng đường cơ sở. Theo mặc định, tùy chọn đường cơ sở căn chỉnh tất cả các mục dựa trên cơ sở của các mục.

Bạn cũng có thể chọn nơi bắt đầu của đường cơ sở, chẳng hạn như trên cùng (đường cơ sở đầu tiên) hoặc dưới cùng (đường cơ sở cuối cùng).

align-items: baseline | first baseline | last baseline;

Đối với các mục căn chỉnh: đường cơ sở để hoạt động, hãy đảm bảo rằng mỗi mục có chiều cao hoặc chiều rộng khác nhau (tùy thuộc vào trục bạn đang sử dụng).

<div class="parent">
<div class="red" style="height:20px"></div>
<div class="orange" style="height:60px"></div>
<div class="yellow" style="height:30px"></div>
<div class="green" style="height:90px"></div>
<div class="blue" style="height:30px"></div>
<div class="purple" style="height:50px"></div>
</div>

Ở

Xem mã cho thuộc tính align-items trong đoạn mã CodePen này để xem một số ví dụ.

Làm thế nào để ghi đè căn chỉnh trên các mặt hàng riêng lẻ

Bạn có thể dùng tự căn chỉnh để ghi đè bất kỳ kiểu căn chỉnh mục nào của vùng chứa chính. Điều này có nghĩa là bạn có thể đặt căn chỉnh linh hoạt riêng biệt trên một mục riêng lẻ.

Các tùy chọn cho thuộc tính align-self bao gồm:

align-self: auto | flex-start | flex-end | center | baseline | stretch

Ví dụ: giả sử rằng vùng chứa mẹ có kiểu định hướng linh hoạt được đặt thành “hàng”.

.parent {
display: flex; 
flex-direction: row;
}

Bạn có thể áp dụng thuộc tính align-self trên từng mục. Mục riêng lẻ sẽ sử dụng kiểu dáng của thuộc tính align-self và sẽ căn giữa mục trên vùng chứa chính.

<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green" style="align-self:center"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>

Xem mã cho thuộc tính align-self trong đoạn mã CodePen này để xem một số ví dụ.

Cách phân phối dòng qua trục chéo

Các căn chỉnh nội dung thuộc tính sắp xếp con dọc theo trục tung. Nó cũng có thể xác định khoảng cách giữa các mục nằm trên nhiều dòng.

Các tùy chọn cho thuộc tính align-content bao gồm:

align-content: flex-start | flex-end | center | stretch | space-between | space-around

Thêm thuộc tính align-content vào vùng chứa linh hoạt chính. Thuộc tính align-content sẽ chỉ hoạt động nếu thuộc tính flex-wrap được đặt. Thêm flex-wrap: wrap vào vùng chứa mẹ và giảm chiều rộng của div mẹ để buộc các mục nằm trên nhiều dòng.

.parent {
flex-wrap: wrap;
display: flex;
align-content: flex-start;
width: 180px;
}

Xem mã cho thuộc tính align-content trong đoạn mã CodePen này để xem một số ví dụ.

Cách căn chỉnh các mục trên trục chính

Các biện minh-nội dung thuộc tính thêm căn chỉnh phải, trái hoặc chính giữa cho các mục con. Nó cũng trải rộng các mục bằng cách thêm khoảng cách giữa chúng khi chứng minh nội dung.

Các tùy chọn cho thuộc tính justify-content bao gồm:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Bọc các mục bạn muốn căn chỉnh trong một vùng chứa linh hoạt chính.

HTML:

<div class="parent">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>

CSS:

.red { background-color: red; }
.green { background-color: lightgreen; }
.blue { background-color: blue; }

Thêm thuộc tính justify-content vào vùng chứa linh hoạt chính.

.parent {
width: 300px;
display: flex; 
justify-content: flex-start;
}

Thuộc tính justify-content cũng hỗ trợ các giá trị được liệt kê trong thông số kỹ thuật Căn chỉnh hộp CSS. Điều này bao gồm các giá trị như “bắt đầu”, “kết thúc”, “trái” và “phải”. Một số trình duyệt không hỗ trợ những điều này.

Thuộc tính justify-content cũng có từ khóa “an toàn” mà bạn có thể sử dụng. Điều này đảm bảo rằng các phần tử cố gắng ở trong phạm vi của vùng chứa mẹ.

Nó cũng được sử dụng để ngăn mất dữ liệu, trong trường hợp bạn căn giữa một từ dài. Sử dụng từ khóa an toàn ngăn một div ngắn hơn cắt bỏ các chữ cái đầu tiên và cuối cùng.

.parent {
display: flex; 
justify-content: safe center;
}

Từ khóa an toàn cũng được giới hạn cho một số trình duyệt nhất định. Bạn có thể kiểm tra tính tương thích tại mục Tôi có thể sử dụng.

Xem mã cho thuộc tính justify-content trong đoạn mã CodePen này để xem một số ví dụ.

Cách thêm khoảng cách giữa các mục

Các lỗ hổng thuộc tính cho phép bạn thêm một lượng không gian giữa các mục. Đó là một trong những tính năng CSS mới hơn có thể giúp bạn xây dựng một bố cục đáp ứng.

Áp dụng thuộc tính gap cho vùng chứa linh hoạt chính.

.parent {
display: flex;
gap: 70px;
}

Nếu bạn thêm một khoảng trống buộc chiều dài của các mục vượt quá chiều rộng của mục gốc, thì các mục đó sẽ thu hẹp lại để cố gắng vừa với bên trong hàng.

.parent { 
width: 300px;
gap: 120px;
}

Nếu bạn sử dụng flex-wrap: wrap để đẩy các mục sang một dòng mới, khoảng cách cũng sẽ áp dụng cho khoảng trống giữa các hàng.

.parent { 
width: 300px;
flex-wrap: wrap;
gap: 120px;
}

Ngoài ra, bạn cũng có thể đặt khoảng cách hàng và cột-khoảng cách tính chất. Một lần nữa, bạn sẽ cần áp dụng những điều này cho vùng chứa linh hoạt chính.

Thuộc tính row-gap xác định khoảng cách giữa mỗi hàng. Thuộc tính column-gap xác định khoảng cách giữa mỗi cột.

.parent { 
row-gap: 120px; 
}
.parent { 
column-gap: 120px; 
}

Xem mã cho thuộc tính khoảng trống trong đoạn mã CodePen này để xem một số ví dụ.

Sử dụng nhiều thuộc tính linh hoạt hơn trên trang web của bạn

Hy vọng rằng bây giờ bạn đã quen với các thuộc tính flex khác nhau mà bạn có thể sử dụng để căn chỉnh các mục trên trang web của mình. Điều này bao gồm cách bạn có thể sử dụng các thuộc tính flex-direction, justify-content, align-self, align-items, align-content và gap.

Flexbox là một kỹ thuật bố cục mạnh mẽ, nhưng nó chỉ là một phần nhỏ của CSS. Bạn cũng có thể tìm hiểu về các thuộc tính CSS mới, kỹ thuật mã hóa sạch và các công cụ được sử dụng để tối ưu hóa CSS.

Đọc tiếp

Giới thiệu về tác giả