在两列中映射div元素-编程知识-白鹭情

我正在尝试将任意数量的 div 放入 2 列，如果 div/元素是奇数，那么最后一个会在两列的中心进行调整，如下所示..

但目前我将每个 div 放在一行中。

-

这是我的代码。

import "./styles.css";
import Typography from "@material-ui/core/Typography";

export default function App() {
const sampleDetails = {
sampleObservations: [
  {
    observationsId: 7,
    selected: true,
    value: "12:53",
    parentId: 2,
    name: "Time"
  },
  {
    observationsId: 4,
    selected: true,
    value: "11.4",
    parentId: 2,
    name: "Ph"
  },
  {
    observationsId: 8,
    selected: true,
    value: "12-03-21 2:06",
    parentId: 3,
    name: "Flow Date"
  },
  {
    observationsId: 9,
    selected: true,
    value: "120",
    parentId: 3,
    name: "Frequency"
  },
  {
    observationsId: 10,
    selected: true,
    value: "20",
    parentId: 3,
    name: "Sample Count"
  }
]
};

return (
<div className="App">
  <h1>Hello CodeSandbox</h1>
  <div
    style={{
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-around",
      marginBottom: "30px"
    }}
  >
    <div>
      {sampleDetails.sampleObservations.map(function (item, i) {
        return (
          <div
            key={i}
            style={{
              flexDirection: "row",
              display: "flex",
              justifyContent: "space-around",
              alignItems: "left"
            }}
          >
            <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
              {item.name}:
            </h4>
            <Typography>{item.value}</Typography>
          </div>
        );
      })}
    </div>
  </div>
  </div>
  );
}

运行示例可以在代码沙箱中找到：https ://codesandbox.io/s/stoic-cherry-trc7n?file=/src/App.js

uj5u.com热心网友回复：

将显示 flex 和 flex 方向放在父元素 (tradeWaterGrabSample) 而不是子元素上。还为您的每个孩子添加一个key=属性以map()使反应快乐。

{sampleDetails.sampleObservations.map(function (item, i) {
  return (
    <div
      key={i}     <---- add key= attribute
      style={{

uj5u.com热心网友回复：

你试过网格吗，试着用类名“tradeWaterGrabSample”把它添加到你的div中

style={{ display: "grid", gridTemplateColumns: "auto auto" }}

<div className="App">
      <h1>Hello CodeSandbox</h1>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "auto auto",
          flexDirection: "row",
          justifyContent: "space-around",
          marginBottom: "30px"
        }}
      >
        <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
          {sampleDetails.sampleObservations.map(function (item, i) {
            return (
              <div
                key={i}
                style={{
                  flexDirection: "row",
                  display: "flex",
                  justifyContent: "space-around",
                  alignItems: "left"
                }}
              >
                <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
                  {item.name}:
                </h4>
                <Typography>{item.value}</Typography>
              </div>
            );
          })}
        </div>
      </div>
    </div>