如何修复CSS以保持4张卡片在一行,并使它们居中对齐?

huangapple go评论78阅读模式
英文:

How to fix the css to keep 4 cards in a row while they are center aligned?

问题

遇到一个与CSS属性(Flex)有关的问题。我有多个卡片,希望每行有4个卡片,这样无论屏幕大小如何,都始终每行有4个卡片。由于我使用的显示元素是Flex,它会根据屏幕大小进行调整。我在前端开发方面非常新,请您检查并修复我的CSS属性,以使4个卡片在一行中对齐。

这是代码:
https://codesandbox.io/s/tender-feynman-we6n9s?file=/src/productsConfig.js

基本上我希望每行有4个卡片。

英文:

Facing an issue with a css property (Flex) . I have multiple cards and i want it to be 4 cards per row so that irrespective for screen size it will always have 4 cards per row. Since i am using display element as Flex it adjusted according to screen size. Very new to this front end dev work, can you please check and fix my CSS property to align 4 cards in a row.

here is the code:
https://codesandbox.io/s/tender-feynman-we6n9s?file=/src/productsConfig.js

Basically here i want 4 cards per row.
如何修复CSS以保持4张卡片在一行,并使它们居中对齐?

答案1

得分: 1

你可以添加flex-basis,它设置内容框的大小,所以在类.react-card-flip上使用CSS flex-basis: 25%

更新

如果你不想增加空间,那么尝试这个:

.react-card-flip:nth-child(3n+1):not(:first-child) {
  break-after: always;
}

这段代码简单地找到了你的第四个元素并在其上添加了一个分页符。尝试使用ctrl +滚动鼠标来减小你的页面,每行最多只能容纳4张卡片。

sandbox上尝试。

英文:

You can add flex-basis, it sets the size of the content box, so your css flex-basis: 25% on class .react-card-flip

Update

if you don't want increase your space then try this:

.react-card-flip:nth-child(3n+1):not(:first-child) {
  break-after: always;
}

this code just simply found your 4th element and add a break on it. Just try to decrease your page using ctrl + scroll your mouse to see. It max 4 cards per row.

try on sandbox

答案2

得分: 0

尝试将以下样式添加到你的style.css文件中,以实现响应式的自动卡片换行布局:

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: calc(25% - 40px);
  margin: 20px;
}
英文:

Try with adding this style to your style.css file for responsive auto card wrap on space.

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: calc(25% - 40px);
  margin: 20px;
}

答案3

得分: 0

使用flex布局,假设你希望卡片的宽度是固定的(300px),并且假设你只在大屏幕上工作,为了确保每行显示4个宽度为300px的元素,最好也将父元素的宽度设置为1500px,例如,在这种情况下,只有4个带有边距和内边距的元素会显示在一行中。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1500px;
  justify-content: center;
  margin: auto;
}

.react-card-flip {
  flex: 1 0 300px;
  border: 1px solid red;
  margin: 5px;
  min-height: 50px;
}
<div class="container">
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
</div>
英文:

Using flex, and since you want the width of the cards to be fixed (300px), and assuming you're only working on large screens, to guarantee displaying 4 elements of 300ps in a row, it's best to also set the width of the parent to 1500px for example, in this case only 4 elements with margins, paddings will be displayed in a single row.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1500px;
  justify-content: center;
  margin: auto;
}

.react-card-flip {
  flex: 1 0 300px;
  border: 1px solid red;
  margin: 5px;
  min-height: 50px;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;react-card-flip&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案4

得分: 0

我认为问题是"不正确的级别"。

https://we6n9s.csb.app/ 中按 "f12" 键,然后您将看到以下级别:
第1级是 "container"。
第2级是 "react-card-flip"。
第3级是 "react-card-flipper"。
第4级是 "react-card-front"。
第5级是 "card"。

也许你可以使用 .react-card-flip 而不是 .card

.react-card-flip {
  position: flex;
  flex: 1 0 22%;
  border: 1px solid red;
  width: 22%;
  height: 300px;
  min-height: 50px;
}
英文:

I thought the problem is "incorrect level".

Press "f12" in https://we6n9s.csb.app/, then you will see the 1st level is "container".<br>
The 2nd level is "react-card-flip".<br>
The 3rd level is "react-card-flipper".<br>
The 4th level is "react-card-front".<br>
The 5th level is "card".<br>

Maybe you could use .react-card-flip but not .card

.react-card-flip {
  position: flex;
  flex: 1 0 22%;
  border: 1px solid red;
  width: 22%;
  height: 300px;
  min-height: 50px;
}

huangapple
  • 本文由 发表于 2023年2月8日 15:16:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/75382451.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定