英文:
Use tailwind grid with horizontally dynamic size of content (Masonry, but horizontal)
问题
I am trying to achieve dynamically display of span elements horizontally. 当没有足够的空间时，让它们移动到第二行，依此类推。 Right now it looks close but not what is expected the code to do. 这样看起来接近，但代码的实际效果与预期不符。 Here is the sandbox. 这是 sandbox。 And this is the code: 这是代码：
On image you can see how it is displayed now: 在图像上，您可以看到当前的显示方式：
The result should be something like this: 结果应该类似于这样：
Results in case if whitespace-nowrap is applied on the spans: 如果在这些 span 元素上应用 whitespace-nowrap，则结果如下：
If you look at Masonry style, it is similar to what I try to get, only the difference is that horizontal fitting is prioritized. 如果您查看 Masonry 样式，它与我想要的效果类似，唯一的区别是优先考虑了水平适应。
英文:
I am trying to achieve dynamically display of span elements horizontally. When there is no place left, let them move uncut on the second line and so on. Right now it looks close but not what is expected the code to do. Here is the sandbox. And this is the code:
export default function Home({ clientData }) {
return (
<div className="p-2 w-[200px] bg-white ">
{clientData.addons.map((addon, i) => {
return (
<span
key={"addon" + i}
className={
addon.value
? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
: "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
}
>{addon.label}</span>
);
})}
</div>
);
}
export async function getStaticProps() {
return {props: {clientData: {addons: [{ value: true, label: "test" },{ value: false, label: "test test" },{ value: false, label: "testtesttesttest" },{ value: false, label: "test a" },{ value: false, label: "test test 23" },{ value: false, label: "test 36" },],},},};
}
On image you can see how it is displayed now:
The result should be something like this:
Results in case if whitespace-nowrap is applied on the spans:
If you look at Masonry style, it is similar to what I try to get, only the difference is that horizontal fitting is prioritized.
答案1
得分: 1
考虑使用水平弹性布局，并允许换行。如果希望每行显示为“满行”，请通过grow类将flex-grow: 1应用于<span>元素。
function Home({ clientData }) {
return (
<div className="p-2 w-[200px] bg-white flex flex-wrap gap-2">
{clientData.addons.map((addon, i) => {
return (
<span
key={"addon" + addon.id + i}
className={
addon.value
? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
: "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
}
>
{addon.label}
</span>
);
// })
})}
</div>
);
};
const props = {
clientData: {
addons: [
{ value: true, label: "test" },
{ value: false, label: "test test" },
{ value: false, label: "testtesttesttest" },
{ value: false, label: "test a" },
{ value: false, label: "test test 23" },
{ value: false, label: "test 36" },
],
},
};
ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>);
你也可以考虑应用inline-block并使用margin来调整它们的间距，但你会失去一些控制：
function Home({ clientData }) {
return (
<div className="p-2 w-[200px] bg-white">
{clientData.addons.map((addon, i) => {
return (
<span
key={"addon" + addon.id + i}
className={`inline-block mr-2 mb-2 ${
addon.value
? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
: "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
}`}
>
{addon.label}
</span>
);
// })
})}
</div>
);
};
const props = {
clientData: {
addons: [
{ value: true, label: "test" },
{ value: false, label: "test test" },
{ value: false, label: "testtesttesttest" },
{ value: false, label: "test a" },
{ value: false, label: "test test 23" },
{ value: false, label: "test 36" },
],
},
};
ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>);
英文:
Consider using a horizontal flex layout that can wrap. If you would like each row to appear "full", apply flex-grow: 1 via the grow class to the <span> elements.
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: lang-js -->
function Home({ clientData }) {
return (
<div className="p-2 w-[200px] bg-white flex flex-wrap gap-2">
{clientData.addons.map((addon, i) => {
return (
<span
key={"addon" + addon.id + i}
className={
addon.value
? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
: "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
}
>
{addon.label}
</span>
);
// })
})}
</div>
);
};
const props = {
clientData: {
addons: [
{ value: true, label: "test" },
{ value: false, label: "test test" },
{ value: false, label: "testtesttesttest" },
{ value: false, label: "test a" },
{ value: false, label: "test test 23" },
{ value: false, label: "test 36" },
],
},
};
ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>)
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-700 text-white">
<div id="app"></div>
</body>
<!-- end snippet -->
You could also consider applying inline-block with margin to space them out, but you have a little less control:
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: lang-js -->
function Home({ clientData }) {
return (
<div className="p-2 w-[200px] bg-white">
{clientData.addons.map((addon, i) => {
return (
<span
key={"addon" + addon.id + i}
className={`inline-block mr-2 mb-2 ${
addon.value
? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
: "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
}`}
>
{addon.label}
</span>
);
// })
})}
</div>
);
};
const props = {
clientData: {
addons: [
{ value: true, label: "test" },
{ value: false, label: "test test" },
{ value: false, label: "testtesttesttest" },
{ value: false, label: "test a" },
{ value: false, label: "test test 23" },
{ value: false, label: "test 36" },
],
},
};
ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>)
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-700 text-white">
<div id="app"></div>
</body>
<!-- end snippet -->
答案2
得分: 0
flex-wrap flex gap-2 在主要的 <div> 中解决了问题：
英文:
flex-wrap flex gap-2 in the main <div> resolved the issue:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论