Откуда появилось пустое место при использовании flex?

Question

[Николай]

Подскажите, как избавиться от пустого места между столбцами при использовании flex-direction: column

Пример на jsfiddle.

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
  flex-wrap: wrap;
  height: 200px;
  overflow: hidden;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Answer 1

[Андрей Верх]

У вас ширина блоков 100 пикселей, а родитель 100%. Собственно вопрос, прочему этого пространства быть не должно?

как минимум задайте тогда

align-content:flex-start;
align-items:flex-start;

Comments

[Андрей Верх]

как минимум задайте тогда

align-content:flex-start;
align-items:flex-start;

[Николай]

"Подскажите, как избавиться от пустого места между столбцами" ?)
Во flex совсем не понимаю, поэтому и обратился за помощью.

[Андрей Верх]

Николай: У флекса, как и любых других свойств, есть дефолтные значения. Если вы их не указыаете, берутся стандартные.

[Николай]

Андрей Верх: спасибо, оно!
Может подскажите хороший мануал по флексу?

[Андрей Верх]

Николай: да они все одинаковые. Любое подойдёт. Там ничего сложного нет. Выравнивание по высоте и ширине. Вот и всё...

Первое время, лично мне, помогало визуальное представление - https://codepen.io/SelenIT/full/yNNZxr

[Николай]

Андрей Верх: благодарю!