Đang tải... (xem toàn văn)
Help the owls get to their own trees Although they seem close, it will take both 昀氀ex-direction and justify-content to get them there.
Notice that when you set the direction to a reversed row or column, start and end are also reversed.
", vi: "Giúp đỡ cú tìm thấy chúng Mặc dù gần nhau, cần hai thuộc tính 昀氀ex-direction justifycontent để đưa chúng đến nơi.
Chú ý bạn thiết lập chiều hướng hàng cột đảo ngược, điểm bắt đầu kết thúc đảo ngược.
", }, board: "gyr", style: { "昀氀ex-direction": "row-reverse", "justify-content": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-direction 4", instructions: { en: "Help the owls 昀椀nd their trees using 昀氀ex-direction and justify-content.
Notice that when the 昀氀ex direction is a column, justify-content changes to the vertical and align-items to the horizontal.
", vi: "Giúp đỡ cú tìm thấy chúng cách sử Nhóm 70 Lập trình hướng đối tượng Chương III: Phân tích dụng 昀氀ex-direction justify-content.
Chú ý hướng 昀氀ex hàng dọc, justify-content thay đổi thành chiều dọc align-items to chiều ngang.
", }, board: "gyr", style: { "昀氀ex-direction": "column", "justify-content": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-direction 5", instructions: { en: "Help the owls 昀椀nd their trees using 昀氀ex-direction and justify-content.
", vi: "Giúp đỡ cú tìm họ cách sử dụng 昀氀ex-direction justify-content.
", }, board: "gyr", style: { "昀氀ex-direction": "column-reverse", "justify-content": "space-between", }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-direction 6", instructions: { en: "Help the owls 昀椀nd their trees using 昀氀ex-direction, Nhóm 71 Lập trình hướng đối tượng Chương III: Phân tích justify-content, and align-items.
", vi: "Giúp đỡ cú tìm họ cách sử dụng 昀氀ex-direction, justify-content, alignitems.
", }, board: "gyr", style: { "昀氀ex-direction": "row-reverse", "justify-content": "center", "align-items": "昀氀ex-end", }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "order 1", instructions: { en: "Sometimes reversing the row or column order of a container is not enough In these cases, we can apply the order property to individual items By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).
Use the order property to reorder the owls according to their trees.
", vi: "Đôi đảo chiều hộp chứa theo hàng ngang hay hàng dọc không đủ Trong trường hợp này, áp dụng thuộc tính order cho hạng mục riêng lẻ Theo mặc định, hạng mục có giá trị 0, thay đổi thuộc tính với giá trị số ngun dương âm khác.
Sử dụng thuộc tính order để xếp lại cú theo chúng.
", }, board: "gyr", selector: "> :nth-child(2)", classes: { "#container, #background": "wrap" }, Nhóm 72 Lập trình hướng đối tượng Chương III: Phân tích style: { order: "2" }, before: "#container {\n display: 昀氀ex;\n}\n\n.yellow {\n", after: "}", }, { name: "order 2", instructions: { en: "Use the order property to send the red owl to his tree.
", vi: "Sử dụng thuộc tính order để đưa cú màu đỏ đến với mình.
", }, board: "gggrg", selector: "> :nth-child(4)", classes: { "#container, #background": "wrap" }, style: { order: "-1" }, before: "#container {\n display: 昀氀ex;\n}\n\n.red {\n", after: "}", }, { name: "align-self 1", instructions: { en: "Another property you can apply to individual items is alignself This property accepts the same values as align-items and its value for the speci昀椀c item.
", vi: "Một thuộc tính CSS khác mà bạn áp dụng cho hạng mục riêng biệt align-self Thuộc tính CSS chấp nhận giá trị tương tự align-items giá trị hạng mục riêng biệt.
", }, board: "ggygg", Nhóm 73 Lập trình hướng đối tượng Chương III: Phân tích selector: "> :nth-child(3)", style: { "align-self": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n align-items: 昀氀ex-start;\n}\n\n.yellow {\n", after: "}", }, { name: "align-self 2", instructions: { en: "Combine order with align-self to help the owls to their destinations.
", vi: "Kết hợp order với align-self giúp cú đến địa điểm chúng.
", }, board: "ygygg", selector: "> yellow", style: { "align-self": "昀氀ex-end", order: "2" }, before: "#container {\n display: 昀氀ex;\n align-items: 昀氀ex-start;\n}\n\n.yellow {\n", after: "}", }, { name: "昀氀ex-wrap 1", instructions: { en: "Oh no! The owls are all squeezed onto a single row of trees Spread them out using the 昀氀ex-wrap property, which accepts the following values:
- nowrap: Every item is 昀椀t to a single line.
- wrap: Items wrap around to additional lines.
- wrap-reverse: Items wrap around to additional lines in reverse.
Ồ không! Những cú dồn vào hàng theo Tách rời chúng cách sử dụng thuộc tính 昀氀ex-wrap, thuộc tính chấp nhận giá trị sau:
- nowrap: Mỗi hạng mục dồn vào hàng nhất.
- wrap: Các hạng mục quấn xung quanh để tạo thêm dòng.
- wrap-reverse: Các hạng mục quấn xung quanh để tạo thêm dòng ngược lại.
Help this army of owls form three orderly columns using a combination of 昀氀ex-direction and 昀氀ex-wrap.
", vi: "Giúp đội quân ếch xếp thành ba hàng trật tự cách kết hợp 昀氀exdirection 昀氀ex-wrap.
", }, board: "gggggrrrrryyyyy", style: { "昀氀ex-direction": "column", "昀氀ex-wrap": "wrap" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-昀氀ow 1", instructions: { en: "The two properties 昀氀ex-direction and 昀氀exwrap are used so often together that the shorthand property 昀氀ex-昀氀ow was created to combine them This shorthand property accepts the value of the two properties separated by a space.
For example, you can use 昀氀ex-昀氀ow: row wrap to set rows and wrap them.
Try using 昀氀ex-昀氀ow to repeat the previous Nhóm 75 Lập trình hướng đối tượng Chương III: Phân tích level.
", vi: "Cả hai thuộc tính 昀氀ex-direction 昀氀ex-wrap thường sử dụng với từ viết tắt 昀氀ex-昀氀ow tạo để kết hợp chúng Từ viết tắt chấp nhận giá trị hai thuộc tính ngăn cách khoảng trắng.
Ví dụ, bạn sử dụng 昀氀ex-昀氀ow: row wrap để thiết lập hàng ngang quấn xung quanh chúng.
Thử sử dụng 昀氀ex-昀氀ow để lặp lại cấp độ trước đó.
", }, board: "gggggrrrrryyyyy", style: { "昀氀ex-昀氀ow": "column wrap" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "align-content 1", instructions: { en: "The owls are spread all over the container, but the trees are bunched at the top You can use align-content to set how multiple lines are spaced apart from each other This property takes the following values:
- 昀氀ex-start: Lines are packed at the top of the container.
- 昀氀ex-end: Lines are packed at the bottom of the container.
- center: Lines are packed at the vertical center of the container.
- space-between: Lines display with equal spacing between them.
- space-around: Lines display with equal spacing around them.
- stretch: Lines are stretched to 昀椀t the container.
This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container When there is only one line, aligncontent has no e昀昀ect.
", vi: "Những cú lan rộng ao, chụm lại phía Bạn dùng align-content để thiết lập cách dịng có khoảng cách xa Những thuộc tính có giá trị sau:
- 昀氀ex-start: Các dịng dồn phía hộp chứa.
- 昀氀ex-end: Các dịng dồn phía hộp chứa.
- center: Các dòng dồn trung tâm hộp chứa.
- space-between: Các dịng trình bày với khoảng cách chúng.
- space-around: Các dịng trình bày với khoảng cách xung quanh chúng.
- stretch: Các dòng kéo dài để phù hợp với hộp chứa.
Điều gây nhầm lẫn, align-content xác định khoảng cách dòng, alignitems xác định cách hạng mục toàn thể xếp hộp chứa Khi có dịng, align-content khơng có hiệu lực.
", }, Nhóm 76 Lập trình hướng đối tượng Chương III: Phân tích board: "ggggggggggggggg", classes: { "#container, #background": "wrap" }, style: { "align-content": "昀氀ex-start" }, before: "#container {\n display: 昀氀ex;\n 昀氀ex-wrap: wrap;\n", after: "}", }, { name: "align-content 2", instructions: { en: "Now the current has bunched the trees at the bottom Use aligncontent to guide the owls there.
", vi: "Hiện phía Sử dụng align-content để hướng dẫn cú đến chỗ đó.
", }, board: "ggggggggggggggg", classes: { "#container, #background": "wrap" }, style: { "align-content": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n 昀氀ex-wrap: wrap;\n", after: "}", }, { name: "align-content 3", instructions: { en: "The owls have had a party, but it is time to go home Use a combination of 昀氀ex-direction and align-content to get them to their trees.
", vi: "Những cú có bữa tiệc, đến lúc để nhà Kết hợp thuộc tính 昀氀ex-direction align-content để đưa chúng với cây.
", Nhóm 77 Lập trình hướng đối tượng Chương III: Phân tích }, board: "rgggyrgggyrgggy", classes: { "#container, #background": "wrap" }, style: { "昀氀ex-direction": "column-reverse", "align-content": "center" }, before: "#container {\n display: 昀氀ex;\n 昀氀ex-wrap: wrap;\n", after: "}", }, { name: "align-content 4", instructions: { en: 'Bring the owls home one last time by using the CSS properties you\'ve learned:
- justify-content
- alignitems
- 昀氀exdirection
- order
- alignself
- 昀氀ex-wrap
- 昀氀ex昀氀ow
- align-content
Đưa cú nhà lần cuối cách sử dụng thuộc tính CSS mà bạn học:
- justify-content
- alignitems
- 昀氀exdirection
- order
- alignself
- 昀氀ex-wrap
- 昀氀ex昀氀ow
- align-content
You win! Thanks to your mastery of 昀氀exbox, you were able to help all of the owls to their trees Just look how hoppy they are!
If you found this ribbeting, be sure to visit Grid Garden to learn about another powerful new feature of CSS layout And be sure to share Flexbox Owlet with your friends!
', vi: 'Chiến thắng! Nhờ thành thạo Flexbox bạn, bạn giúp tất cú trở với chúng Nhìn xem chúng hạnh phúc nhiêu!
Nếu bạn thấy dự án lôi cuốn, chia sẻ Flexbox Owlet với bạn bè!
', }, board: "gyrgyrgyrgyrgyrgyrgyrgyrg", classes: { "#container, #background": "wrap" }, style: {}, before: "#container {\n display: 昀氀ex;\n", after: "}", }; Messages.js var messages = { languageActive: { en: "English", vi: "Tiếng Việt", }, next: { Nhóm 79 Lập trình hướng đối tượng Chương III: Phân tích en: "Check Answer", vi: "Kiểm tra", }, labelFooter: { en: "Flexbox Owlet is created by", vi: "Flexbox Owlet tạo bởi", }, labelLevel: { en: "Level", vi: "Cấp", }, labelOf: { en: "of", vi: "của", }, title: { en: "Flexbox Owlet - A game for learning CSS 昀氀exbox", vi: "Flexbox Owlet - Một trò chơi để học CSS 昀氀exbox", }, labelReset: { en: "Reset", vi: "Thiết lập lại", }, warningReset: { en: "Are you sure you want to reset the game?\n\nYour saved progress will be lost and you'll be sent to the start of the game.", vi: "Bạn có chắn bạn muốn thiết lập lại trò chơi khơng? Tồn tiến trình Nhóm 80 Lập trình hướng đối tượng Chương III: Phân tích bạn bị bạn chuyển đến đầu trò chơi.", }, gridGarden: { en: "Want to learn CSS grid? Play", vi: "Bạn muốn học CSS grid? Chơi ngay", }, labelLanguage: { en: "Language", vi: "Ngôn ngữ", }, labelSettings: { en: "Settings", vi: "Thiết lập", }, labelDi昀케culty: { en: "Di昀케culty", vi: "Độ khó", }, labelColorblind: { en: "Colorblind Mode", vi: "Chế độ mù màu", }, labelColorblindO昀昀: { en: "O昀昀", vi: "Tắt", }, Nhóm 81 Lập trình hướng đối tượng Chương III: Phân tích labelColorblindOn: { en: "On", vi: "Bật", }, labelDi昀케cultyEasy: { en: "Beginner", vi: "Người bắt đầu", }, labelDi昀케cultyMedium: { en: "Intermediate - No Directions", vi: "Trung cấp - Khơng có hướng dẫn", }, labelDi昀케cultyHard: { en: "Expert - No Directions & Random Levels", vi: "Chuyên gia - Khơng có hướng dẫn Cấp độ ngẫu nhiên", }, }; Nhóm 82 Lập trình hướng đối tượng Chương IV:Kết luận CHƯƠNG IV: KẾT LUẬN Trong báo cáo này, tìm hiểu game Flexbox Owlet - cơng cụ hữu ích để học cách sử dụng Flexbox phát triển giao diện web Game mang lại nhiều lợi ích trải nghiệm thú vị cho người dùng Trước tiên, việc học Flexbox thơng qua trị chơi phương pháp học tương tác thú vị Game cung cấp môi trường học tập không gian, cho phép người dùng tương tác trực tiếp với khái niệm thuộc tính Flexbox Nhờ đó, người chơi có hội áp dụng kiến thức mơi trường thực tế nhận phản hồi xác họ Thứ hai, Flexbox Owlet cung cấp quy trình học tập có cấu trúc tăng dần độ khó Người chơi tập tiến tới thử thách phức tạp Điều giúp người dùng xây dựng tự tin tiếp cận Flexbox cách có hệ thống Ngồi ra, game cung cấp giải thích rõ ràng khái niệm thuộc tính Flexbox, giúp người chơi hiểu rõ áp dụng thành thạo trình phát triển giao diện web thực tế Cuối cùng, Flexbox Owlet tạo hứng thú khám phá Thông qua việc thực nhiệm vụ đạt điểm số cao, người dùng cảm thấy động viên thách thức Game cung cấp chế độ chơi không giới hạn, cho phép người chơi luyện tập thử nghiệm phương pháp Flexbox khác mà không gặp giới hạn thời gian hay điểm số Điều khuyến khích người dùng tiếp tục khám phá nâng cao kỹ việc sử dụng Flexbox Tóm lại, Flexbox Owlet cơng cụ hữu ích thú vị để học Flexbox phát triển giao diện web Bằng cách kết hợp tương tác, cấu trúc học tập yếu tố giải trí, game giúp người dùng tiếp tục nắm vững áp dụng linh hoạt khái niệm thuộc tính Flexbox Game cung cấp mơi trường an toàn để người dùng thực hành thử nghiệm mà không gặp phải hậu tiêu cực trình phát triển thực tế Tuy nhiên, cần nhớ Flexbox Owlet công cụ hỗ trợ học tập thay việc hiểu áp dụng nguyên tắc thiết kế linh hoạt thực tế Sau hoàn thành game, người dùng nên tiếp tục khám phá áp dụng Flexbox dự án thực tế, kết hợp với kiến thức kỹ phát triển giao diện web khác để tạo trang web tốt Nhóm 82 TÀI LIỆU THAM KHẢO Tiếng Việt [1] Sách: Lập trình hướng đối tượng, Vũ Thanh Tài [2] Giáo trình: Giáo trình JavaScript – Hướng dẫn học qua ví dụ, Steve Suehring, 2010 Tiếng Anh [1] Sách: Game Engine Architecture, Jason Gregory, 2018 [2] Sách: Learning JavaScript: JavaScript Essentials for Modern Application Development, Ethan Brown Trang Web [1] https://github.com/thomaspark/flexboxOwlet [2] https://github.com/thomaspark/gridgarden [3] https://codingfantasy.com/games/flexboxadventure/play [4] https://codecombat.com/play/dungeon [5] https://chriscourses.com/courses