第一集、课程概述
第二集、实现盒子水平和垂直居中
一、简单实例
1、position方法
2、flexbox方法
二、认识main和cross轴
1、row
2、column
父元素属性(flex Container)
第三集 display
一、语法
display:flex;
display:inline-flex
block 和 inline-block
block 有宽高 独占一行
inline-block 子项分别独占一行
inline-block
宽高消失 子项来顶宽高
子项分别独占一行
二、flex实例
将对象作为弹性伸缩盒显示
1、父有宽和高 并且独占一行
2、子项受父元素影响，一旦父元素是flex,子项虽然是block 但独占一行的特性会消失
三、inline-flex实例
将对象作为内联块级单位伸缩盒显示
第四集、flex-direction
一、语法
flex-direction:row | row-reverse | column | column-reverse;
二、实例
1、row
start->end
2、row-reverse
end->start
3、column
上到下
4、column-reverse
下->上
第五集、flex-wrap
一、语法
#default:nowrap
flex-wrap:nowrap | wrap | wrap-reverse;
二、实例
1、nowrap 不换行
2、wrap 换行
3、wrap-reverse 翻转
第六集、flex-flow
一、语法
#default : row nowrap
flex-flow:column wrap;
二、 实例
1、row wrap
行 + 不换行
2、row nowrap
行 + 不换行
3、column wrap
4、column nowrap
第七集、justify-content
一、语法
#default:flex-start
justify-content:flex-start | flex-end | center |space-between | space-around |space-evenly
二、实例
1、flex-start 左
2、flex-end 右
3、center 中间
4、space-between
5、space-around
6、space-evenly
第八集、align-items
一、语法
#default:flex-start
align-items:flex-start | flex-end | center | stretch | baseline
二、实例
1、flex-start
2、flex-end
3、center 中
4、stretch 拉伸
5、baseline 基准线
第九集、align-content
一、语法
#default:space-evenly
align-content:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
二、实例
1、flex-strat
2、flex-end
3、center
4、stretch
5、space-between
6、space-around 围绕
7、space-evenly 均分
flex项属性(flex items)
第十集、order
一、语法
#default ：0
order：5;
二、实例
1、flex-flow:row
数字越小越往前排
2、flex-flow:column
数字越小越往上排
第十一集、flex-grow
一、语法
#default :0
flex-grow : 4;
负数是无效的
二、实例
item实例
三、代码结构
container
item
span
第十二集、flex-shrink
一、语法
# default:1
flex-shrink:3
负数是无效的
二、实例
这定义了弹性项目在必要时收缩的能力。
第十三集、flex-basis
一、flex-basis 弹性基础
1、定义了剩余空间分配之前元素的默认大小
2、可以是长度(px rem em %)或关键字 auto
3、使用最多的值为auto|100%|0%
二、语法
#default:auto
flex-basis: 长度(px rem em %) | auto;
三、优先级
四、实例
第十四集、flex
一、flex
是 flex-grow flex-shrink flex-basis 缩写形式
二、语法
flex:1 1 100%;
第十五集、align-self
一、定义
item可单独对自己的对齐等进行控制
二、使用
不能与align-content 同时使用
三、语法
align-self:flex-start | flex-end |
第十六集、弹性盒子布局
第十七集、弹性导航条布局
第十八集、弹性页面布局