css3弹性盒子

css3弹性盒子

1）box-sizing:content-box;

普通的盒子模型，加padding和border时盒子会变大，向外扩展

2） box-sizing:border-box;

盒子模型，加padding和border时，盒子不会变大，向内扩展

父元素

3） justify-content–规定子元素在水平方向位置

属性值：
flex-start：居左对其
flex-end：居右对齐
center：水平居中对齐
space-between：将第一个子元素布局在最左处，将最后一个子元素布局在最右处，将空白部分平均分配在所有子元素与子元素之间。
space-around： 将空白部分平均分配在以下几处：左边界与第一个子元素之间、各子元素与子元素之间、最后一个子元素与右边界之间。

如图所示：灰色区域为空白

4） align-items–规定子元素在垂直方向的位置

属性值
center：垂直居中对齐
flex-start：居上对其
flex-end：居下对其
stretch：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）。
baseline：如果子元素的布局方向与容器的布局方向不一致，则该值的作用等效于flex-start属性值的作用。如果子元素的布局方向与容器的布局方向保持一致，则所有子元素中的内容沿基线对