display属性和flex grid布局

Display属性表

 

 

Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

 

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

属性：

1. flex-direction属性

flex-direction: row | row-reverse | column | column-reverse;

设置主轴的方向，也就是项目的排列方向

column          column-reverse;            row                 row-reverse            

1. flex-wrap属性

flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap属性定义，如果一条轴线排不下，如何换行

 

1. flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1.  justify-content属性

定义了项目在主轴上的对齐方式。

justify-content:flex-start|flex-end|center|space-between|space-around;