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 на стили указывать не надо) 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" добавить необходимые отступы

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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