Как я могу выровнять свои элементы по два элемента в строке, используя flexbox? - PullRequest
Новая
       27

Как я могу выровнять свои элементы по два элемента в строке, используя flexbox?

0 голосов
/ 24 октября 2019

Я хочу выровнять свои flex-элементы (по два элемента в строке). Это изображение показывает, что я хочу: 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;
  }
}

1 Ответ

0 голосов
/ 24 октября 2019

Предположим, что это ваша структура рендеринга

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
}

Не совпадают эти свойства, но ваш собственный код может помочь вам

...