#javascript #html #css #reactjs #responsive-design
#javascript #HTML #css #reactjs #адаптивный дизайн
Вопрос:
У меня возникли проблемы с адаптивным компонентом, который масштабирует некоторые кнопки с пропорциональной шириной, но с постоянными пробелами.
В приведенном ниже примере все маленькие стрелки имеют размер 15 пикселей, и я хочу, чтобы кнопки увеличивались или уменьшались в зависимости от максимальной ширины моего поля, но пробелы оставались постоянными. Я попробовал это свойство: calc((100% / ${allEleemnts}) - (${spaces} / 2)) ,
Но я не совсем получаю одинаковое пространство между всеми элементами, когда страница масштабируется вверх или вниз. Я был бы очень признателен за отзывы о моей попытке и от людей, которым удалось увеличить ширину некоторых элементов, сохраняя при этом некоторые постоянные пробелы между ними.
Комментарии:
1. Можете ли вы показать нам, что вы уже пробовали?
2. Свойство gap решило проблему. На самом деле, я пытался создать компонент, который инкапсулировал гибкий компонент. Это не сработало. Я переключился, используя сетку в качестве родительского компонента, затем я установил разрыв между каждым дочерним элементом.
Ответ №1:
Лучшим способом реализовать это было бы с помощью CSS Grid, где вы получите доступ к свойству css
gap: 10px; /* 10px is just an example*/
Это даст вам больше контроля над вашим макетом и даст согласованные пробелы, что сделает его более отзывчивым.
Вы можете узнать о сетке CSS через: https://www.w3schools.com/css/css_grid.asp
Комментарии:
1. Большое спасибо, это действительно решило мою проблему, свойство gap позволило добиться идеальной отзывчивости. Я действительно ценю вашу помощь, хорошего дня!
2. Рад, что смог помочь, счастливого кодирования!