Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты
Категории Все вопросы проекта Компьютеры, Интернет Темы для взрослых Авто, Мото Красота и Здоровье Товары и Услуги Бизнес, Финансы Наука, Техника, Языки Философия, Непознанное Города и Страны Образование Фотография, Видеосъемка Гороскопы, Магия, Гадания Общество, Политика, СМИ Юридическая консультация Досуг, Развлечения Путешествия, Туризм Юмор Еда, Кулинария Работа, Карьера О проектах Mail Животные, Растения Семья, Дом, Дети Другое Знакомства, Любовь, Отношения Спорт Золотой фонд Искусство и Культура Стиль, Мода, Звезды Полный список Спросить Лидеры
Поиск по вопросам

Верстка сайта // Flex

МеДуЗкА Ученик (130), на голосовании 2 недели назад
Нужно получить такое расположение блоков, используя flex (принимаются и другие варианты, но верстку менять нельзя), при такой верстке:

<div class='container'>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
</div>

div с классом block - это оранжевые блоки на изображении. У них у всех одна ширина, но высота может быть абсолютно разной.

Какие стили мне нужно применить к блоку с классом container, чтобы получить позицианирование, как на изображении?

Сейчас я применяю к нему такие стили:

display: flex;
flex-wrap: wrap;
justify-content: space-between;

Но на выходе получаю не то, что мне нужно.
Дополнен 1 месяц назад
дивов с классом block может быть неограниченное количество, поэтому нельзя задать фиксированную высоту для блока container
Голосование за лучший ответ
S.H.I. Оракул (73403) 1 месяц назад
Вам нужно использовать flex-direction: column вместе с flex-wrap: wrap и задать фиксированную высоту контейнеру. Вот необходимые стили:
 .container { 
  display: flex; 
  flex-direction: column; /* Располагаем элементы сверху вниз */ 
  flex-wrap: wrap; /* Разрешаем перенос на новую "колонку" */ 
  height: 400px; /* Необходимо задать высоту контейнера */ 
  gap: 10px; /* Отступы между блоками */ 
} 
 
.block { 
  width: calc(50% - 5px); /* Половина ширины с учетом отступов */ 
}
Принцип работы: блоки будут заполнять контейнер сверху вниз, а когда достигнут нижней границы - начнут заполнять следующую "колонку" справа. Высоту контейнера нужно подобрать так, чтобы первые два блока уместились в левой колонке, а следующие два - в правой.
МеДуЗкАУченик (130) 1 месяц назад
да, но мне нельзя устанавливать фиксированную высоту контейнера, ведь таких блоков внутри может быть неограниченное количество

Забыл об этом написать, извините
S.H.I. Оракул (73403) МеДуЗкА, 
 .container { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; /* отступы между блоками */ 
} 
 
/* Нечетные блоки (первый, третий и т.д.) - шире */ 
.block:nth-child(2n+1) { 
  flex: 0 0 calc(60% - 5px); 
} 
 
/* Четные блоки (второй, четвертый и т.д.) - уже */ 
.block:nth-child(2n) { 
  flex: 0 0 calc(40% - 5px); 
}
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (273218) 1 месяц назад
Четко прописать структуру 3-х уровней вложения без wrap
Там: https://codepen.io/VISTASTER/pen/KwKNJEY
МеДуЗкАУченик (130) 1 месяц назад
Но тут другая верстка. Задача добиться желаемого эффекта, не меняя верстку.
Дмитрий Глущенко Профи (757) 1 месяц назад
я думаю, в втоем случае лучше немного изменить разметку
 <style> 
       .container{ 
              display: flex; 
       } 
       .sidebar{ 
              display: flex; 
              flex: 0 0 50%; 
              flex-direction: column; 
       } 
</style> 
 
<div class='container'> 
       <div class="sidebar"> 
              <div class='block'></div>  
              <div class='block'></div> 
       </div> 
       <div class="sidebar"> 
              <div class='block'></div>  
              <div class='block'></div> 
       </div>  
</div>
Похожие вопросы