Hướng dẫn cheat trang fleex

Trong bài viết này, tôi sẽ dạy bạn CSS Flexbox những điều cơ bản để bạn có thể tạo các trang web đáp ứng của riêng mình. Tôi sẽ giải thích cách hoạt động của từng thuộc tính của Flexbox và tôi sẽ cung cấp cho bạn một bảng cheatsheet bao gồm mọi thứ bạn có thể làm với Flexbox. Đi thôi

Khi bạn đang xây dựng một ngôi nhà, bạn cần một bản thiết kế. Theo cách tương tự, chúng tôi cần một bản thiết kế chi tiết khi chúng tôi tạo ra các trang web. Và Flexbox là bản thiết kế.

Mô hình Flexbox cho phép chúng tôi bố cục nội dung của trang web của chúng tôi. Không chỉ vậy, nó còn giúp chúng ta tạo ra các cấu trúc cần thiết để tạo trang web đáp ứng cho nhiều thiết bị.

Đây là bản demo mà tôi đã tạo bằng Flexbox làm bản thiết kế chính.

Dự án này là một một phần của bài báo này.

Vậy kiến ​​trúc Flexbox hoạt động như thế nào? Các mặt hàng linh hoạt [Contents] được phân bố dọc theo trục chính và trục chéo. Và, tùy thuộc vào thuộc tính flex-direction, vị trí bố cục thay đổi giữa các hàng và cột.

Biểu đồ này chứa mọi thuộc tính và giá trị có thể có mà bạn có thể sử dụng khi làm việc với Flexbox. Bạn có thể tham khảo nó trong khi thực hiện các dự án của mình và thử nghiệm với các giá trị khác nhau.

Đối với dự án này, bạn cần biết một chút về HTML, CSS và cách làm việc với mã VS. Hãy làm theo cùng với tôi khi chúng tôi hoàn thành các nhiệm vụ sau:

1. Tạo một thư mục có tên là “Project-1” & Open VS Code
2. Tạo nên index.html và style.css các tập tin
3. Cài đặt Live Server và chạy nó.

Hoặc, bạn chỉ có thể mở Codepen và bắt đầu viết mã.

Vào cuối hướng dẫn này, bạn sẽ có thể tạo bố cục trang web chính xác và đẹp mắt.

• HTML
• CSS
• Nhưng Chờ đã …
• Nghỉ ngơi một lát
  • uốn cong
  • uốn cong
  • flex-wrap
  • cơ sở linh hoạt
  • linh hoạt tốc ký
  • uốn cong
• nội dung địa điểm
• Nhiêu tai nguyên hơn
  • Đề xuất và phê bình được đánh giá cao ❤️

HTML

Trong HTML, hãy viết những dòng mã này bên trong thẻ body 👇

    
 A 
    
 B 
    
 C 

Nhắm mục tiêu .container lớp và tất cả các hộp. Sau đó, tạo kiểu cho các hộp để tất cả chúng trông giống nhau, như thế này: 👇

Ghi chú: đừng quên đặt chiều cao của thùng chứa.

.container{
   height : 100vh;
}

[class ^="box-"]{
    width: 140px;
    height: 140px;
    background-color: skyblue;
    border: 2px solid black;

// To view the letter better
    font-size: 65px;
}

Nhưng Chờ đã …

Trước khi bắt đầu, bạn cần hiểu mối quan hệ giữa các lớp cha và con.

Flexbox hoạt động trên lớp cha mẹ, không phải trên các lớp học con.

Đây, .container lớp học là cha mẹ và của chúng tôi .box-* lớp học là của chúng tôi bọn trẻ.

Vì vậy, hãy áp dụng display: flex bên trong .container lớp học. Và đặt các chữ cái ở giữa hộp như sau:

.container{
    display : flex;
    height : 100vh;

// To place some gap between boxes
    gap : 25px;
}
[class ^="box-"]{
// Code from previous step are here

// Placing text at center 
    display : flex;
    justify-content : center;
    align-items : center;
}

Và … chúng ta đã sẵn sàng! Hãy bắt đầu viết mã. 😊

Thuộc tính này cho phép chúng tôi thiết lập hướng và hướng mà các mục linh hoạt của chúng tôi sẽ được phân phối bên trong thùng chứa linh hoạt.

Để tạo lại những kết quả này, hãy viết những dòng này trong CSS của chúng tôi:

Xin lưu ý rằng chúng tôi sẽ viết chúng bên trong .container lớp học.

.container{
//code from setup stage are here

// Change the value  👇 here to see results
    flex-direction : row;
}

Thuộc tính này sắp xếp các mục linh hoạt dọc theo TRỤC CHÍNH bên trong hộp đựng linh hoạt.

Để tạo lại những kết quả này, hãy viết những dòng sau trong CSS của bạn:

.container{
//code from setup stage are here

//  Change the value  👇 here to see results
    justify-content: flex-start;
}

Thuộc tính này sắp xếp các mục linh hoạt dọc theo TRỤC CHÉO bên trong hộp đựng linh hoạt. Điều này tương tự như biện minh cho nội dung.

Xin lưu ý rằng không có flex-wrap tài sản, tài sản này không hoạt động. Đây là bản demo:

.container{

//  Change the value  👇 here to see results
    align-content: center;

// without this line, align-content won't work
    flex-wrap: wrap;
}

Thuộc tính này phân phối các hạng mục Linh hoạt dọc theo Trục chéo.

Để tạo lại những kết quả này, hãy viết đoạn mã sau trong CSS:

.container{
//code from setup stage are here

// Change the value 👇 here to see results
    align-items: flex-end;
}

Thuộc tính này hoạt động trên các lớp con. Nó đặt mục đã chọn dọc theo Trục chéo.

Tổng cộng chúng tôi có 6 giá trị:

• khởi động linh hoạt
• flex-end
• trung tâm
• đường cơ sở
• căng ra
• Tự động

Để tạo lại kết quả, hãy chọn bất kỳ .box-* và viết đoạn mã sau:

.box-2{
// Change the value 👇 here to see results
     align-self : center;
}

Nghỉ ngơi một lát

Càng xa càng tốt. Nghỉ ngơi một lát!

Các thuộc tính chúng ta sẽ thảo luận bây giờ sẽ hoạt động khi chúng ta thay đổi kích thước cửa sổ. Hãy đi sâu vào ngay.

uốn cong

Thuộc tính này tăng kích thước của một mục linh hoạt dựa trên chiều rộng của thùng chứa linh hoạt.

uốn cong

Thuộc tính này giúp một mục linh hoạt thu nhỏ dựa trên chiều rộng của thùng chứa linh hoạt. Nó ngược lại với flex-grow.

Để đạt được những kết quả này, hãy theo tôi.

Xin lưu ý hoạt động linh hoạt phát triển và linh hoạt thu nhỏ trên các lớp học trẻ em. Vì vậy, chúng tôi sẽ nhắm mục tiêu tất cả các hộp của chúng tôi như thế này:

.box-1{
    flex-grow: 1;
}
.box-2{
    flex-grow: 5;
}
.box-1{
    flex-grow: 1;
}

Thay đổi kích thước cửa sổ và bạn sẽ thấy kết quả.

Để sao chép kết quả của flex-co, hãy viết đoạn mã sau:

Xin lưu ý rằng bạn cần phải xóa thuộc tính flex-wrap trước, nếu không nó sẽ không hoạt động.

.box-1{
    flex-shrink: 1;
}
.box-2{
    flex-shrink: 5;
}
.box-1{
    flex-shrink: 1;
}

Bây giờ, hãy thay đổi kích thước cửa sổ và bạn sẽ thấy kết quả.

flex-wrap

Thuộc tính này giúp bạn đặt số lượng mục linh hoạt bạn muốn trong một dòng hoặc hàng.

Điều này hoạt động trên .container lớp cha. Vì vậy, hãy viết đoạn mã sau:

.container{
    //other codes are here 
  
// Change value 👇 here to see results
    flex-wrap : wrap;

cơ sở linh hoạt

Điều này tương tự như thêm chiều rộng cho một mục linh hoạt, nhưng chỉ linh hoạt hơn. flex-base: ví dụ: 10em sẽ đặt kích thước ban đầu của một mục flex thành 10em. Kích thước cuối cùng của nó sẽ dựa trên không gian có sẵn, linh hoạt phát triển và linh hoạt thu nhỏ.

linh hoạt tốc ký

Đây là cách viết tắt của uốn cong, uốn cong và cơ sở linh hoạt các thuộc tính kết hợp.

Bạn có thể thử điều này bằng cách viết mã sau:

Xin lưu ý rằng nó chỉ hoạt động trên các lớp con:

.box-2{
    flex : 2 1 30em;
}

uốn cong

Đây là cách viết tắt của hướng uốn và flex-wrap tính chất:

Bạn có thể thử điều này bằng cách viết mã sau:

Xin lưu ý rằng nó chỉ hoạt động trên lớp cha.

.container{
    flex-flow : row wrap;
}

nội dung địa điểm

Đây là cách viết tắt của các thuộc tính justify-content và align-content:

Hãy nhân đôi kết quả:

Xin lưu ý mà nó hoạt động trên lớp cha.

.container{
    place-content : center flex-end;
}

Nhiêu tai nguyên hơn

Nếu bạn muốn tập thể dục kiến thức về Flexbox của bạn, bạn có thể đọc bài báo này của tôi bạn sẽ ở đâu xây dựng năm bố cục đáp ứng bằng Flexbox. Đây là bản demo:

Đây là huy chương của bạn vì đã đọc cho đến cuối ❤️

Đề xuất và phê bình được đánh giá cao ❤️