HTML弹性布局

表格：上手容易，对齐简单，维护较难，不太灵活

盒子模型：应用float排版，父子兄弟元素之间的垂直对齐难以处理

行内块元素：应用 display:inline-block 和 vertical-align ，父子元素垂直对齐难以处理，默认有一些margin，难以处理

定为布局：灵活，但是维护差，父元素不能自适应子元素高度（往往在做特效时应用，二不适用于普通排版）

 

弹性布局：

父元素关键设置

display:flex

flex-direction:  row/column(子元素的排列方式)

flex-wrap:  wrap/no-wrap(子元素排不下是是否自动换行或换列)

justify-content:  center/space-around/space-between/flex-start/flex-end(表示子元素在主轴方向上的对齐方式)

align-items:  center/flex-start/flex-end(表示子元素在交叉轴方向上的对齐方式)

子元素设置：

宽度设置

flex:flex-grow/flex-shrink/basis