JavaScript — Как создать горизонтальную сетку с 3 элементами в строке

Как создать горизонтальную сетку с 3 элементами в строке

Если все, что вы используете для «material-ui» — это импорт компонента, то могу ли я предложить использовать ваш собственный CSS, который может быть достаточно простым? Если у вас уже есть контроль над шириной элементов проигрывателя и их контейнера, вы можете просто добавить ‘display: inline-block’ в контейнер div:

{amp}lt;div style={{ display: 'inline-block' }}{amp}gt;

Это может вызвать проблемы с отзывчивостью, и в этом случае вы можете проверить некоторые гибкие стили, которые дают вам больше контроля. Это немного больше CSS, но предоставит более масштабируемые, отзывчивые решения.

По сути, вы хотите сохранить контейнер, в который все из вашей карты () вернет свои элементы. Этот контейнер будет иметь стили, которые выглядят примерно так:

 render() { return ( {amp}lt;div style={{ display:'flex', justifyContent: 'space-between'}}{amp}gt; {renderPlayers()} {amp}lt;/div{amp}gt; ) }; renderPlayers() { const { multipleVideoSource } = this.state; return ( multipleVideoSource !== null ? multipleVideoSource.map(src ={amp}gt; ( {amp}lt;div{amp}gt; {/* maybe keep for flex-item style? Otherwise, not necessary */} {amp}lt;Player key={src} height={500} fluid={false}{amp}gt; {amp}lt;ControlBar autoHide={false} className="my-class" /{amp}gt; {amp}lt;BigPlayButton position="center" /{amp}gt; {amp}lt;HLSSource isVideoChild src={src} /{amp}gt; {amp}lt;/Player{amp}gt; {amp}lt;/div{amp}gt; )) : "Only one video" ); }; 

По умолчанию Flex имеет значение ‘flexDirection’ для ‘row’, а также ‘flexWrap’ для ‘nowrap’, поэтому вам не нужно устанавливать их для вашей горизонтальной сетки. (Если вы не хотите, чтобы оно было упаковано для небольших устройств.)

Вы также можете установить стили для каждого отдельного ребенка и поиграть с различными стилями Flexbox на таких сайтах, как этот https://the-echoplex.net/flexyboxes/

Надеюсь, это поможет!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector