Блог

Главная - Вопросы по программированию - Повторение трех столбцов flexbox

Повторение трех столбцов flexbox

#html #reactjs #css #flexbox

#HTML #reactjs #css #flexbox

Вопрос:

У меня есть компонент в react, который я, повторяя в цикле. Этот компонент всегда будет отображаться три раза, и я хочу, чтобы они отображались в одной строке (каждый компонент — столбец). В примерах, которые я видел, вручную добавляется «flex: 1;» и так далее для каждого столбца, но поскольку я выполняю итерацию, это невозможно.

Это выглядит следующим образом: 

 <div className="styles.grid">
  <!-- stuff  -->
</div>

Выше будет показано три раза, и я хочу, чтобы они все были в одной строке (каждая будет столбцом).

Я пытался: 

 .grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

Не работает. Любая помощь?

Комментарии:

1. flex-wrap: wrap Это приведет к разрыву вашей строки с одной строки на несколько, если содержимое не может располагаться рядом друг с другом. Попробуйте удалить это?

2. Вы пробовали использовать float: left ?

Ответ №1:

Вы можете удалить flex-wrap , чтобы все элементы flex располагались в одной строке, и придать каждому элементу flex треть ширины.

Пример

 function App() {
  return (
    <div className="grid">
      <div className="grid-item item-1">Foo</div>
      <div className="grid-item item-2">Bar</div>
      <div className="grid-item item-3">Baz</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));  
 .grid {
  display: flex;
}

.grid-item {
  width: 33.33333%;
  height: 200px;
}
.item-1 {
  background-color: red;
}
.item-2 {
  background-color: green;
}
.item-3 {
  background-color: blue;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Ответ №2:

Попробуйте использовать flex-grow: 1 для дочерних столбцов. Это указывает дочерним элементам расти одинаково, чтобы заполнить ширину своих родителей.

Для получения дополнительной информации о flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox /

Ниже приведен простой пример из 3 столбцов, где каждый столбец расширяется одинаково.

 .parent {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col {
   flex-grow: 1;
   height: 200px;
   border: 1px solid black;
}  
 <div class="parent">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

Ответ №3:

Это то, чего вы, вероятно, пытаетесь достичь:

 .grid {
  display: flex;
  flex-wrap: wrap;
  align-items: space-between;
}

.grid-item {
  width: 30%;
}  
 <div class="grid">
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
</div>

Гибкий контейнер обернет каждый элемент, как только он выйдет за его пределы с flex-wrap: wrap; свойством.

И каждому элементу внутри flex затем должно быть присвоено значение width: 30%; . Каждый 4-й элемент в сетке будет перенесен в следующую строку.