Reactjs 元素没有按照正确的响应引导正确设计样式

简单介绍一下我的代码，我有一个代码，它从数组中获取数据，映射到它们，然后像这样显示卡片：

我使用justify-content:flex-end编写了代码，这样它们就粘在右边了，并且工作正常，但是如果我从数据中删除了一个元素，就会发生这种情况：

因此，正如您所看到的，它们不再是正确的，我如何使其响应，无论我有多少数据，它将始终是flex-end

code.js：

      const measurment = [
    { title: "Last Blood Pressure", value: "90/60",unit:"mmhg",subValue:"85 BPM",date:"05/14/2020 04:12",style:{color:'yellow'}},
    { title: "Last Body Weight", value: "154",unit:"lb",subValue:"13% Fat",date:"05/14/2020 04:12"},
    { title: "Last SpO2", value: "98",unit:"%",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { title: "Last Glucose", value: "200",unit:"mg/dl",subValue:"",date:"05/14/2020 04:12",style:{color:'red'}}
]
const style = {
  width: "auto",
  height:"auto",
}
return(
<div style={{justifyContent:'flex-end'}} className="container">
      <div className="row">
      {measurment.map(measurment => {
          return (
            <div style={style} className="col-lg-3 col-md-3 col-sm-12 col-xs-12">
              <Card
                style={measurment.style}
                title={measurment.title}
                value={measurment.value}
                unit = {measurment.unit}
                subValue={measurment.subValue}
                date={measurment.date}
              />
            </div>
          )
        })
      }
</div>
</div>
)}

常数测量=[
{标题：“上次血压”，值：“90/60”，单位：“毫米汞柱”，子值：“85次/分钟”，日期：“05/14/2020 04:12”，样式：{颜色：'yellow'}，
{标题：“最后一次体重”，数值：“154”，单位：“磅”，分项数值：“13%脂肪”，日期：“05/14/2020 04:12”}，
{标题：“最后一次SpO2”，值：“98”，单位：“%”，子值：“85 BPM”，日期：“05/14/2020 04:12”}，
{标题：“最后一次葡萄糖”，值：“200”，单位：“mg/dl”，子值：，日期：“05/14/2020 04:12”，样式：{颜色：'red'}
]
常量样式={
宽度：“自动”，
高度：“自动”，
}
返回(
{measurement.map（measurement=>{
返回(
)
})
}
)}

您必须将

柔性端

css应用于

行

，而不是

容器

.row

div是一个块，因此它将是100%宽度，因此将其向左或向右对齐不会改变任何东西

以下是一个例子：

此外，如果您使用Boostrap 4，您可以简化卡类：

className="col-lg-3 col-md-3 col-sm-12 col-xs-12"

成为

className="col-md-3 col-lg-3"

---

defaut size是

col-12

如何删除用于测量的元素？@buzatto我编辑了代码并添加了测量数据，例如，我可以从中删除一行