时间戳

首页 > 解决方案 > 如何使用 flexbox 将我的项目每行对齐两个项目？

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

问题描述

我想对齐我的弹性项目（每行两个项目）这张图片显示了我想要的： 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>;
  }

萨斯代码：

.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;
  }
}

标签： csssassflexboxjsx

解决方案

假设这是你的渲染结构

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
}

这些属性与您自己的代码不匹配，可能会对您有所帮助

推荐阅读