循环数组flex四角布局

html ` import styles from './index.less'

const data = [

{ key: '1', name: '张三', style: {} },
{ key: '2', name: '李四', style: { 'justify-content': 'flex-end' } },
{ key: '3', name: '王五', style: { 'flex-direction': 'column-reverse' } },
{
  key: '4', name: '老六', style: {
    'justify-content': 'flex-start',
    'flex-direction': 'column-reverse',
    'align-items': 'flex-end'
  }
},

]

<div className={styles.bodyFlex}>
  {
    data.map(item => {
      return <div key={item.key} className={styles.item} style={{ ...item.style }}>
        <div style={{width:100,height:100,background:'red'}}>{item.name}</div>
        </div>
    })
  }
</div>

`

css

.bodyFlex { display: flex; flex-wrap: wrap; justify-content: space-around; height: 100%; .item { width: 50%; height: 50%; display: flex; } }