flex布局

flex布局

1、只能对直接子元素有影响

 

flex-direction：row | column

1、表示布局的方向，[row]在行方向上布局，[column]在列方向上布局。

 

justify-content：flex-start | flex-end | center | space-between | space-around

2、弹性项目在主轴main-axis的对齐方式

 

align-items：flex-start | flex-end | center |stretch

1、表示在垂直方向上的布局情况