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 пикселей;
}
.
No related posts.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *