弹性布局怎么整

盒子模型box-sizing：

content-box 平时的普通盒子，加padding，border，盒子会变大，向外扩展
border-box 加padding，border，盒子并不会变大，向内扩展

用于运算长度的calc(运算公式)

可以+ - * /
calc(20%-10px) ×
calc(20% - 10px) √
“-”在css中可以是连接符，所以要用空格将其隔开

弹性盒子

父级：
display：flex
*用弹性布局后，子元素的float，position等就会失效了
justify-content： 子元素的水平排列方式
center： 居中
space-between： 两端对齐
space-around： 子元素拉手对齐，平均分配
flex-start： 居左（开始处）
flex-end： 居右（结尾处）
align-items： 子元素的垂直排列方式
center： 居中
flex-start： 居上（开始处）
flex-end： 居下（结尾处）
align-content： 多行时的垂直排列方式
center： 居中
flex-direction： 排列方式
row： 横向排列
row-reverse： 横向翻过排列
column： 纵向排列
column-reverse： 纵向翻过排列
flex-wrap： 子元素是否在一行显示
nowrap： 不换行
wrap： 换行

子元素：

flex：1 //1是一个系数
*把父元素宽度划分成几份，占几份；在划分前会刨除固定的尺寸
flex-grow：1 定义子元素放大的比例
order： 排序，定义子元素的顺序
*数值越小越靠前；默认值为0
所写博客皆为自己的心得，如有错误欢迎指出，侵删，谢谢