2

У меня есть листинг производителей, и мне необходимо, чтобы отсчет был не слева направо, а сверху вниз, и высота у родительского блока была фиксирована.

<div class="col-12 car-list2-col">
                <div class="car-list2_item"><a href="#">КамАЗ <span>152</span></a></div>
                <div class="car-list2_item"><a href="#">МаЗ <span>289</span></a></div>
                <div class="car-list2_item"><a href="#">Полуприцеп <span>398</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
                <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
            </div>

Вот стили родителя:

    display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 135px;
justify-content: flex-start;

у item'a стилей нет. Все встало нормально, но флекс все колонки распределил равномерно по всей ширине родителя.выглядит это так введите сюда описание изображения

Мне необходимо что бы колонки не распределялись равномерно по всей ширине а прибивались в лево. Кто-нибудь может помочь?

1
  • Напишите часть Вашего кода в специальный редактор кода. В редакторе поста есть сверху панелька. найдите иконку листа А4 с сиволами < > и вставьте туда код) link на стили указывать не надо) Commented 14 дек. 2018 в 16:50

2 ответа 2

2

.car-list2-col {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 135px;
  justify-content: flex-start;
}

.car-list2-col>div {
  padding: 0 15px;
}
<div class="col-12 car-list2-col">
  <div class="car-list2_item"><a href="#">КамАЗ <span>152</span></a></div>
  <div class="car-list2_item"><a href="#">МаЗ <span>289</span></a></div>
  <div class="car-list2_item"><a href="#">Полуприцеп <span>398</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
  <div class="car-list2_item"><a href="#">Краз <span>258</span></a></div>
</div>

1

Вы можете обернуть ваш код в <div style="display: inline-block;">, а классу "car-list2_item" добавить необходимые отступы

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.