一、传统的盒子模型（margin、border、padding、content）

在这里插入图片描述

当我们并列书写多个div标签，它们会纵向向下排位

在这里插入图片描述

如果我们想将多个div并列成一排，就得借助{float: left/right}属性，别看只一行，要考虑的很多，比如清除浮动、换行、溢出、高度塌陷等的一系列问题，这便是传统的盒模型做法，不方便。

二、FlexBox弹性盒子模型

FlexBox弹性盒子模型

flex布局通过为修改父div的display属性，让父元素成为一个flex容器，在容器里面就可以随便操作子元素(项目)的排列，也是只需一行{display:flex},并且无后顾之忧。
在这里插入图片描述
【注意】设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
【注意】IE 9 及更早版本不支持 flex 属性.
【注意】IE10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。

1.容器的属性（父元素的属性）

1.1flex-direction属性

取值：row(默认横向排列1-2-3) | column(纵向排列) | row-reverse(反横向3-2-1)| column-reverse(反纵向)
flex-direction属性

1.2.flex-wrap属性

取值：nowrap(默认不换行) | wrap(换行) | wrap-reverse(反换)
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，由下往上排，效果与wrap相反
flex-wrap属性

1.3.flex-flow属性

lex-flow属性是flex-deriction与flex-wrap的属性集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

1.4.justify-content属性(处理横轴对齐方式)

1.5.align-items属性(处理纵轴对齐方式)

取值:flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，占满整个容器。记几个常用的好了。
align-items属性
【注意】:常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

1.6.垂直水平居中（最重要）

最后要记住的便是这垂直水平居中,仅一句。
{justify-content:center;align-items:center}
垂直水平居中（最重要）

2.项目的属性（子元素的属性）

2.1.flex-grow

取值：默认0，分配的是剩余的父亲的长度，即下图所示，父亲总长度-项目原定长度=剩余长度，flex-grow的数值是取剩余长度的份额
[注意]，即便项目设置了固定宽度，也会放大。
在这里插入图片描述