0

Есть 10 элементов шириной 30px нужно с применением флексбокс выровнять их по горизонтали в родителе шириной 200px чтобы получилось по 5 элементов в 2 строки. Вот пример кода:

.filter__select-color {
	justify-content: space-between;
	flex-wrap: wrap;
	height: 70px;
}

.color__item {
	max-width: 30px;
	height: 30px;
	border-radius: 3px;
	background: #454a4d;
	flex-basis: 30px;
	cursor: pointer;
}
<div class="filter__select-color">
  <div class="color__item color_black"></div>
  <div class="color__item color_orange"></div>
  <div class="color__item color_blue"></div>
  <div class="color__item color_lightblue"></div>
  <div class="color__item color_green"></div>
  <div class="color__item color_gray"></div>
  <div class="color__item color_sand"></div>
  <div class="color__item color_white"></div>
  <div class="color__item color_pink"></div>
  <div class="color__item color_beige"></div>
</div>

Уже голову сломал над этим. Что я делаю не так?

2 ответа 2

1

.filter__select-color {
    width: 200px;
    display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.color__item {
    flex:0 0 30px;
    width: 30px;
    height: 30px;
    margin: 5px;
	border-radius: 3px;
	background: #454a4d;
	cursor: pointer;
}
<div class="filter__select-color">
  <div class="color__item color_black"></div>
  <div class="color__item color_orange"></div>
  <div class="color__item color_blue"></div>
  <div class="color__item color_lightblue"></div>
  <div class="color__item color_green"></div>
  <div class="color__item color_gray"></div>
  <div class="color__item color_sand"></div>
  <div class="color__item color_white"></div>
  <div class="color__item color_pink"></div>
  <div class="color__item color_beige"></div>
</div>

1

.filter__select-color {
  display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	height: 70px;
  width: 200px;
  border: 1px solid red;
}

.color__item {
	max-width: 30px;
	height: 30px;
  margin: 0 2px;
	border-radius: 3px;
	background: #454a4d;
	flex-basis: 30px;
	cursor: pointer;
}
<div class="filter__select-color">
  <div class="color__item color_black"></div>
  <div class="color__item color_orange"></div>
  <div class="color__item color_blue"></div>
  <div class="color__item color_lightblue"></div>
  <div class="color__item color_green"></div>
  <div class="color__item color_gray"></div>
  <div class="color__item color_sand"></div>
  <div class="color__item color_white"></div>
  <div class="color__item color_pink"></div>
  <div class="color__item color_beige"></div>
</div>

Еще вариант с маргинами:

.filter__select-color {
  display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	height: 70px;
  width: 200px;
}

.color__item {
	max-width: 30px;
	height: 30px;
	border-radius: 3px;
	background: #454a4d;
	flex-basis: 30px;
	cursor: pointer;
  margin-right: 10px;
}

.color__item:nth-child(5n) {
  margin-right: 0;
}
<div class="filter__select-color">
  <div class="color__item color_black"></div>
  <div class="color__item color_orange"></div>
  <div class="color__item color_blue"></div>
  <div class="color__item color_lightblue"></div>
  <div class="color__item color_green"></div>
  <div class="color__item color_gray"></div>
  <div class="color__item color_sand"></div>
  <div class="color__item color_white"></div>
  <div class="color__item color_pink"></div>
  <div class="color__item color_beige"></div>
</div>

4
  • Из представленных ответов ваш наиболее подходящий, но все равно немного не то. Разве без маргинов обойтись нельзя? У flexbox есть замечательное свойство justify-content: space-between вот на подобии его принципа работы мне и нужна структура чтобы крайние к границам блока элементы (1,5,6,10) оставались без отступов. 14 дек 2016 в 9:36
  • @ConstantineShibaev все верно. Css свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси., space-between: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве. Т.к. ширина блоков 30px, а блока родителя 200px, следовательно в одну строку может поместиться 6 блоков 200 / 30 = 6. Конкретное количество блоков в строке задать, по-моему нельзя. Поэтому без маргинов не обойтись.
    – slippyk
    14 дек 2016 в 9:55
  • Могу предложить вот такой вариант, если подойдет, исправлю основной ответ.
    – slippyk
    14 дек 2016 в 9:58
  • Да над этим вариантом я и сам думал, но он зайдет в том случае если ширина блока будет неизменна, а если она будет (width: 100% min-width: 200px) тогда вариант не эффективен. 14 дек 2016 в 10:37

Ваш ответ

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

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