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>

Flexbox项目未与我的容器内左侧对齐，列流

1 个答案: