Почему мои элементы flexbox не располагаются рядом друг с другом?

У меня есть контейнер Flexbox со следующим SCSS:

.picker {
  height: 75px;
  width: 100%;
  display: flex;
  flex-flow: column wrap;
}

Мои гибкие элементы имеют следующий SCSS:

.pickeritem {
  height: 25px;
  width: 130px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

Проблема, с которой я сталкиваюсь, заключается в том, что контейнер переносит элементы в центр div, а не рядом с другими элементами, например:

Как сделать так, чтобы элементы с 3 по 8 переносились рядом друг с другом, оставляя все пустое пространство справа от div?

Можно ли этого достичь без использования какой-либо методологии строк и столбцов?

javascript flexbox

11.12.2020 12:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

626

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать

.picker {
  height: 75px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
}

.pickeritem {
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

justify-content:flex-start я считаю, что это значение по умолчанию. Я все равно вставил его, но, как я и ожидал, это ничего не сделало.

— 11.12.2020 13:13

Я думаю, это потому, что вы зафиксировали ширину flex-item = 130px, удалите это свойство ширины из flex-item

— 11.12.2020 13:16

11.12.2020 13:01

Ответ принят как подходящий

Попробуйте использовать свойство align-content. Я также внес некоторые другие незначительные изменения и добавил цвет и рамку для лучшей визуализации.

.picker {
  height: 75px;
  width: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 1px solid black;
}



.pickeritem {
  height: 25px;
  width: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0 10px;
  background-color: #fbbdbd;
}

<div class='picker'>
  <div class='pickeritem'>1</div>
  <div class='pickeritem'>2</div>
  <div class='pickeritem'>3</div>
  <div class='pickeritem'>4</div>
  <div class='pickeritem'>5</div>
  <div class='pickeritem'>6</div>
  <div class='pickeritem'>7</div>
  <div class='pickeritem'>8</div>
  <div class='pickeritem'>9</div>
<div>

11.12.2020 13:18

Другие вопросы по теме

Адаптивное изображение с гибкой оберткой

Что такое css display:contents?

HTML автоматически меняет строку флажка

Направление увеличения ширины блока?

Центрирование горизонтали по правому столбцу, чтобы текст находился посередине экрана

Как сделать две колонки с помощью CSS?

Как исправить css, чтобы держать 4 карты подряд, пока они выровнены по центру?

Как создать динамическую панель навигации с одной зоной переноса элементов и одной зоной без переноса элементов

В контейнере с flex-grow: 1 содержимое переполняется, когда оно должно прокручиваться

Соотношение ширины для div/столбцов в flex-боксе

Почему мои элементы flexbox не располагаются рядом друг с другом?

Ответы 2

Другие вопросы по теме

Похожие вопросы