如何使用flexbox将我的项目每行对齐两个项目

Question

我想对齐我的弹性项目(每行两个项目(此图片显示了我想要的内容：https://ibb.co/rFLXP5P这就是我所做的(我目前的结果(：https://ibb.co/yB3Sftv我希望每行中间有两个项目，作为第一行(搜索大小写和按钮大小写(。这是我的密码。JSX代码：

render() {
return <div className="employees-container">
<div className='employee-search'>
<label for="name">Search Employees</label>
<input placeholder='Name...' onChange={(e) => this.setState({ name: e.target.value })} id="name"/>
</div>
<Link to="/add/employee">Add Employee</Link>
{this.state.employees
.filter(x => new RegExp(this.state.name, 'i').test(x.name))
.map(x=><EmployeeCard data={x}></EmployeeCard>)
}
</div>;
}

Sass代码：

.employees-container{
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
justify-content: center;
}
>*{ 
height: 70px;
margin:5px;
width:300px!important;
}
}

Answer 1

假设这是您的渲染结构

HTML

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

和CSS

.item {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
flex: 0 50%;
/*demo*/
border: red solid;
box-sizing:border-box
}

没有匹配这些属性，你自己的代码可能会帮助你