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

叁歲伎倆 2023-01-16 02:39 117阅读 0赞

闲来无事顺手写了个表格小栗子，很简陋，大概搭了一下壳。  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]

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;
            }
          }
          
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]: /images/20221022/c528c0720f4941afba1c88978a5fb7db.png