Элементы Flexbox, не выровненные по левому краю внутри моего контейнера с потоком столбцов

Question

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

<div style="width:100%; height:300px; display:flex; outline:2px solid blue;flex-direction:column; flex-wrap:wrap;">
    <div style="width:33.33%; height:33.33%; outline:1px solid red; "></div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; "></div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; "></div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; "></div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; "></div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; "></div>
</div>

Answer 1

Вам необходимо установить выравнивание для поперечной оси , установив align-content: flex-start на внешнюю обертку.

<div style="width:100%; height:300px; display:flex; outline:2px solid blue;flex-direction:column; flex-wrap:wrap;align-content:flex-start">
    <div style="width:33.33%; height:33.33%; outline:1px solid red; ">1</div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; ">2</div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; ">3</div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; ">4</div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; ">5</div>
	<div style="width:33.33%; height:33.33%; outline:1px solid red; ">6</div>
</div>