css基础（十二）－－伸缩布局

36.伸缩布局

css3引入新的布局模式－－flexbox

 

主要功能：

 

第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；

 

第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；

 

第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；

 

第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

 

第五，可以控制元素在页面上的布局方向；

 

第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

 

使用方法：

1.创建容器使得display:flex

flex项目是flex容器的子元素

2.通过flex-direction改变方向 row为横排 column为竖排 显示

3.将flex项目移动到顶端 竖排使用justify-content:flex-start 横排使用align-items:flex-start

4.向左对齐 横排使用：justify-content:flex-start 竖排使用 align-items:flex-start

5.向右对齐 横排使用 justify-content:flex-end 竖排使用：align-items:flex-end

6.水平居中 横排使用：justify-content:flex-end 竖排使用：align-items:center

7.自动伸缩 设置需要伸缩的值 flex:100;