Question

如何对齐我的物品以始终将其放在顶部。我在容器上使用flex。

注意：项目数是动态生成的。

<div class="container">
  <div class="item">ITEM 1</div>
  <div class="item second">ITEM 2</div>
  <div class="item">ITEM 3</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
 }

 .item {
     width: 45%;
     height: 100px;
     background-color: lightgray;
     margin: 0 20px 20px 0;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .second {
     height: 150px;
 }

这是我的plunkr

Answer 1

最简单的方法是将item-1和item-3（同一列上的元素）放在一个div上，然后将属性应用于该div标记。我添加了代码段在下面。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.item {
  width: 100%;
  height: 100px;
  background-color: lightgray;
  margin: 0 20px 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.second {
  height: 150px;
}

.column{
  width:45%;
}
.clm-1{
  margin: 0 20px 20px 0;
}

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
    <div class="column clm-1">
      <div class="item">ITEM 1</div>
      <div class="item">ITEM 3</div>
     </div>
     <div class="column clm-2">
      <div class="item second">ITEM 2</div>
     </div>
    </div>
  </body>

</html>

CSS Flex两列布局问题

1 个答案: