Выровнять элементы по ширине с flexbox

368

21 декабря 2016, 04:02

Есть 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>

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

Answer 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>

Answer 2

.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>