【2020更新中】Flexbox页面布局入门与实战【共14课时】

杜从文新锐讲师讲师评分4.9学员67752课程25

多年软件开发、互联网架构与项目管理经验，丰富的大型Web系统架构和开发经验，资深Web前端工程师。擅长技术：PHP,MySQL,Nginx,Redis,微信开发，APP开发讲课风格：有趣、急学员之所急、想学员...

畅销套餐
精选套餐
人气套餐
尊享套餐
高薪套餐

WEB全栈开发技能全家桶

Vue 2.x全家桶与Vue 3.0 新特性全解析

WEB API 接口签名验证入门与实战课程

Vue 2.x全家桶与Vue 3.0 新特性全解析

7783人学习

￥139.00

【2020连载中】微信小程序入门与实战（框架、组件、API、核心技能进阶与实战）

【2020更新中】Flexbox页面布局入门与实战

111人学习

￥39.00

【2020连载中】微信小程序入门与实战（框架、组件、API、核心技能进阶与实战）

208人学习

￥119.00

更多 3 门课程

Web前端必知必会：快速入门Vue与微信小程序

Vue 2.x全家桶与Vue 3.0 新特性全解析

Web前端必知必会：快速入门Vue与微信小程序

Vue 2.x全家桶与Vue 3.0 新特性全解析

课程介绍
课程大纲

适合人群：

前端开发人员,有html基础的同学,想学习前端开发的同学

你将会学到：

学习并学习flexbox中的容器属性与项目属性，使用它进行实战布局

课程简介：

本课程主要分为以下四章进行讲解：

第一章、Flexbox简介与基础概念

主要对Flexbox的产生背景以及使用场景做一个介绍，同时在宏观层面介绍Flexbox的基础概念，为后面的学习做好准备。

第二章、Flexbox容器属性详解与代码演示

对Flexbox中的容器属性进行讲解，并通过代码演示该属性每个属性值代表的含义与需要注意的地方，以帮助同学们更好地学习容器属性的使用。

第三章、Flexbox项目属性详解与代码演示

对Flexbox中的项目属性进行讲解，并通过代码演示该属性每个属性值代表的含义与需要注意的地方，以帮助同学们更好地学习项目属性的使用。

第四章、Flexbox项目实战演示

通过实战案例演示容器属性与项目属性是如何应用在具体项目中的，加强flexbox容器属性与项目属性的理解，使得同学们能够学以致用。

本课程采用连载方式更新，所有章节预计30课时，已录制好的课时先开放给同学们进行学习，剩余章节每周至少更新5课时，直至课程所有章节更新完毕

展开更多

课程大纲-【2020更新中】Flexbox页面布局入门与实战

第1章Flexbox简介与基础概念(14分钟2节)
1-1
Flexbox布局简介Flexbox布局简介
[05:41]开始学习
1-2
Flexbox弹性盒子模型基础概念Flexbox弹性盒子模型基础概念
[08:57]开始学习
第2章Flexbox容器属性详解(54分钟6节)
2-1
容器属性:flex-direction(深入理解主轴概念)容器属性:flex-direction(深入理解主轴概念)
[11:57]开始学习
2-2
容器属性:flex-wrap(深入理解交叉轴概念)容器属性:flex-wrap(深入理解交叉轴概念)
[10:51]开始学习
2-3
容器属性:justify-content(主轴上项目的对齐)容器属性:justify-content(主轴上项目的对齐)
「仅限付费用户」点击下载“课程资料.zip”
[08:20]开始学习
2-4
容器属性:align-items(项目在交叉轴上的布局)容器属性:align-items(项目在交叉轴上的布局)
「仅限付费用户」点击下载“课程资料.zip”
[08:59]开始学习
2-5
容器属性:align-content(交叉轴上行的对齐)容器属性:align-content(交叉轴上行的对齐)
「仅限付费用户」点击下载“课程资料.zip”
[11:30]开始学习
2-6
容器属性:flex-flow（属性语法糖）容器属性:flex-flow（属性语法糖）
「仅限付费用户」点击下载“课程资料.zip”
[03:15]开始学习
第3章FlexBox项目属性详解(52分钟6节)
3-1
项目属性:order(灵活调整项目的排列位置)项目属性:order(灵活调整项目的排列位置)
[02:00]开始学习
3-2
项目属性:flex-shrink的使用（项目压缩）项目属性:flex-shrink的使用（项目压缩）
「仅限付费用户」点击下载“课程资料及代码.zip”
[12:29]开始学习
3-3
项目属性:flex-shrink的使用注意项目属性:flex-shrink的使用注意
「仅限付费用户」点击下载“课程资料及代码.zip”
[06:48]开始学习
3-4
项目属性:flex-grow的使用（项目扩张）项目属性:flex-grow的使用（项目扩张）
「仅限付费用户」点击下载“课程资料及代码.zip”
[07:43]开始学习
3-5
项目属性:flex-basis的使用（与定义宽的区别）项目属性:flex-basis的使用
「仅限付费用户」点击下载“课程资料及代码.zip”
[11:40]开始学习
3-6
项目属性:flex使用的几种情况项目属性:flex使用的几种情况
「仅限付费用户」点击下载“课程资料及代码.zip”
[12:13]开始学习