详细讲解flex布局_flex 布局

一、flex布局基本概念

在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。这些布局的缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。

flex布局是一种布局模型，经常被称之为flexbox。使用flex布局之后，它会给子元素提供强大空间分配和对齐能力。

优点：避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与响应式等问题。

缺点：只能依靠自身的布局模式，稍有变化则无法改变。

注意事项：

1、flex布局改变的不是自身，而是自己内部的子元素。即，定义时要将flex定义在父元素，把父元素当做‘容器’，然后改变内部子元素的排列方式。

2、设置为flex布局以后，子元素的float、clear都失效了。即，子元素不用浮动了，父元素也不用清除浮动了。

3、设置了flex的元素，子元素会“块状化”。即，父元素使用了 display:flex 其子元素都会变成块级元素。

二、flex布局的使用

1、基本语法

父元素设置display：flex。

2、主轴和交叉轴

语法：flex-direction

主轴和交叉轴是垂直的，两个轴的由来取决于子元素的排列方式，如图。

 默认情况下（不写flex-direction）采取行模式，即主轴是水平方向。

3、主轴排序

4、换行模式