css flexbox

CSS Flexbox Là Gì? Hướng Dẫn Chi Tiết Cho NewBie

Với CSS, các trang web có thể được thiết kế để trông hấp dẫn hơn. Trong khi HTML chỉ chứa các phần tử cơ sở quan trọng nhất, người ta có thể thực hiện thiết kế web phức tạp thông qua CSS bằng cách chèn hình ảnh theo cách hấp dẫn hơn, sắp xếp văn bản và tích hợp các phần tử nổi bật trên trang web. 

Ngôn ngữ đánh dấu hữu ích tiếp tục được phát triển để giúp đơn giản hóa các tác vụ thiết kế web và cung cấp các tùy chọn thiết kế mới. CSS Flexbox là một ví dụ về sự phát triển không ngừng này và đã nhanh chóng trở thành một công cụ quan trọng cho các thiết kế web hợp lý trong thời đại di động.

CSS Flexbox được sử dụng để làm gì?

Một trong những nhiệm vụ chính của CSS là đưa tất cả các yếu tố của trang web vào một bố cục. Văn bản, hình ảnh và các nút có thể được sắp xếp gọn gàng. Các nhà thiết kế có thể chỉ định – đến từng pixel – nơi mỗi phần tử sẽ xuất hiện trên màn hình.

Tuy nhiên, điều này chỉ hoạt động đúng nếu kích thước màn hình và tỷ lệ khung hình được biết. Công nghệ Mo honey đưa ra một thách thức ở đây vì kích thước và tỷ lệ màn hình hiển thị khác nhau tùy thuộc vào thiết bị điện thoại thông minh hoặc máy tính bảng. CSS quá cứng nhắc để đạt được một kết quả thuyết phục.

Flexbox (hay chính xác hơn: bố cục Hộp linh hoạt CSS) hoạt động thông minh và linh hoạt hơn. Bố cục điều chỉnh linh hoạt và năng động phù hợp với màn hình đang sử dụng. 

Không gian được lấp đầy hoặc các phần tử được đẩy gần nhau hơn để mọi phần tử của trang web vẫn ở trong chế độ xem. Để điều này hoạt động mà không bị gián đoạn bố cục mong muốn, Flexbox sử dụng hai trục . Trục chính thường chạy theo chiều ngang; trục chéo chạy dọc. 

Sử dụng các trục này, các phần tử có thể được sắp xếp trong hộp. Bằng cách này, các phần tử có thể được phân phối trong mối quan hệ với nhau. CSS Flexbox sau đó cũng đảm bảo rằng không gian xung quanh các phần tử này được lấp đầy một cách hợp lý.

Hướng dẫn Flexbox:

Bất kỳ ai thiết kế trang web ngày nay đều nên xem xét CSS Flexbox vì công nghệ này giúp làm việc với các kích thước màn hình khác nhau dễ dàng hơn nhiều. Tính năng này được cấu trúc theo cách mà người ta thậm chí có thể tạo ra kết quả hấp dẫn chỉ với một vài dòng mã.

Các nguyên tắc cơ bản của CSS Flexbox

Flexbox dựa trên một thùng chứa (flex container) trong đó chứa một số phần tử (mục flex). Vùng chứa cho các phần tử vay các thuộc tính của nó – nói cách khác, các phần tử là các Flexbox thực tế, giữ được tính linh hoạt của chúng bằng cách nằm bên trong vùng chứa.

Cả hai trục đều có hướng: thông thường, trục chính chạy từ trái sang phải, trục chéo từ trên xuống dưới. Flexbox được mô tả như một hệ thống một chiều : các phần tử có thể được sắp xếp theo dòng hoặc theo cột. Một sự kết hợp không được cung cấp. Ví dụ, nếu một người chọn cách sắp xếp dòng (cũng là tiêu chuẩn), CSS Flexbox sẽ cố gắng sắp xếp tất cả các phần tử trong một chuỗi. Người ta cũng có thể ức chế điều này, và theo một nghĩa nào đó, buộc phải ngắt dòng.

Tạo và sắp xếp các phần tử

Trước khi bắt đầu sắp xếp các phần tử, trước tiên bạn cần tạo chúng bằng HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Box 1</div>
<div class="flex-item">Box 2</div>
<div class="flex-item">Box 3</div>
</div>
</body>
</html>
Bằng cách này, ba phần tử sẽ được hiển thị bên dưới nhau. Sử dụng CSS, giờ đây chúng tôi có thể phân phối các điều khoản trên trục chính:
<style>
.flex-container {
display: flex;
background-color: grey;
}
.flex-item {
background-color: white;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
}
</style>
Với CSS và HTML, các Flexbox có thể được tạo nhanh chóng.

Vùng chứa trong biểu định kiểu này đã được xác định ngay từ đầu. “Display: flex;” lệnh kích hoạt Flexbox. Các phần tử được phân phối từ trái sang phải, vì chúng tôi chưa xác định chúng khác nhau. Tuy nhiên, để sửa đổi bản phân phối, có thể đặt năm tùy chọn khác nhau bằng lệnh “ justify-content ”:

  • flex-start : left-justify
  •  
  • flex-end : vừa phải
  • center : căn giữa
  • không gian xung quanh : phân bổ đều không gian xung quanh các hộp
  • space-between : phân bổ đều không gian giữa các hộp

Đoạn mã còn lại chỉ mang tính thẩm mỹ và không liên quan gì đến các Flexbox thực tế.

Với Flexbox, CSS bắt nguồn từ một căn chỉnh theo chiều ngang. Tuy nhiên, cũng có thể sắp xếp các phần tử trong một cột. Ngoài ra, người ta có thể đảo ngược hướng – từ trái sang phải hoặc từ dưới lên trên. Với mục đích này, người ta sử dụng lệnh ” flex-direction “:

  • hàng : trái sang phải
  • ngược hàng : phải sang trái
  • cột : từ trên xuống
  • đảo ngược cột : từ dưới lên

Đồng thời, “justify-content: flex-end;” lệnh không có nghĩa giống như “flex-direction: row-reverse;”. Sử dụng biến thể đầu tiên, người ta đặt phần tử cuối cùng sang bên phải, trong khi biến thể thứ hai thay đổi thứ tự. Do đó, phần tử đầu tiên trong mã sẽ xuất hiện ở bên phải.

Nhóm các yếu tố

Cho đến nay, chúng tôi đã phân phối các Flexbox như nhau. Tuy nhiên, nếu bạn không muốn phải xử lý tất cả các đối tượng cùng một lúc, bạn có thể hợp nhất các phần tử trong văn bản HTML. Điều đó hữu ích nếu, ví dụ, một văn bản cần được hiển thị khác với một hình ảnh:

<div class="flex-container">
<div class="flex-item">Box 1</div>
<div class="flex-item">
<div class="flex-item">Box 2</div>
<div class="flex-item">Box 3</div>
</div>
</div>
Thông qua thứ tự trong tài liệu HTML, người ta cũng có thể lồng một số đối tượng trong một Flexbox.]

Chuyển động dọc

Sử dụng “justify-content”, các phần tử có thể được đặt trong một mối quan hệ cụ thể với nhau chứ không phải trên trục hoành. Tuy nhiên, nếu một người muốn di chuyển nội dung của họ từ trên xuống dưới (trên trục chéo), người đó cần lệnh ” align-items “. Có năm tùy chọn khác nhau:

  • center : các đối tượng được căn giữa
  • flex-start : các đối tượng được căn đều ở lề trên cùng
  • flex-end : các đối tượng được căn đều ở lề dưới cùng
  • căng : các đối tượng được kéo về cùng một kích thước
  • đường cơ sở : các đối tượng được sắp xếp trên đường cơ sở (phụ thuộc vào nội dung)

Cả hai tùy chọn “bắt đầu linh hoạt” và “đường cơ sở” thoạt nhìn dường như mang lại cùng một kết quả. Sự khác biệt xuất hiện khi các đối tượng được lồng vào nhau. Trong khi “flex-start” chỉ liên kết hai Flexbox với nhau nằm trên cùng một mức phân cấp, thì “baseline” cũng tính đến nội dung của các hộp.

Với đoạn mã sau, bạn có thể sắp xếp ba đối tượng có kích thước khác nhau để chúng được căn giữa bên cạnh nhau:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
}
.flex-item1 {
background-color: white;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
}
.flex-item2 {
background-color: blue;
width: auto;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
}
.flex-item3 {
background-color: grey;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">Box 1</div>
<div class="flex-item2">
<div class="flex-item3">Box a</div>
<div class="flex-item3">Box b</div>
</div>
<div class="flex-item1">Box 2</div>
</div>
</body>
</html>

Với CSS Flexbox, bạn có thể quyết định căn chỉnh theo chiều dọc của các phần tử khác nhau trông như thế nào.

Chênh lệch dọc cũng có thể bị ảnh hưởng thông qua ngắt dòng. Nếu một người đóng gói nhiều đối tượng vào một vùng chứa, các đối tượng này sẽ luôn tiếp tục chạy theo chiều ngang để người dùng phải cuộn và do đó, màn hình thực tế được cung cấp sẽ bị bỏ qua. Với “ flex-wrap ”, bạn có thể đảm bảo rằng các phần tử được phân phối đúng cách trên nhiều dòng.

  • nowrap : không ngắt dòng
  • quấn : ngắt dòng
  • quấn-đảo ngược : ngắt dòng (sắp xếp theo thứ tự ngược lại)
  • .flex-container {
  • display: flex;
  • background-color: grey;
  • justify-content: center;
  • align-items: center;
  • flex-wrap: wrap-reverse;
  • }

Di chuyển một Flexbox riêng lẻ

Từ trước đến nay, cách sắp xếp luôn được áp dụng cho toàn bộ container. Tất cả các hộp trong vùng chứa đều tuân theo lệnh chung. Điều này làm cho công việc dễ dàng hơn, nhưng nó cũng hạn chế. 

Đó là lý do tại sao CSS Flexbox cung cấp cho các nhà thiết kế web tùy chọn để xác định các ngoại lệ bằng cách sử dụng “ order ”. Giá trị tiêu chuẩn (nếu nó không được xác định cụ thể theo cách này) là 0.

Giá trị thứ tự thêm đối tượng vào một nhóm trừu tượng. Tất cả các phần tử mà chúng tôi đã tạo cho đến nay thuộc cùng một nhóm, vì tất cả đều có giá trị 0. Tiếp tục từ giá trị này, người ta chỉ có thể di chuyển các đối tượng riêng lẻ về phía trước (-1) hoặc lùi (1).

Do đó, nếu bạn chọn thêm giá trị 1 vào một đối tượng đã chọn, nó sẽ chỉ được hiển thị sau các phần tử khác được để ở mức 0. Nhưng bạn có thể gán các giá trị khác (cao hơn hoặc thấp hơn). Đó là một vấn đề về biểu diễn trực quan : kết quả logic (theo tài liệu HTML) vẫn không thay đổi.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
flex-direction: row;
}
.flex-item1 {
background-color: white;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
}
.flex-item2 {
background-color: white;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
order: -1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">Box 1</div>
<div class="flex-item2">Box 2 </div>
<div class="flex-item1">Box 3</div>
</div>
</body>
</html>
Phân phối riêng lẻ các Hộp linh hoạt
Bạn có thể để sự sắp xếp của các đối tượng cho CSS Flexbox hoặc điều chỉnh nó theo ý muốn.

Kích thước phần tử linh hoạt

Cho đến nay, chúng ta mới chỉ đề cập đến việc sắp xếp linh hoạt các đối tượng. Tỷ lệ kích thước trong ví dụ mã được quy định bằng cách sử dụng CSS cổ điển. Tuy nhiên, Flexbox có thể điều chỉnh được tùy theo kích thước của chúng. Với mục đích này, lệnh ” flex ” được sử dụng. Tương tự như việc sắp xếp thứ tự, các phần tử có thể được phân loại thành các nhóm theo cách này. Giá trị càng lớn, phần tử tương ứng càng cần nhiều không gian.

.flex-container {
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
flex-direction: row;
}
.flex-item1 {
background-color: white;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
}
.flex-item2 {
background-color: white;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 50px;
flex: 1;
}

Với “flex”, người ta thực sự sử dụng một dạng viết tắt . Lệnh này chỉ chứa ba cấu hình: “flex-grow”, “flex-co” và “flex-base.” Do đó, người ta cũng có thể nhập các giá trị riêng lẻ trực tiếp vào dạng viết tắt (flex: <flex-grow> <flex-shrink> <flex-basis> / flex: 1 1 20em) hoặc chọn một giá trị riêng lẻ và để cấu hình cho CSS.

Hộp linh hoạt với các kích thước khác nhau
CSS Flexbox cũng có thể ảnh hưởng đến tỷ lệ kích thước của các đối tượng giữa các đối tượng khác nhau.

Kết Luận

Sử dụng CSS Flexbox, bạn có thể tiết kiệm rất nhiều thời gian và công sức khi thiết kế bố cục. Các Flexbox được đặt tự động, nhưng CSS vẫn cung cấp cho nhà thiết kế web đủ thời gian để họ có thể khẳng định quyền kiểm soát và điều chỉnh bố cục.

Nguồn:

https://www.ionos.com/digitalguide/websites/website-creation/css-flexbox/

Nếu bạn đọc nào copy hoặc tham khảo bài viết từ https://thietkewebcantho89.com/, vui lòng để nguồn https://thietkewebcantho89.com/css-flexbox-la-gi/

 

Leave a Reply

Your email address will not be published. Required fields are marked *