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:
- Tạo một thư mục có tên là “Project-1” & Open VS Code
- Tạo nên
index.html
vàstyle.css
các tập tin - 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 ❤️