How can I align my items two items per row using flexbox? - css

Question

I want to align my flex items (two items per row)
This image show what I want :
https://ibb.co/rFLXP5P
and this is what I did (my result for now) :
https://ibb.co/yB3Sftv
I want them two items in the center per row , as the two first rows ( search case and the button case).
here's my code.
JSX code :
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 code :
.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

Suppose this is your render structure
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>
and CSS
.item {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
flex: 0 50%;
/*demo*/
border: red solid;
box-sizing:border-box
}
No match these properties whit your own code may be that will help you