html - 如何从左到右设置 flex-column 子项？

Question

我想在 flex-column 布局中从左到右设置 flex 项。

我现在拥有的

所需布局

我的代码：

display:flex;
flex-direction: column;
align-items:flex-end;
justify-content: flex-start;
align-content: flex-end;
flex-wrap: wrap;

标签： htmlcssflexbox

Answer 1

使用换行 flex-wrap: wrap-reverse;

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  align-content: flex-start;

  height: 400px;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 5px;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div> 
  <div class="flex-item"></div>


</div>