我正在尝试在两行弹性项目之间添加边框，但是每当我添加一个时，弹性项目都会保持在彼此的顶部而不是彼此相邻，这是一个示例：
这就是我想要的样子。 （线条是用颜料画的，不是真实的东西）
https://i.sstatic.net/M6PQW26p.png
这就是我得到的。
https://i.sstatic.net/JkcXXx2C.png
<body>
<div class="flex-container">
<div class="flex-item1">
<p>Flex content</p>
</div>
<div class="flex-item2">
<p>Flex content</p>
</div>
</div>
</body>
.flex-container {
display: flex;
overflow: hidden;
flex-flow: row wrap;
height: 100vh;
.flex-item1 {
flex: 1 50%;
background-color: aqua;
border: 1px solid black;
}
.flex-item2 {
flex: 1 50%;
background-color: white;
}
}
我建议您始终从
* { box-sizing: border-box }* {
box-sizing: border-box;
}
.flex-container {
display: flex;
overflow: hidden;
flex-flow: row wrap;
height: 100vh;
}
.flex-item1 {
flex: 1 50%;
background-color: aqua;
border: 1px solid black;
}
.flex-item2 {
flex: 1 50%;
background-color: white;
}<div class="flex-container">
<div class="flex-item1">
<p>Flex content</p>
</div>
<div class="flex-item2">
<p>Flex content</p>
</div>
</div>