在两列中映射div元素

Question

我试图将任意数量的div放入两列中，如果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>
);
}

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

Answer 1

如果你尝试网格，试着用类名将其添加到你的div中"tradeWaterGrabSample"；

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>

如果这是你想要的(我不确定我是否理解你的目标(，你可以将这个样式添加到类名中，而不是添加内联样式

Answer 2

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

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

更新

我调整了你的代码沙箱以工作。这使用网格。你有一个div1->div2->项，项，项。你的造型在div1上。我将其移动到div2(项的父项(，并删除了flex box样式。你可以用display: "inline-grid"把桌子拧紧。我在每个项目周围添加了一个边距，并删除了项目标题上的右侧填充。编辑：。。。现在我看到你在做什么了。2列网格用于表格，flexbox用于标题&每个项目中的数据。我更新了代码沙盒，将flex样式放回原处(略有调整(。如果我最初的回应让你走错了路，我深表歉意。

这是沙箱链接。

return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div>
<div
style={{
display: "grid",
gridTemplateColumns: "auto auto",
marginBottom: "30px",
backgroundColor: "lightgoldenrodyellow"
}}
>
{sampleDetails.sampleObservations.map(function (item, i) {
return (
<div
key={i}
style={{
backgroundColor: "lightblue",
margin: "4px"
}}
>
<h4 variant="subtitle1">{item.name}:</h4>
<Typography>{item.value}</Typography>
</div>
);
})}
</div>
<div>something else</div>
</div>
</div>
);