Итерация трех столбцов flexbox
У меня есть компонент в реакции, который я повторяю в цикле. Этот компонент всегда будет отображаться три раза, и я хочу, чтобы они отображались в одной строке (каждый компонент в столбце). Примеры, которые я видел, вручную добавляют «flex: 1;» и так далее для каждого столбца, но так как итерация невозможна.
Это выглядит так:
<div className = "styles.grid">
<!-- stuff -->
</div>
Выше будет показано три раза, и все они должны быть в одной строке (каждый будет столбцом).
Я пытался:
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
Не работает. Любая помощь?
Вы пробовали использовать float: left?
Ответы 3
Попробуйте использовать flex-grow: 1 в дочерних столбцах. Это говорит детям расти одинаково, чтобы заполнить ширину своих родителей.
Для получения дополнительной информации о flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Ниже приведен простой пример с тремя столбцами, где каждый столбец расширяется одинаково.
.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>Вы можете удалить 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>Это то, чего вы, вероятно, пытаетесь достичь:
.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;.
И каждый элемент внутри flex должен быть установлен на width: 30%;. Каждый 4-й элемент в сетке будет перенесен на следующую строку.
flex-wrap: wrapприведет к разрыву вашей строки с одной строки на несколько, если содержимое не может располагаться рядом друг с другом. Попробовать удалить это?