Hướng dẫn is css grid better than flexbox? - lưới css có tốt hơn flexbox không?

 

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

Sau đó, tôi đã thêm CSS vào phần đầu của trang của tôi.

Sử dụng bộ chọn CSS. Sau đó, tôi có thể chỉ định chiều cao của thùng chứa cũng như màu nền, như hình dưới đây.CSS selector .flex-container, I’d make the container flexible by setting the display property to flex. I can then specify the height of the container as well as the background color, as shown below.

 

   .flex-container {
display: flex;
height: 250px;
background-color: gray;
}

Để tạo kiểu cho các mục Flex trong thùng chứa, tôi đã sử dụng bộ chọn .Flex-container> Div. Sau đó tôi có thể đặt màu nền, chiều rộng, lề và kích thước phông chữ của từng mục. Tôi cũng có thể sử dụng thuộc tính Align văn bản để đặt căn chỉnh của phông chữ trong mỗi mục và thuộc tính có chiều cao dòng để đặt khoảng cách từ trên cùng của thùng chứa flex mà phông chữ sẽ được hiển thị..flex-container > div. I can then set the background color, width, margin, and font size of each item. I can also use the text-align property to set the alignment of the font within each item and the line-height property to set how far from the top of the flex container the font will be displayed.

Ở đây, mã CSS:

 

   .flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 60px;
font-size: 48px;

}

Đây là kết quả:

Bây giờ chúng tôi sẽ đi qua một ví dụ về việc xây dựng một lưới trong flexbox để bạn có thể so sánh cả hai quy trình.viewport changes size, I can simply add the flex-basis property in my CSS. Let’s set it to 1 1 150px so that the items grow and shrink from a flex-basis of 150 pixels. Here’s the new CSS:

 

   .flex-container {
display: flex;
height: 250px;
background-color: gray;
}

.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 48px;
flex: 1 1 150px;
}

Đây là kết quả:

Nguồn

Bây giờ chúng tôi sẽ đi qua một ví dụ về việc xây dựng một lưới trong flexbox để bạn có thể so sánh cả hai quy trình.

Ví dụ về lưới flexbox

Hãy nói rằng tôi muốn tạo một lưới flexbox với sáu cột, như chữ trên. Trong phần cơ thể, tôi chỉ cần tạo sáu yếu tố và bọc chúng trong một yếu tố với lớp .flex-container. Tại đây, mã HTML:

Sau đó, tôi đã thêm CSS vào phần đầu của trang của tôi.

Sử dụng bộ chọn CSS. Sau đó, tôi có thể chỉ định chiều cao của thùng chứa cũng như màu nền, như hình dưới đây.

Để tạo kiểu cho các mục Flex trong thùng chứa, tôi đã sử dụng bộ chọn .Flex-container> Div. Sau đó tôi có thể đặt màu nền, chiều rộng, lề và kích thước phông chữ của từng mục. Tôi cũng có thể sử dụng thuộc tính Align văn bản để đặt căn chỉnh của phông chữ trong mỗi mục và thuộc tính có chiều cao dòng để đặt khoảng cách từ trên cùng của thùng chứa flex mà phông chữ sẽ được hiển thị.

Ở đây, mã CSS:

Đây là kết quả:

 

   <div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
</div>

Nếu tôi muốn các mục Flex lấp đầy toàn bộ container, bất kể chế độ xem thay đổi kích thước như thế nào, tôi chỉ cần thêm thuộc tính Flex-Basis trong CSS của tôi. Hãy để Lừa đặt nó thành 1 1 150px để các vật phẩm phát triển và thu nhỏ từ cơ sở linh hoạt của 150 pixel. Ở đây, các CSS mới:

 

   .wrapper {

display: grid;
background-color: gray;
}

Các thuộc tính vật phẩm flex bổ sung là thứ tự, phát triển flex, flex-shrink, cơ sở flex và tự căn chỉnh. Bạn có thể tìm hiểu thêm về họ trong một hướng dẫn đầy đủ về Flexbox trên các thủ thuật CSS.fr unit. The fr unit represents a fraction of the available space in the grid container rather than a set amount and ensures that grid tracks grow and shrink according to the available space. The CSS for my example would now look like this:

 

   .wrapper {
display: grid;
background-color: gray;
grid-template-columns: 1fr, 1fr, 1fr;
}

Lưu ý rằng chúng tôi đã sử dụng thuộc tính cột lưới bản tin để xác định rõ ràng các cột trên lưới của chúng tôi, nhưng chúng tôi không sử dụng các thuộc tính của các hàng lưới lưới để xác định rõ ràng các hàng. Điều đó không có nghĩa là lưới CSS của bạn không có hàng; Nó chỉ có nghĩa là các hàng được xác định ngầm. Bạn có thể đặt kích thước cho các bản nhạc được tạo trong lưới ngầm với các thuộc tính của các tầng tự động và lưới điện lưới.

Hãy nói rằng tôi muốn đảm bảo rằng các bản nhạc được tạo ra trong lưới ngầm của tôi cao 100 pixel. Sau đó, tôi đã thêm các CSS sau đây để kết quả cuối cùng là:

 

   .wrapper {
display: grid;
background-color: gray;
grid-template-columns: 1fr, 1fr, 1fr;
grid-auto-rows: 100px;
}

Cuối cùng, tôi cần đặt năm mục trong thùng chứa lưới. Với CSS GRID, bạn sử dụng các thuộc tính bắt đầu từ cột lưới, kết thúc cột lưới, row-row-row và get-row-end và đặt giá trị thành các dòng lưới khác nhau. Các đường lưới về cơ bản là các dải phân cách ngang và dọc của các vật phẩm con trong lưới. Ví dụ, các đường lưới của lưới ba cột, hai hàng này được đánh số bên dưới:grid-column-start, grid-column-end, grid-row-start and grid-row-end properties and set the value to different grid lines. Grid lines are basically the horizontal and vertical dividers of child items in a grid. The grid lines of this three-column, two-row grid, for example, are numbered below:

Nguồn

Vì vậy, nếu tôi muốn Box1 của tôi trải dài từ dòng xa bên trái trên lưới đến bên phải, thì tôi sẽ đặt nó lên dòng cột một và kéo dài đến dòng thứ tư. Và, nếu tôi muốn nó kéo dài một rãnh hàng ngầm, thì tôi sẽ bắt đầu nó ở dòng hàng một và kết thúc nó ở dòng hàng hai, như được hiển thị bên dưới. Tôi cũng có CSS ​​đến Style Box2 và Box4.box2 and box4.

 

   .box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}

.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}
.box4 {
grid-column-start: 2;
grid-row-start: 2;
grid-row-end: 4;

}

Kết quả sẽ là:

Nguồn

Vì vậy, nếu tôi muốn Box1 của tôi trải dài từ dòng xa bên trái trên lưới đến bên phải, thì tôi sẽ đặt nó lên dòng cột một và kéo dài đến dòng thứ tư. Và, nếu tôi muốn nó kéo dài một rãnh hàng ngầm, thì tôi sẽ bắt đầu nó ở dòng hàng một và kết thúc nó ở dòng hàng hai, như được hiển thị bên dưới. Tôi cũng có CSS ​​đến Style Box2 và Box4.

Kết quả sẽ là:

Bạn có thể nhấp vào liên kết nguồn để xem những gì tôi đã sử dụng để tạo kiểu cho các mục lưới. Nó từ ví dụ Flexbox ở trên.

 

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

Hệ thống lưới bootstrap

 

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

Bây giờ, hãy để nói rằng tôi muốn thực hiện một hàng với hai cột, một cột có chiều rộng đầy đủ và một cột có chiều rộng một nửa để họ xếp chồng lên nhau trên thiết bị di động. Ở đây, HTML:

 

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

Hãy nói rằng tôi muốn tạo một hàng khác với ba cột chiếm một nửa chế độ xem trên thiết bị di động và một phần ba trên máy tính để bàn.

Nguồn

Vì vậy, nếu tôi muốn Box1 của tôi trải dài từ dòng xa bên trái trên lưới đến bên phải, thì tôi sẽ đặt nó lên dòng cột một và kéo dài đến dòng thứ tư. Và, nếu tôi muốn nó kéo dài một rãnh hàng ngầm, thì tôi sẽ bắt đầu nó ở dòng hàng một và kết thúc nó ở dòng hàng hai, như được hiển thị bên dưới. Tôi cũng có CSS ​​đến Style Box2 và Box4.

Kết quả sẽ là:

CSS Grid hay Flexbox nào tốt nhất?

Tôi có nên sử dụng Grid hay Flexbox 2022 không?

Flexbox hay lưới nào dễ dàng hơn?

Lưới có chậm hơn Flexbox không?