Question

弹性盒模型

Answer 1

1、所有子元素横向排列；
2、即便子元素是块元素，宽度也由内容撑起；
3、弹性盒模型的父元素不会出现高度塌陷；
4、一旦形成弹性盒模型，在子元素没有设置高度时，默认和父元素高度一致；
5、子元素永远不会溢出，即便写了宽度，也会被缩减，被压扁；
6、子元素为行内元素时，自动变为块元素的表现形式，可以设置宽高。

区别:
flex-direction,改变了轴的方向，所以排列顺序发生了改变。
justify-content 只是对其方式的改变。

flex-start：以顶对齐，没有高度的由内容撑起。
center：以元素高度中间对齐。
stretch：以顶对齐，没有高度的默认等于父元素的高度。
baseline ：以文字基线对齐。

align-content和justify-content有点像，区别是justify-content用于main-axis的对齐，而align-content用于多行在容器内的对齐方式。因此一定要多行（ 必须flex-wrap: wrap且容器不足以将所有元素放入一行内 ）才能出效果，如果容器内就一行是没有效果的。

父元素宽度300px，两个子元素共计150px，剩余150px，
第一个p标签flex-grow: 1; 分得150/（1+2）*1=50px 最后宽度100+50=150px；
第二个p标签flex-grow: 2; 分得150/（1+2）*2=100px 最后宽度50+100=150px；

父元素宽度200px，两个子元素共计400px，溢出200px，
第一个p标签flex-shrink: 1; 裁去300*1/(300*1+100 2) 200
第二个p标签flex-shrink: 2; 裁去100*2/(300*1+100 2) 200

效果相当于width

flex:1;
flex：1 1 0;(依次为flex-grow, flex-shrink, flex-basis)
含义：当有多余空间时全部分配给此元素，当有溢出时，从这个元素上缩减，宽度为0（之前如果写了宽度则失效）

设置元素自身在侧轴上的对齐方式。

弹性盒布局尽量不要使元素脱离文档流，否则整个布局就会混乱。尽量不适用以下属性：
float:left | right;
clear:both;
position:absolute;