flex布局中的一些基本概念
容器和项目
什么叫容器
采用flex布局的元素被称作容器。
什么叫项目
在flex布局中的子元素被称作项目。
即父级元素采用flex布局,则父级元素为容器,全部子元素自动成为项目
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
容器的一些属性
有六个常用属性设置在容器上,分别为:
flex-directionflex-wrapflew-flowjustify-contentalign-itemsalign-content
flex-direction 属性
flex-direction 属性设置容器主轴的方向
.wrap{flex-direction:row | row-reverse | column | column=reverse;}
包含四个属性值:
row: 默认值,表示沿水平方向,由左到右。
row-reverse :表示沿水平方向,由右到左
column:表示垂直方向,由上到下
column-reverse:表示垂直方向,由下到上
.m-tree-end-node{display: flex;align-items: center;justify-content: center;height: 100%;}
.m-node{display: flex;align-items: center;justify-content: center;height: 200px;border:1px solid #ddd}