justify-content 属性未在 main-axis 网格上对齐内容

Question

我正在为 CSS 使用顺风。我有一个简单的 div 有 3 children.

我希望他们在 main-axis 中有 space。这是我的全部代码：

<div className="grid grid-cols-12 text-white justify-between">
  <div className='col-span-5'>COL_SPAN_5</div>
  <div className='col-span-3'>COL_SPAN_3</div>
  <div className='col-span-3'>COL_SPAN_3</div>
</div>

但它不起作用。网格中的项目不会移动。

我尝试使用 justify-items-center 属性来查看是否有任何变化。有效。

使用 justify-between 或任何 justify-content 属性都不起作用。

它在原版中也不起作用 CSS。这是工作示例： https://codepen.io/anas-ansari/pen/xxparoM

我知道可以通过添加 gap-{n} 来修复它，但我希望在两者之间添加 space（无论如何都不能）。

我的问题是为什么我不能应用 justify-content 即使我已经看到（我认为）一些在 grid 上使用 justify-content 的例子？

你能帮帮我吗？

Answer 1

如果您想要 space 围绕以下项目： item1 <space> item2 <space> item3。您可以将 css 属性（例如：gap:20px;）添加到您的 .container class。在 Tailwind 中，class 名为 gap-{n}（例如：gap-4）。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="grid grid-cols-12  justify-between gap-4">
  <div class='col-span-5 bg-yellow-400'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-400'>COL_SPAN_3</div>
  <div class='col-span-3 bg-red-300'>COL_SPAN_3</div>
</div>

Answer 2

尽量放gap-4或gap-6

<div className="grid grid-cols-12 text-white justify-between gap-4">
  <div className='col-span-5'>COL_SPAN_5</div>
  <div className='col-span-3'>COL_SPAN_3</div>
  <div className='col-span-3'>COL_SPAN_3</div>
</div>

Answer 3

您可以使用属性 gap-4 或 space-x-4 中的任何一个。

 <script src="https://cdn.tailwindcss.com"></script>

<!-- using gap property -->
<div class="grid grid-cols-12 text-black bg-red-100 space-x-10 mb-10">
  <div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
  <div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>

<!-- using space-x property -->
<div class="grid grid-cols-12 text-black bg-red-100 gap-10 ">
  <div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
  <div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
  <div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>

justify-content 属性未在 main-axis 网格上对齐内容

justify-content property not aligning content on main-axis on Grid

html

css

next.js

tailwind-css

tailwind-ui

justify-content 属性 未在 main-axis 网格上对齐内容

justify-content property not aligning content on main-axis on Grid

html

css

next.js

tailwind-css

tailwind-ui

justify-content 属性未在 main-axis 网格上对齐内容