БЛОГ НА HUSL


Расположение блоков, при свойстве на родителе flex

Автор вопроса: Лена 

* {
  position: relative;
  padding: 0;
  margin: 0;
  outline: none;
  letter-spacing: 1px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  padding: 25px;
  height: 1000px;
  width: 500px;
  margin: 0 auto;
}

.blok1 {
  background: green;
  height: 100px;
  flex: 1;
  padding: 50px;
}

.blok2 {
  background: #ff0000;
  padding: 50px;
}
<main>
  <div class='blok1'></div>
  <div class='blok1'></div>
  <div class='blok2'></div>
</main>

Как расположить 2 зеленых блока, друг под другом. Соблюдая следующие условия

  1. На родителе должен быть display:flex
  2. Структура вложенности, должна оставаться прежней. То есть не обертывая в еще доп плоги. Есть родитель и 3 дочерних блока.
  3. Высота зеленых блоков может быть разная. То есть по высоте контента,как и красный. Может быть что зеленые боки будет высотой 100 пикселей, а красный 1000 пиксилей

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  --gap: 25px;
  --height: 100vh;  
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  flex-direction: column;
  height: var(--height);
  padding: var(--gap);
  align-content: center;
}
.block1,
.block2 {
    width: 70%;
    max-width: min(calc(50vh*(16 / 9)), 70%);
    background: #cfc;
}
.block3 {
  flex: 0 0 100%;
  width: calc(30% - var(--gap));
  background: #fcc
}
.block3, .block1, .block2 {padding: 0.5em;}
<main>
  <div class="block1">
    <h2>block1</h2>
     Text Text Text Text Text Text 
  </div>
  <div class="block2">
    <h2>block2</h2>
    Text Text Text Text Text Text Textext Text Text Text Text Text Textext Text Text Text Text  
  </div>
  <div class="block3">
     Text Text Text Text Text Text Text 
  </div>
</main>

Частично удалось добиться. Только вот, если общая высота превышает красный. Перескакивают, становяться в один ряд...

Пример с гридом

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
    display: grid;
    gap: 10px;
    grid-template:
        "a c" auto
        "b c" auto / min(calc(50vh*(16 / 9)), 70%) 30%;
    padding: 10px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
}
.block1 {grid-area: a}
.block2 {grid-area: b}
.block1, .block2 {background: #cfc}
.block3 {
  grid-area: c;
  grid-row: 1 / 3;
  background: #fcc
}
main > div {padding: 0.5em;}
<main>
  <div class="block1">
    Text Text Text Text Text Text 
  </div>
  <div class="block2">
    Text Text Text Text Text Text Text 
  </div>
  <div class="block3">
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div>
</main>

Вроде работает, но. Как выполнить. Чтобы высота зеленых была по контенту, а не растягивались... Если попытаться прижать, то gap будет нарушен.

Он как бы сохраняет сетку, расположение верно, а вот зеленые блоки не прижимает...


Источник

Ответы (4 шт):

Автор решения: Mazz1lla 

{
    position: relative;
    padding: 0;
    margin: 0;
    outline: none;
    letter-spacing: 1px;
    box-sizing: border-box;
    scrollbar-width: none;
    -webkit-tap-highlight-color: transparent;
}
    
main {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    padding: 25px;
    height: 1000px;
    width: 500px;
    margin: 0 auto;
}
    
.blok1 {
    background: green;
    padding: 50px; 
    flex-basis: 100%; 
}       
    
.blok2 {
    background: #ff0000;
    padding: 50px;
}
<main>
    <div class='blok1'></div>
    <div class='blok1'></div>
    <div class='blok2'></div>
</main>

→ Ссылка
Автор решения: Рустам Рысаев

возможно так?:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Example</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  main {
    display: flex;
    flex-wrap: nowrap; /* Блоки не переносятся */
    gap: 25px; /* Расстояние между блоками */
    height: 100vh; /* Высота страницы */
    padding: 25px; /* Внутренний отступ */
  }

  .left-column {
    display: flex;
    flex-direction: column; /* Вертикальное расположение зеленых блоков */
    gap: 25px;
    flex: 0 0 auto; /* Фиксированная ширина */
  }

  .blok1 {
    background: green;
    flex: 1 0 auto; /* Высота определяется содержимым */
    padding: 20px;
  }

  .blok2 {
    background: red;
    flex: 1 0 auto; /* Высота определяется содержимым */
    padding: 20px;
    width: 100%; /* Заполняет оставшееся пространство */
  }
</style>
</head>
<body>
<main>
  <div class="left-column">
    <div class="blok1">Зеленый блок 1</div>
    <div class="blok1">Зеленый блок 2</div>
  </div>
  <div class="blok2">Красный блок</div>
</main>
</body>
</html>

→ Ссылка
Автор решения: drujbanjo 

* {
  position: relative;
  padding: 0;
  margin: 0;
  outline: none;
  letter-spacing: 1px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent
}

main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; // с помощю этого свойство блоки будут идти вниз
  gap: 25px;
  padding: 25px;
  height: 1000px;
  width: 500px;
  margin: 0 auto;
}

.blok1 {
  background: green;
  height: 100px;
  flex: 1;
  padding: 50px;
}

.blok2 {
  background: #ff0000;
  padding: 50px;
}

→ Ссылка
Автор решения: puffleeck

вариант на GRID

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
    display: grid;
    gap: 10px;
    grid-template:
        "a c" auto
        "b c" 1fr / min(calc(50vh*(16 / 9)), 70%) 30%;
        /*!!!!!!!!!!!!*/
        
    padding: 10px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
}
.block1 {grid-area: a}
.block2 {grid-area: b}
.block1, .block2 {
background: #cfc;
align-self: start; /*!!!!!!!!!*/
}
.block3 {
  grid-area: c;
  grid-row: 1 / 3;
  background: #fcc
}
main > div {padding: 0.5em;}
<main>
  <div class="block1">
    Text Text Text Text Text Text 
  </div>
  <div class="block2">
    Text Text Text Text Text Text Text 
  </div>
  <div class="block3">
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div>
</main>

вариант на flex (осторожно! используется position: absolute)

* {
  padding: 0;
  margin: 0;
  outline: none;
  letter-spacing: 1px;
  box-sizing: border-box;
}

main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 25px;
  padding: 25px;
  width: 500px;
  margin: 0 auto;
  position: relative;
}

main > *{
  padding: 25px;
  width: 45%;
}

.blok1 {
  background: green;
  height: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: start;
}

.blok2 {
  background: red;
  height: 100%;
  flex-grow: 1;
  align-self: end;
  position: absolute;
}
<main>
  <div class='blok1'>1</div>
  <div class='blok1'>2</div>
  <div class='blok2'>3</div>
</main>

UPD добавил слегка обновлённый вариант (снова на GRID):

теперь привязка макета к кол-ву зеленых элементов менее жесткая(смотри комментарий к .block3)

main {
  display: grid;
  gap: 10px;
  grid-auto-rows: auto;
  grid-template-columns: min(calc(50vh*(16 / 9)), 70%) 30%;
  grid-auto-flow: column dense;

  padding: 10px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

main > div:not(.block3) {
  background: #cfc;
  grid-column: 1;
}

.block3 {
  background: #fcc;
  grid-row: 1 / span 9;
  /* в спане нужно указать число больше чем есть зеленых элементов */
}
<main id='x'>
  <div class="block1" contenteditable>здесь</div>
  <div class="block2" contenteditable>можно</div>
  <div class="block3" contenteditable>
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
  </div>

  <div class="block2" contenteditable>что-то</div>
  <div class="block2" contenteditable>
    -----------------------------<br>
    написать</div>
  <div class="block2" contenteditable>
    Text Text Text Text Text Text Text<br>
    Text Text Text Text Text Text Text
  </div>
</main>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.