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
网友评论