前端flex布局总结

1 启用flex:在 style中添加  display: flex

flex 父项常见排列方式

1  设定主轴的方向。

flex-direction:  row 横向  column 纵向

注意: 成员是按主轴方向排列的。设置成row 就是x轴  column就是y轴方向

2 设置主轴上子元素的排列方式。

justify-content： flex-start (默认值，从左到右)  flex-end center  space-between  space-around 

3 设置盒子换行。

在flex布局中，默认子元素是不换行，如果一行装不下时，会缩小元素的宽度，放到父元素中

flex-wrap: nowrap;  换行是wrap;

4 设置侧轴上的子元素排列方式

侧轴的概念是。若主轴是x，侧轴则是y，主轴是y，侧轴是x.默认情况下，主轴是x轴，此时侧轴的顺序默认是 从上到下。通过 align-items 更改侧轴的顺序

align-items只能设置单行的格式。align-content用来设置多行时的排列方式

6 设置主轴方向和是否换行

flex-flow属性是 flex-direction和flex-warp属性的复合属性.

flex-flow:row wrap