Как исправить css, чтобы держать 4 карты подряд, пока они выровнены по центру?
Столкнулись с проблемой со свойством css (Flex). У меня есть несколько карт, и я хочу, чтобы в строке было по 4 карты, чтобы, независимо от размера экрана, всегда было 4 карты в строке. Поскольку я использую элемент отображения как Flex, он настраивается в соответствии с размером экрана. Очень новичок в этой работе разработчика внешнего интерфейса, не могли бы вы проверить и исправить мое свойство CSS, чтобы выровнять 4 карты в ряд.
вот код: https://codesandbox.io/s/tender-feynman-we6n9s?file=/src/productsConfig.js
В основном здесь я хочу 4 карты в ряду.
Ваша карта может увеличиваться в ширину (например, на 25% ширины контейнера) или она должна оставаться прежнего размера?
тот же размер, чтобы сохранить
Ответы 4
Вы можете добавить flex-basis, он устанавливает размер окна содержимого, поэтому ваш css flex-basis: 25% на классе .react-card-flip
Обновлять
если вы не хотите увеличивать свое пространство, попробуйте следующее:
.react-card-flip:nth-child(3n+1):not(:first-child) {
break-after: always;
}
этот код просто нашел ваш 4-й элемент и добавил к нему разрыв. Просто попробуйте уменьшить свою страницу, используя ctrl + прокрутите мышь, чтобы увидеть. Это max 4 карт в ряду.
примерить песочницу
Я не хочу увеличивать расстояние между картами
Смотрите мое обновление, я думаю, что это самый простой способ.
кажется, не работает. Вы можете опубликовать рабочий код, используя коды и ящик
только что добавил ссылку на песочницу, она остается максимум 4 карты в строке
не работает: zjqvmh.csb.app . пожалуйста, используйте больший экран или используйте масштабирование, чтобы увидеть эффект
Вы имеете в виду ровно 4 карты в ряду, как МИН. 4 карты в ряду, так и МАКС. 4 карты в ряду?
4 карты в ряду
не очень работает на большом экране
не могли бы вы дать свой скриншот, мне нужно знать, в чем именно проблема.
Давайте продолжим обсуждение в чате.
Попробуйте добавить этот стиль в свой файл style.css для адаптивного автоматического переноса карточек на пространство.
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: calc(25% - 40px);
margin: 20px;
}
можешь выложить рабочий код. Я пытался, но не работал. вы можете использовать кодыandbox
Используя flex, и поскольку вы хотите, чтобы ширина карточек была фиксированной (300 пикселей), и предполагая, что вы работаете только на больших экранах, чтобы гарантировать отображение 4 элементов по 300 пикселей подряд, лучше также установить ширину Например, родительский элемент равен 1500 пикселей, в этом случае в одной строке будут отображаться только 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>почему-то это не работает в моем коде. Я обновил свой код, вы можете увидеть его там.. каким-то образом он настраивается в соответствии с размером экрана. не могли бы вы опубликовать рабочий код
В вашем коде вы должны применить CSS-часть карты к классу реакции-карты-переворота, а не к классу карты, потому что прямые дочерние элементы родительского элемента flex (контейнера) являются элементом с классом реакции-карты-переворота, а не карты , я обновил свой код, чтобы он был адаптирован к вашим именам классов, не могли бы вы проверить и сказать мне.
Спасибо, Амель. Я пробовал, когда экран меняется, поля между картами увеличиваются.
в основном ширина и высота карты не должны меняться. Единственное, должно быть 4 карты в ряд, а контейнер должен быть выровнен по центру. Невозможно исправить контейнер
Но что делать если ширина устройства 800px например, как отобразить 4 элемента по 300px в одну строку на устройстве шириной 800px?
Кроме того, если мы предполагаем, что вы используете свое приложение только на больших устройствах, я думаю, что идеальным решением будет зафиксировать также ширину контейнера, например, 1500 пикселей. В этом случае вы будете уверены, что только В одной строке будет отображаться 4 элемента размером 300px, не более.
на меньшем устройстве будет прокрутка. как вы сказали, если ширина контейнера фиксирована, это решит
Я обновил свой код здесь, вы можете проверить, и я добавил автоматическое поле, чтобы отображать элементы по центру.
Думал проблема в "неправильном уровне".
Нажмите "f12" в https://we6n9s.csb.app/, тогда вы увидите 1-й уровень "контейнер".
2-й уровень - "реагировать-перевернуть карту".
3-й уровень - "реагировать-перевернуть карту".
4-й уровень - "реагировать-карта-лицевая сторона".
5-й уровень - "карточка".
Может быть, вы могли бы использовать .react-card-flip, но не .card
.react-card-flip {
position: flex;
flex: 1 0 22%;
border: 1px solid red;
width: 22%;
height: 300px;
min-height: 50px;
}
ширина карты для меня остается постоянной.
Отвечает ли это на ваш вопрос? Флексбокс: 4 элемента в ряду