今天打开我的csdn，竟然涨了7个粉丝，哈哈。为了我新涨的粉丝们，决定今晚加更一篇文章~
目录
一、flex弹性布局与传统布局的区别：
二、flex布局介绍
三、父元素常见属性
四、子元素常见属性
五、flex圣杯布局
六、flex布局应用
一、flex弹性布局与传统布局的区别：
二、flex布局介绍
原理：通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式。
特点（待补充）：
1、flex布局相较于传统布局（浮动、定位）更简便，但兼容性较差；
2、父元素设为flex布局后，子元素的float、clear、vertical-align属性失效；
3、应用于任何元素：块元素、行元素、行内块元素；
4、display:声明flex属性值 flex，对应块元素，即容器转化为块元素 inline-flex，对应行内元素，即容器转化为行内元素；
5、子项目中行元素可直接设置宽高，块元素宽度不继承，行内块元素没有间隔；
6、没有外边距合并问题；
7、能让页面宽度自适应，高度与字体大小自适应需要配合rem+媒体查询。
三、父元素常见属性
1、flex-direction 决定主轴 x轴 y轴
2、justify-content 设置主轴上的子元素排列方式
3、align-items 设置侧轴上的子元素排列方式 （单行）
注意：只在子元素单行排列时起作用，与flex-wrap: nowrap;共同使用。
4、align-content 设置侧轴上的子元素排列方式 （多行）
注意：只在子元素多行排列时起作用，与flex-wrap: wrap;共同使用。
5、flex-wrap 设置子元素是否换行
注意：默认不换行，如果子元素宽度和超过父元素宽度，子元素的宽度会被缩小，width属性失效
6、flex-flow 是flex-direction和flex-wrap属性的复合属性
语法：flex-flow: flex-direction属性值 flex-wrap属性值
四、子元素常见属性
1、flex 定义子项目分配剩余空间，属性值表示占有的份数
语法：flex: <number>; number值可为数字或者百分比
注意：剩余空间指除指定宽高的元素所占有的其他所有空间，被分配的子元素宽高将自动撑满剩余空间。
2、align-self 控制子项本身在侧轴上的排列方式
3、order 定义项目的排列顺序
语法：order:<number>;默认值为0，数值越小，排列越靠前
五、flex圣杯布局
html:
<section><p></p><p></p><p></p></section>
css:
/* 子元素属性 */section {display: flex;width: 60%;height: 100px;background-color: blue;margin: 50px auto;}p:first-child {width: 100px;height: 100px;background-color: green;}p:nth-child(2) {/* 宽度与高度不用设置，元素大小为剩余空间大小 */flex: 1;background-color: pink;}p:last-child {width: 100px;height: 100px;background-color: rgb(143, 25, 31);}
六、flex布局应用
引言：这是我在做页面仿写时发现的关于flex布局的一个应用，在这里记录一下。
问题：在多行下子元素平均分配父元素空间，并子元素存在间隙的情况，如下：
首先了解：flex容器每一行的宽度 = 每个子容器的宽度 + 子元素对应轴的margin值
解决方法：
1、将多行子元素用一层盒子包裹起来，形成父容器单行排列子盒子，即单行变多行。flex值为数字，margin不会让盒子挤走 ；
2、间隙用一个元素边框代替 高度为0 或者宽度为0，定位到需要的位置；
3、width:百分比 不会发生挤走的情况 单行或者多行都能使用 中间间距用自身padding值取代。
