day17css3 flex布局 item属性

flex容器  是display的一个属性值  定义弹性伸缩盒容器类型  能将子类完全装入容器内（flex内）

默认不换行

ul(容器)

{

display:flex;

}

li(项目)

{

}

任何元素都可以设置flex布局

inline-flex 行内flex不支持margin:auto;

flex-wrap换行属性

flex-wrap:wrap;换行

flex-wrap:nowrap;不换行

flex-wrap:wrap-reverse对称

flex容器本身默认存在水平的主轴，以及与主轴垂直的交叉轴，所以每行有空行

flex-direction:column;垂直轴

flex-direction:row;行轴

flex-direction:row-reverse;对称行轴

flex-flow flex属性的复合写法

flex-flow:row-reverse wrap;

主轴方向上的对齐

justify-content:flex-start;左对齐

justify-content:flex-end;右对齐

justify-content:center;居中

justify-content:space-between;两端对齐，项目之间的距离相等

justify-content：space-evenly;项目与项目之间，项目与容器边框之间的间隔都相等

justify-content：space-around;每个项目两侧的间隔相等  每个项目两侧都有空白  距离是一样的

交叉轴的对齐方式 交叉轴是竖轴？

align-items设置交叉轴的子元素对齐方式

align-items:flex-start;设置交叉轴的起点对齐

align-items:flex-end;设置交叉轴的终点对齐

align-items:flex-center;设置与交叉轴中点对齐

align-items:stretch;默认值

交叉轴多行对齐方式

align-content:flex-start;

flex-end;flex-center;  都是全部行整体行动

align-content:space-between;两端对齐，项目之间的距离相等

align-content:space-evenly;项目与项目之间，项目与容器边框之间的间隔都相等

align-content:space-around;每个项目两端有间隔，间隔一样会叠加

圣杯布局

.item1{

flex:1;/*等分子类，自身算一份，从剩余空间中定义每个项目的比例*/

order:2;/*item的排列顺序，多个item时数值小的在前面*/

}