flex布局

6.30 移动端 
本次案例布局用到了 flex+rem+flexible.js+LESS
normalize.css 初始化样式
轮播图用swiper插件
7.1

显示不开就换行：
display: flex;
flex-wrap: wrap;

纵轴排列：
flex-direction: column;

水平居中：
align-items: center;

选择前面三个-n+3 选择前三个：
&:nth-child(-n+3){
padding-bottom:1.653333rem ;
}

 

7.2

两端对齐：
display:flex;
justify-content: space-between;

转行内块：
display:inline-block;

行内块和文字对齐添加代码：
vertical-align: middle;// 添加这个代码，可以让后面的文字垂直居中

自调用函数，立即执行函数，沙箱函数；作用：局部变量，避免全局污染
(function(){})();

7.5
flex属性总结

父元素叫容器 子元素叫项目
父元素属性：
display:flex;
//1.设置主轴方向
flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
//2.设置主轴上子元素的排列方式
justify-content:flex-start;
justify-content:flex-end;
justify-content:center;
justify-content:space-between;
justify-content:space-around;
//3.子元素是否换行
flex-wrap:nowrap;
flex-wrap:wrap;
//4.设置单行子元素的侧轴排列方式
align-items:flex-start;
align-items:center;
align-items:flex-end;
align-items:stretch;
//5.设置多行子元素的侧轴排列方式
align-content:flex-start;
align-content:center;
align-content:flex-end;
align-content:space-between;
align-content:space-around;
align-content:stretch;

flex下的子元素属性
//1.份数,子项目分配剩余空间，用flex表述占多少份（可用作圣杯布局）；
flex:1;
//控制子项自己在侧轴的排列方式
align-self:flex-start;
align-self:flex-end;
align-self:center;
//控制子项的排列顺序，默认0，越小越靠前啊
order:0;