容器属性:flex-flow(属性语法糖)
{{ interaction.likeNum == 0 ? (pageType === 'video' ? '抢首赞' : '点赞') : formatNumber(interaction.likeNum) }}
{{ interaction.collectionNum == 0 ? '收藏' : formatNumber(interaction.collectionNum) }}
{{ interaction.discussNum == 0 ? (pageType === 'video' ? '抢沙发' : '讨论') : formatNumber(interaction.discussNum) }}
分享
适合人群
前端开发人员,有html基础的同学,想学习前端开发的同学
你将会学到
学习并学习flexbox中的容器属性与项目属性,使用它进行实战布局
课程简介
本课程主要分为以下四章进行讲解:
第一章、Flexbox简介与基础概念
主要对Flexbox的产生背景以及使用场景做一个介绍,同时在宏观层面介绍Flexbox的基础概念,为后面的学习做好准备。
第二章、Flexbox容器属性详解与代码演示
对Flexbox中的容器属性进行讲解,并通过代码演示该属性每个属性值代表的含义与需要注意的地方,以帮助同学们更好地学习容器属性的使用。
第三章、Flexbox项目属性详解与代码演示
对Flexbox中的项目属性进行讲解,并通过代码演示该属性每个属性值代表的含义与需要注意的地方,以帮助同学们更好地学习项目属性的使用。
第四章、Flexbox项目实战演示
通过实战案例演示容器属性与项目属性是如何应用在具体项目中的,加强flexbox容器属性与项目属性的理解,使得同学们能够学以致用。
本课程采用连载方式更新,所有章节预计30课时,
展开更多
{{tips.text}}
{{ noteHeaderTitle }}
笔记{{ hasMyNote ? '我的笔记' : '记笔记' }}
{{ hasMyNote ? '我的笔记' : '记笔记' }}
优质笔记
更新于:{{ $dayjs.formate('YYYY-MM-DD HH:mm:ss', item.last_uptime*1000) }}
{{ detail.username }}
公开笔记对他人可见,有机会被管理员评为“优质笔记”
{{ noteEditor.content.length }}/2000
公开笔记
保存提问
讲师收到你的提问会尽快为你解答。若选择公开提问,可以获得更多学员的帮助。
记录时间点
记录提问时视频播放的时间点,便于后续查看
公开提问
提交课程大纲
自动连播
- 第一章 Flexbox简介与基础概念
- 1-1试看 Flexbox布局简介05:41
- 1-2试看 Flexbox弹性盒子模型基础概念08:57
- 第二章 Flexbox容器属性详解
- 2-1容器属性:flex-direction(深入理解主轴概念)11:57
- 2-2容器属性:flex-wrap(深入理解交叉轴概念)10:51
- 2-3容器属性:justify-content(主轴上项目的对齐)08:20
- 2-4容器属性:align-items(项目在交叉轴上的布局)08:59
- 2-5容器属性:align-content(交叉轴上行的对齐)11:30
- 2-6容器属性:flex-flow(属性语法糖)03:15
- 第三章 FlexBox项目属性详解
- 3-1项目属性:order(灵活调整项目的排列位置)02:00
- 3-2项目属性:flex-shrink的使用(项目压缩)12:29
14课时
【2020更新中】Flexbox页面布局入门与实战
111人学习
杜从文
5.0
¥39.00
42课时
HTML和CSS 6小时学习经典视频教程
1473443人学习
Helen老师 - 姚环
5.0
会员免费
57课时
HTML网页开发8小时轻松学习【燕十八】
940788人学习
燕十八(刘道成)
5.0
免费
92课时
Xhtml实战视频教程【李炎恢老师】
693643人学习
李炎恢
5.0
会员免费
38课时
HTML5和CSS3新特性视频教程
634586人学习
Helen老师 - 姚环
5.0
会员免费
67课时
HTML5+CSS3小白基础与提升实战视频课程
477550人学习
创客官方账号
5.0
免费
12课时
HTML零基础快速入门视频课程
315050人学习
牛牧
4.9
免费
29课时
使用织梦dedecms建设医疗网站实战视频课程
273283人学习
孙胜利
4.9
免费