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）
网友评论