|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/css3-flexbox-course-build-5-real-flexible-layouts/
课程评论：没有评论
课程名称：《CSS Flexbox指南：构建5个真实灵活项目！》 课程概述： CSS Flexbox是CSS3中的一种新布局模块，旨在更轻松、快速地实现复杂的网站布局。在本课程中，您将从零开始学习CSS3 Flexbox，并掌握如何使用Flexbox以更少且更简便的代码构建现实世界中的灵活布局。我们将从CSS3 Flexbox的基本概念开始，逐步深入学习更多相关知识。 课程内容包括： - Flexbox的定义及其必要性 - Flexbox的主要组成部分，并讨论当前浏览器对Flexbox的支持 - Flex容器的工作原理，详细了解所有可直接应用于Flex容器的属性 - Flexbox的两个轴：主轴和交叉轴，并解释`display: flex`与`display: inline-flex`的区别 - 针对Flex项的详细讨论及其属性，着重学习Flex项的大小和灵活性 此外，课程还将通过实际编码示例，让您深入理解Flexbox模块。接下来，您将使用Flexbox构建一些真实世界中的灵活布局，包括： - 使用Flexbox实现CSS居中 - 创建一个灵活的图像网格，兼顾大屏和小屏幕的显示效果 - 构建简单的价格表，展示如何用少量CSS轻松设计和对齐价格表 - 设计响应式网页头部 - 制作灵活的卡片，这些卡片在小屏幕上将保持相等高度，并能够在空间不足时自动换行 通过本课程的学习，您将能够自如地在项目中使用Flexbox，并成为一名完全合格的Flexbox开发者。
CSS Flexbox is a new layout module in CSS3 which is designed for laying out more complex site layouts easily and rapidly!In this course, you will learn the CSS3 Flexbox from scratch and you will learn how to build real world flexible layouts with less and the easiest code using Flexbox. In this course, we will start with the very basics of CSS3 Flexbox and then we will gradually learn more and more about CSS3 Flexbox. You will learn what is exactly Flexbox, why do you need it, what are the main components of Flexbox, we will discuss current browser support for Flexbox.Then we will start working on flex container and we will take a detailed look at all the possible properties which can be used directly on flex container. You will also learn about the two axes of flexbox, the main axis and cross axis. We will also discuss the difference between display flex and display inline flex. And you will be learning all that with practical coding examples so you can understand flexbox module the right way.We cover working on flex items. We will take a detailed look at all the possible properties which can be used directly on an individual flex item. Actually, you will learn about the sizing and flexibility of flex items. And of course, you will learn all that along with coding examples.So once you learn the CSS3 Flexbox module then we will start building some real-world flexible layouts using flexbox.You will learn about css centering using Flexbox.I will show you how to build a simple flexible image grid with the help of flexbox. The image grid, we will build in course will look great on large screens as well as on small screens.We will be building simple pricing tables with the help of flexbox. You will see, how with little CSS flexbox we design & align pricing tables.We will be building a responsive header for a web page with the help of flexbox.You will learn to build flexible cards using flexbox. We will be building these cards which will have equal height and they will look great on smaller screens; they will easily wrap on smaller screen if there is not enough space available.By the end of this course, you will feel comfortable using Flexbox in your projects. By the end of this course, you will be a fully-fledged Flexbox developer. Thanks
