CSS之flex布局

/*启用flex布局*/
display: flex;

布局方式

/*居中*/
justify-content: center;
/*间距在腾讯盒子（子级）之间*/
justify-content: space-between;
/*所有地方的间距都相等*/
justify-content: space-evenly;
/*间距加在子级的两侧*/
justify-content: space-around;

垂直水平居中

align-items: center;
justify-content: center;

 

 修改主轴方向

flex-direction: column;

 超过主轴长度换行

flex-wrap: wrap;

 行对齐方式

align-content: center;
align-content: space-around;
align-content: space-between;

列对齐方式

justify-content: space-evenly;

 换行

flex-wrap: wrap;