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

Question

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

Я пробовал:

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

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

Answer 1

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

Пример

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>

Answer 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>

Answer 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 обернет каждый элемент, как только выйдет за его пределы со свойством flex-wrap: wrap;.

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