Блог

Главная - Вопросы по программированию - Почему мои элементы flexbox не обтекаются рядом друг с другом?

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

#javascript #flexbox

#javascript #flexbox

Вопрос:

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

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

Мои элементы flex имеют следующие SCSS:

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

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

введите описание изображения здесь

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

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

Ответ №1:

Попробуйте использовать свойство 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>

Ответ №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;
}

Комментарии:

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

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