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是调整重叠定位元素的堆叠顺序，堆罗汉的效果。只对相对定位，固定定位，绝对定位有效果，对标准流（静态定位），浮动都无次属性。