简单探讨弹性布局flex

css 弹性布局：

盒子模型：
box-sizing属性
1.content-box 正常的普通的盒子模型用padding和border会使盒子变大；（向外扩张）
2.border-box 盒子模型，padding和border盒子模型不变大；（向内扩张）
calc(计算公式）+ - * /基本用的四种一般前面2中即可;
如 calc（100px - 20px）---->符号前后空格隔开；

caniuse网站查看css属性兼容性!!!；

父级盒子：display:flex; 某些浏览器可能兼容性不好，加上前缀就好；
postCss插件；

如dom结构：
<div class="father">
　　<div class="son1"><div>
　　<div class="son2"><div>
<div>

<style>
.father{
　　width:500px;
　　height:400px;
　　border:1px solid #ccc;
}
.son1{
　　width:100px;
　　height100px;
}
.son2{
　　width:100px;
　　height100px;
}
</style>

如果用了弹性布局，子元素不需要浮动；

父级属性：（子元素会产生的效果;）
1、justify-center:（子元素水平排列）
（center居中，flex-start默认居左，flex-end居右，space-between两端对齐无缝隙；space-around子元素距离左右间距一样）
2、align-items:（子元素垂直排列）
（center垂直居中；flex-start最上面，flex-end最下面，stretch默认值，baseline项目的第一行文字的基线对齐）
3、flex-direction:(子元素排列方向/排列方式）
（row默认横向排列，row-reverse横向翻转，column纵向排列，column-reverse纵向翻转）
4、flex-wrap:(子元素是否一行显示)
（nowrap默认值不换行，wrap换行，wrap-reverse换行，第一行在下方）
5、align-content:（子元素多行情况下的垂直排列,两列紧挨着的效果）
（flex-start上边，flex-end下边，stretch默认值）
6、flex-flow:（flex-direction和flex-wrap结合体简言之就是简写缩写;也就是两个值写一起）

基于ul li布局外层最好包一层div好控制布局；

子元素属性：（设置在子元素会使子元素产生的效果）
1、flex 1（auto） 0（none）指的是系数；
2、aligin-self 覆盖父级align-items垂直排列;
3、flex-grow:1; 定义子元素放大比例；假如有两个div一行的话可以使它占满；
4、order:规定子元素排列顺序，数值越小越靠前。
5、flex-shrink: 缩小比例；默认为1；负值对该属性无效；
6、flex-basis：auto（默认值）它可以设为跟width或height属性一样的值（比如350px），则子元素将占据固定空间；