css-flex弹性盒模型布局

一、了解flex

flex特性
当多个div子元素写在父容器，他们会并排在一行，父容器会自动调节子容器大小，使他们并排在一起，但不会容下无限个，会根据子容器中的内容决定，当内容多过父容器的大小时，其他的子容器会溢出在父容器外。
这时，可以通过flex-wrap对子容器进行换行。

当父容器display:flex时，子容器可以用margin居中，且子容器什么宽高都可以很好的自适应居中。flex给父容器加就可以，子容器不用加

作用在父容器的样式加给父容器，作用在子容器的项目加给子容器

#box{
   width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;}
#box1{
   width: 100px; height: 100px; background: red; margin: auto;}