html — Как определить динамическую компоновку таблицы с помощью flexbox

1

Новое! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я хочу создать своего рода галерею для изображений и видео. Я решил использовать свойства flexbox для создания таблицы div, которая будет содержать медиафайлы.

Но проблема в том, что мне нужно создать таблицу автоматически, не определяя, сколько строк и столбцов мне понадобится.

Например, если у меня есть 2 изображения, то создается таблица из 2 элементов. Если у меня есть 6 фото/видео, то у меня есть таблица с 3 строками, где каждая имеет 2 столбца и так далее.

Мне нужно что-то вроде этого:

Но вместо этого у меня есть это:

Кто-нибудь знает, можно ли создать такую ​​таблицу во flex без предварительного определения строк и столбцов?

 .контейнер {
  ширина: 100%;
  высота: 100%;
  цвет фона: розово-коричневый;
  дисплей: гибкий;
  flex-направление: строка;
  flex-wrap: обернуть;
}
.
вещь { фон: красный; маржа: 1%; гибкий: авто; }
 <дел>
  
Элемент
Элемент
Элемент
Элемент
Элемент
Элемент
  • HTML
  • CSS
  • Flexbox

7

Я думаю, это то, что вы ищете:

 .container {
  ширина: 100%;
  высота: 100%;
  цвет фона: розово-коричневый;
  дисплей: гибкий;
  flex-направление: строка;
  flex-wrap: обернуть;
}
.вещь {
  ширина: 20%;
  фон: красный;
  маржа: 1%;
  гибкий: авто;
  выравнивание текста: по центру;
  минимальная высота: 50 пикселей;
} 
 <дел>
  
Элемент
Элемент
Элемент
Элемент
Элемент
Элемент
Элемент
Элемент

Ограничив класс элемента шириной/высотой, вы можете делать то, что ищете.

2

Вот! Вы были близки с вашим CSS для содержащего элемента, все, что вам нужно было добавить, это:

 justify-content: space-between;
  выравнивание элементов: авто;
  выравнивание содержимого: начало
 

Что касается flex-item,

flex-grow, flex-shrink и flex-basis можно преобразовать в сокращенное свойство:

 flex: 0 0 auto;
 
 .
контейнер { дисплей: гибкий; flex-wrap: обернуть; flex-направление: строка; выравнивание содержимого: пробел между; выравнивание элементов: авто; выравнивание содержимого: начало } .вещь { гибкий: 0 0 авто; поле: 6px; цвет фона: красный; ширина: 125 пикселей; высота: 125 пикселей; размер шрифта: 2rem; }
 <дел>
  <дел>1
  <дел>2
  <дел>3
  <дел>4
  <дел>5
  <дел>6
  <дел>7
  <дел>8
 

Вам необходимо определить хотя бы «приблизительную» ширину для дочерних элементов. Лучше тестировать на каждом размере экрана, но в основном это

flex-basis .

Чтобы достичь количества, которое вам нужно для каждого размера экрана, вам, вероятно, потребуется поставить несколько медиа-запросов для этой основы.

 html,
тело{
  высота:100%;
  маржа: 0;
  заполнение: 0;
}
.контейнер {
  ширина: 100%;
  высота: 100%;
  цвет фона: розово-коричневый;
  дисплей: гибкий;
  flex-направление: строка;
  flex-wrap: обернуть;
}
. вещь {
  фон: красный;
  поле: 5px;
  флекс: 1 1 200px; //#!#
} 
 <дел>
  
Элемент
Элемент
Элемент
Элемент
Элемент
Элемент

0

html — Как исправить ширину ячейки таблицы с помощью flex?

Спросил

Изменено 2 года, 3 месяца назад

Просмотрено 3к раз

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я хочу создать таблицу, в которой один из столбцов имеет динамическую ширину. Я использую гибкий подход. Но в каждой строке моя ячейка имеет разную ширину. Как я могу это исправить? Ссылка на пример

Изменение ширины столбца «Имя» при изменении ширины окна браузера. Это работает хорошо.

Но другие столбцы имеют неправильную ширину.

 таблица {
  граница коллапса: коллапс;
  интервал между границами: 0;
  
  макет таблицы: фиксированный;
  ширина: 100%;
}
тр {
  дисплей: гибкий;
}
тд, й {
  набивка: 0,5 бэр 1 бэр;
  граница: 1px сплошной зеленый;
  пробел: nowrap;
  
  дисплей: гибкий;
  выравнивание элементов: по центру;
  гибкий: 0 0 авто;
}
.t-имя {
  минимальная ширина: 360 пикселей;
  гибкий: 1 1 авто;
}
.t-name span {
  переполнение: скрыто;
  переполнение текста: многоточие;
  пробел: nowrap;
} 
 <таблица>
    
      Идентификатор
      
Имя Категория Внешний идентификатор Тип Действие <тд>1 Футболка с улыбкой Мужская одежда 434 Лето <тд>2 Новый бренд casual синего цвета Dolche and Gabana Edt USA PRODUCTION Женская одежда <тд>321 Лето <тд>3 Кеды Одежда 521 Весна
  • HTML
  • CSS
  • Flexbox

1

Если вы хотите сохранить объявление flex в элементах

,
, , вы можете применить дополнительное свойство width к ячейкам таблицы в вашей таблице стилей, непосредственно под объявлением flex , например:

 td, th {
  набивка: 0,5 бэр 1 бэр;
  граница: 1px сплошной зеленый;
  пробел: nowrap;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  гибкий: 0 0 авто;
  ширина: 90 пикселей; // <= ОБЪЯВЛЕНИЕ ШИРИНЫ
}
 

Рабочий пример:

 таблица {
  граница коллапса: коллапс;
  интервал между границами: 0;
  
  макет таблицы: фиксированный;
  ширина: 100%;
}
тр {
  дисплей: гибкий;
}
тд, й {
  набивка: 0,5 бэр 1 бэр;
  граница: 1px сплошной зеленый;
  пробел: nowrap;
  
  дисплей: гибкий;
  выравнивание элементов: по центру;
  гибкий: 0 0 авто;
  ширина: 90 пикселей;
}
.
											
					
										
				
				

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *