伸缩布局(flex布局)

一、flex布局简介

1.flex布局简介

我们首先选择的是一个大div里面嵌套四个小div，然后每个小div浮动，但是这种传统的布局方式首先在低版本浏览器上兼容性效果不是很好，另外在移动端的时候布局也会相对比较麻烦。

现在我们可以选用一种css3新出的布局方式：伸缩布局来实现上面的页面效果，简单快捷，缺点是pc端兼容性效果较差，所以建议在移动端放心使用，PC端IE11或更低版本不支持flex或仅支持部分

2.选择方式

1.如果是PC端页面,还是采用传统方式

2.如果是移动端或者是不考虑兼容的PC则采用flex

二、 flex布局详解

1.原理分析

任何一个容器都可以指定为flex布局  

采用 Flex 布局的元素，称为 Flex 容器（flex-container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

2.父项常见属性

设置主轴的方向:flex-direction

设置主轴上子元素排列方式:just