Ashlis
@Ashlis

Как расположить элементы внутри контейнера, чтобы они были одинаковы?

Тут пример расположения элементов в контейнере, которым я пользуюсь на своих проектах.

Тут есть 2 удобные для меня вещи.
1) Возможность делать подобные блоки без медиа запросов, они сразу же адаптивны для всех экранов
2) И то как они выстраиваются - когда 1 или любое кол-во элементов падают на нижнюю строку они прибиваются к краю контейнера пропорционально остальным элементам.

Но тут есть фантомные элементы <div class="box__item empty">, которые приходится использовать в качестве заполнителей пустого пространства нижней строки.Хочу от них избавится.
Буду рад если накидаете свои варианты реализации подобного блока!
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 3
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Обычным гридом с auto-fit
https://jsfiddle.net/kxpfm98q/
Ответ написан
Oleg714
@Oleg714
Не совсем понял вопроса но вот так без блоков работает как и с блоками:
html{overflow-x:hidden}
body{
margin: 0;
padding: 0;
}

.empty{
opacity: 0;
visibility: hidden;
height: 0 !important;
max-height: 0;
min-height: 0 !important;
padding-bottom: 0;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}

.container{
max-width: 600px;
margin: 0 auto;
}

.box{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: calc(100% + 30px);
margin-left: -15px;
}

.box__item{
width: 100px;
max-width: 100%;
height: 60px;
background-color: red;
margin: 0 15px 30px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы