002--css3-flex布局

一、布局

• 传统的布局：盒子模型
  • content-box--平时普通的盒子模型（向外扩展）
  • 平时普通的盒子，添加padding，border，盒子会变大
• box-sizing：border-box--整体的盒子模型不变大（向内扩展）

二、盒子模型用途

• calc(公式)
• width：calc(25% 空格- 空格10px)
• -是为了区别连接符

三、flex布局

• 父级：display：flex
• 添加浏览器前缀： -webkit- ；真是工作，postCss插件（自动添加前缀）
• 水平居中一个盒子

position: absolute;
     left: 50%;
     top: 50%;
     /*margin-left:-100px;*/
     /*margin-top:-100px;*/
     transform: translate(-50%,-50%)

• 如果父级用了弹性布局，子元素就不需要浮动了
• 父级身上的其它属性
  -justify-content：center 子元素水平排列方式(center:居中，flex-start:居左 flex-end：居右 space-between：两端对齐 space-around：子元素拉手分布)
• 垂直排列
  • align-items:子元素的垂直排列
  • center 垂直居中 flex-start 开始 flex-end 底部