看了阮一峰老师的博客,自己总结一下,原文地址
flexbox
任何一个容器都可以指定为flex布局;
flex容器(父级),flex项目(子级);
容器存在两根轴:
水平方向主轴(main axis);
垂直方向交叉轴(cross axis);
主轴的开始位置(与交叉轴的交叉点)main start;
主轴的结束位置 main end;
交叉轴的开始位置 cross start;
交叉轴的结束位置 cross end;
项目默认沿着主轴方向排列;
单个项目占据主轴的空间:main size;
占据交叉轴的空间:cross size;
容器的属性:
flex-direction
flex-wrap;
flex-flow
justify-content
align-items
align-content
flex-direction:决定项目的排列;