flex伸缩布局知识点总结

前言：

简单来说flex伸缩布局是我们移动端布局比较常用的一种方式，移动端布局还有流式布局，less+rem+媒体查询布局这些都是单独制作移动端页面的一些布局方式。

这里主要介绍一下flex伸缩布局，因为它有很多优点，比如操作方便，布局非常简单，在移动端运用很广泛。

什么是flex伸缩布局？

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。

用大白话来说就是就是通过给父盒子添加flex属性，来控制子盒 子的位置和排列方式

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

flex布局父项常见属性：

以下6个属性都是对父元素设置的：

flex-direction 设置主轴的方向

flex-wrap 设置子元素是否换行

justify-content 设置主轴上子元素的排列方式

align-items设置侧轴上子元素的排列方式（单行文本）

align-content设置侧轴上子元素的排列方式（多行文本）

flex布局子项常见属性：

flex flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

align-self  控制子项自己在侧轴上的排列方式

order 属性定义项目的排列顺序 这里和z-index不同，z-index是调整重叠定位元素的堆叠顺序，堆罗汉的效果。只对相对定位，固定定位，绝对定位有效果，对标准流（静态定位），浮动都无次属性。