我想構建一個 MUI 容器，其中包含幾個要行內呈現但由固定填充分隔的子組件。我可以這樣做：
<Box sx={{display: 'flex', '& > * *': {ml: 2}}>
<div>Thing 1</div>
<div>Thing 2</div>
</Box>
好的，但有點亂。什么是首選的 MUI/CSS 技術，用于以固定間距（即，不在網格中）排列組件？
uj5u.com熱心網友回復：
有很多方法可以做到這一點，但我認為最干凈的是使用 flex 和 grid gap（特別是因為我的大多數布局已經使用 flex 水平/垂直對齊）。
<Box sx={{display: 'flex', gap: 2}}>
<div>Thing 1</div>
<div>Thing 2</div>
</Box>
或者用一個盒子，甚至：
<Box display="flex" gap={2}>
<div>Thing 1</div>
<div>Thing 2</div>
</Box>
有關此屬性的詳細資訊，請參閱 mozilla 檔案：https ://developer.mozilla.org/en-US/docs/Web/CSS/gap
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497016.html