Как растянуть флекс элемент на 2 строки?
Всем привет, юзаю react swiper, как сделать что бы датчик температуры занимал 2 строки а не увеличивал строку?
должно быть примерно как на гридах когда конкретному элементу задаешь grid-row 1/2, но как сделать это на флексах?
<Swiper
spaceBetween={24}
slidesPerView={'auto'}
grid={{
fill: 'row',
rows: 2,
}}
>
{roomDevices.map(device =>
<SwiperSlide
style={{
height: device.code === 'temp_hum_sensor'? 300: 136,
width: 288
}}
key={device.id}>
<DeviceView
key={device.id}
device={device}
/>
</SwiperSlide>
)}
</Swiper>Ответы (2 шт):
Автор решения: HaZcker
→ Ссылка
Если я правильно понимаю вопрос, вам нужно элементу у которого стоит display: flex добавить свойство flex-wrap: wrap;
.flex-container {
display: flex;
flex-wrap: wrap;
}
Автор решения: HaZcker
→ Ссылка
Как вариант можно поменять структуру в html, и выделить под большой элемент отдельный блок.
https://codesandbox.io/s/currying-fire-8omygk?file=/src/App.js:87-96
