<分区>
CSS Flex 两列布局问题
如何对齐我的元素以始终将其放在顶部。我正在对我的容器使用 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
最佳答案
最简单的方法是将 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 两列布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55235923/