@Zegen

Flexbox в 2 колонки независимой высоты, как?

Господа помогите начинающему пожалуйста, как ни верстаю то в одном месте косяк, то в другом. Как это сделать на Flexbox?5cf778ec61317652563454.jpeg
  • Вопрос задан
  • 118 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Zegen Автор вопроса
.main-repair-part {
  display: flex;
  flex-flow: column wrap;
  max-width: 100%;
  max-height: 250px;
  
}

.unit-repair-part {
  overflow: hidden;
  width: 100%;
  height: 100px;
}

.img-repair-part {
  overflow: hidden;
  width: 100%;
  height: 100px;
}

.list-repair-part {
  overflow: hidden;
  width: 100%;
  height: 100px;
}

@media(min-width: 500) {
  .main-repair-part {
  
  }
}

.unit-repair-part-content {
  background-color: red;
}

.img-repair-part-content {
  background-color: green;
}

.list-repair-part-content {
  background-color: yellow;
}


<div class="main-repair-part">
 <div class="unit-repair-part">
  <div class="unit-repair-part-content">
  1 Текст (от лат. textus — ткань; сплетение, сочетание) — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.

Существуют две основные трактовки понятия «текст»: имманентная (расширенная, философски нагруженная) и репрезентативная (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.

В лингвистике термин «текст» используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. Так, например, И. Р. Гальперин определяет текст следующим образом: «это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное»[1].
  </div>
 </div>
 
 <div class="img-repair-part">
  <div class="img-repair-part-content">
  2 Текст (от лат. textus — ткань; сплетение, сочетание) — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.

Существуют две основные трактовки понятия «текст»: имманентная (расширенная, философски нагруженная) и репрезентативная (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.

В лингвистике термин «текст» используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. Так, например, И. Р. Гальперин определяет текст следующим образом: «это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное»[1].
  </div>
 </div>
 
 <div class="list-repair-part">
  <div class="list-repair-part-content">
  3 Текст (от лат. textus — ткань; сплетение, сочетание) — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.

Существуют две основные трактовки понятия «текст»: имманентная (расширенная, философски нагруженная) и репрезентативная (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.

В лингвистике термин «текст» используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. Так, например, И. Р. Гальперин определяет текст следующим образом: «это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное»[1].
  </div>
 </div>



</div>


Если я убираю max-height: 250px; в main , то у меня не ставится в 2 колонки - что логично, а если оставляю, то у меня не переставляется в одну колонку на маленькой ширине для мобильного, что тоже логично.. поправьте плиз меня, как же сделать?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект
22 нояб. 2024, в 23:55
3000 руб./за проект