《HTML5+CSS3响应式Web开发》课件——2.flex弹性布局与定位（上）.pptxVIP

flex弹性布局发展

flex弹性布局发展

2011年浏览器厂商

决定使用flexbox

2009年W3C

提出概念

2015年W3C正式将其

修改为flexbox布局

2016年5月

flex布局规范标准

flex弹性布局发展

flex弹性布局描述版本

flex弹性布局概念

flex弹性布局概念

弹性盒子是一种用于按行或按列布局元素的一维布局方法。

非常适合结构化布局。

是目前web开发中用的最多的布局方案。

flex弹性布局

flex弹性布局组成

两个对象

弹性容器、项目

两条轴线

主轴、交叉轴

两组位置线

起始线、终止线

定义弹性布局方法

定义弹性布局方法

定义弹性布局的语法

定义弹性布局方法

定义弹性布局方法

float、clear、vertical-align属性都会失效

定义弹性布局方法

float、clear、vertical-align属性都会失效

定义弹性布局方法

flex布局与position:absolute/fixed发生冲突问题，flex属性会失效

定义弹性布局方法

解决办法：ul的外面再套一个盒子，然后外层盒子使用定位，内层盒子正常使用弹性盒布局。

小结

试一试