将React Components对准容器底部

Posted 2023-01-15

我具有以下组件：

<div style=display: 'flex', verticalAlign: "bottom">
        <FormControl fullWidth margin="normal" className="col-3">
          <InputLabel style=colorStyle htmlFor=field_meta.name>field_meta.title</InputLabel>
          <Input
            id=field_meta.name
            defaultValue=field_meta.value? field_meta.value.id: ""
            value=this.state.fieldContent
            onChange=this.handleChange
            margin="normal"
            startAdornment=field_meta.error &&
              <InputAdornment position="start">
                <i style=color: "red" className="zmdi zmdi-alert-circle zmdi-hc-fw"/>
              </InputAdornment>
            
            endAdornment=
              <InputAdornment position="end">
                <IconButton
                  aria-label="Buscar Valor"
                  onClick=this.handleSearchClick
                >
                  <i className="zmdi zmdi-search" onClick=this.handleSearchClick />
                </IconButton>
              </InputAdornment>
            
          />
          () => 
            if (field_meta.error) 
              return <FormHelperText style=color: "red">field_meta.error</FormHelperText>
             else if ( field_meta.originalValue) 
              return <FormHelperText style=color: "orange">Los cambios aún no se han guardado</FormHelperText>
             else 
              return null;
            
          
        </FormControl>
        this.state.currentValue.id ? 
          <div className="col-9"><span>[this.props.field_meta.value.id]this.props.field_meta.value.text</span></div> : 
          <h2 className="col-9"></h2>
      </div>

我希望input和span对准容器的底部。我尝试了一些建议，但总是得到相同的结果：

答案

获得所需属性的css属性是这样的：

style=display: 'flex', align-items: "flex-end"

请注意，默认情况下flex的方向为row

通过执行以下操作，您还可以在方向为flex-direction: column时获得位于底部的项目：

style=display: 'flex', flex-direction: 'column', justify-content: 'flex-end'

还请记住，flex影响直系子代，因此，快速浏览一下代码，您不应该将flex应用于div，而应将其应用于FormControl组件