CSS2-3的盒模型

Css2定义了四种布局模式

1） 块布局：呈现文档的布局模式

2） 行内布局：呈现文本的布局模式

3） 表格布局：用格子呈现2D数据的布局模式

4） 定位布局：能够直接定位元素的布局模式，定位元素与其他元素没有关系。

Css3引入了Flexbox弹性盒模型

1） 屏幕和浏览器窗口发生改变也可以灵活调整

2） 指定伸缩项目沿着主轴或者侧轴将伸缩容器额外空间，分配到伸缩项目之外

3） 控制元素则页面上的布局方向

4） 在浏览器渲染中不按照文档流的先后顺序重排伸缩项目的顺序

概念

主轴，主轴方向：用户沿着一个伸缩容的主轴配置伸缩项目，主轴是主轴方向的延伸，伸缩容器的主轴，伸缩项目主要沿着这条轴进行布局。不一定是水平的，

取决于justify-content,如果为column，主轴的方向为纵向

主轴起点、主轴终点：伸缩项目放置在伸缩容器内的从主轴起点到主轴终点。

参数

Justify-content:主轴方向

column纵向/flex-start容器的开头/flex-end容器的结尾/center容器的中心/space-between项目之间有空白/space-round项目周围有空白/initial默认值（同flex-start）/inherit

Align-items:纵轴方向上的对齐方式

strech项目被拉伸，适应容器的高度/flex-start顶部/flex-end底部/baseline基线上/center中间/initial默认（strech）