css-flex布局模仿表格小例子

闲来无事顺手写了个表格小栗子，很简陋，大概搭了一下壳。
效果图：

const data=[//定义数据
    {
      key:1,
      name:'胡萝卜',
      other:[
        {
          chengpin:'胡萝卜块sdfsv的好几个上课表达方式看地方很多风格化法国发挥规范化   ',
          danwei:20,
          beizhu:'1cmdsf'
        },
        {
          chengpin:'胡萝卜块',
          danwei:20,
          beizhu:'1cmdsf'
        },
        {
          chengpin:'胡萝卜块',
          danwei:20,
          beizhu:'1cmdsf'
        }
      ]
    },
    {
      key:2,
      name:'胡萝卜2',
      other:[
        {
          chengpin:'胡萝卜块',
          danwei:20,
          beizhu:'1cmdsf'
        },
        {
          chengpin:'胡萝卜块',
          danwei:20,
          beizhu:'1cmdsf'
        },
        {
          chengpin:'胡萝卜块',
          danwei:20,
          beizhu:'1cmdsf'
        }
      ]
    }
  ];

		<div className={styles.box}>
          <div className={styles.row}>
            <div className={styles.left}>原料</div>
            <div className={styles.right + ' ' +styles.diff}>
              <div>成品</div>
              <div>单位</div>
              <div>备注</div>
            </div>
          </div>
            {
                data.map(item=>{//react的数组遍历
                  return (
                    <div className={styles.row}>
                      <div className={styles.left}>{item.name}</div>
                      <div className={styles.linerow}>
                      {
                        item.other.map(item=>{
                          return(
                            <div className={styles.lineright}>
                              <div>{item.chengpin}</div>
                              <div>{item.danwei}</div>
                              <div>{item.beizhu}</div>
                            </div>
                          )
                        })
                      }
                      </div>
                    </div>
                  )
                })
              }
        </div>

.box{
  background-color: #999;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .row{
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    width: 90%;
    margin: 5px 0;
    display: flex;
    .left{
      width: 25%;
      display: flex;
      align-items: center;
    }
    .right{
      width: 75%;
      display: flex;
      justify-content: space-between;
      div{
        white-space: nowrap;
        width: 33%;
      }
    }
    .linerow{
      width: 75%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .lineright{
        display: flex;
        justify-content: space-between;
        div{
          width: 33%;
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          align-items: center;
          border: 1px solid #f0f0f0;
        }
      }
      
    }
  }
}