У меня есть список элементов различной высоты, и я хочу выложить их так, чтобы полная ширина экрана заполнялась (но не переполнен горизонтальной прокруткой): < /p>
Как я могу сделать это через CSS? Я не могу просто переключиться на направление сгиба: row , так как между рядами будут большие пробелы из-за различной высоты элементов.
https://codesandbox.io/s/dreamy-joliot- ... src/app.js
import React, { useState, useEffect } from "react";
const BOX_WIDTH = 200;
const boxHeights = [...Array(500)].map(() => Math.random() * 100);
export default function App() {
const ref = React.useRef();
const [originalHeight, setOriginalHeight] = useState();
useEffect(() => {
if (!originalHeight && ref.current?.clientHeight) {
setOriginalHeight(ref.current?.clientHeight);
}
}, [originalHeight, ref.current?.clientHeight]);
const [height, setHeight] = useState();
useEffect(() => {
if (originalHeight && ref.current?.clientWidth) {
setHeight(
originalHeight / Math.floor(ref.current?.clientWidth / BOX_WIDTH) / 0.9
);
}
}, [ref.current?.clientWidth, originalHeight]);
return (
ref={ref}
style={{
display: "flex",
flexDirection: "column",
flexWrap: "wrap",
...(height && { height })
}}
>
{[...Array(500)].map((_, i) => (
))}
);
}
Подробнее здесь: https://stackoverflow.com/questions/721 ... reen-width
