Flexbox как иметь элементы изменения размера как по горизонтали, так и по вертикали, сохраняя высоту

Вот моя проблема:Flexbox как иметь элементы изменения размера как по горизонтали, так и по вертикали, сохраняя высоту

У меня есть 3 контейнера внутри контейнера с содержимым внутри этих контейнеров.

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

Я использую flexbox с flex-flow: row wrap, и это отлично работает, скажем, мы удаляем один из двух нижних контейнеров.

Для того чтобы их размер был изменен по вертикали, я использую свойство auto высоты и, как ожидается, элемент контейнера заполняет оставшуюся высоту его контейнера.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     div{border: 1px solid black} 
     html, body{height: 100%; width: 100%;} 
     #container1{ 
      width: 100%; 
      height: 100%; 
      display: flex; 
      flex-flow: row wrap; 
     } 
     #subContainer3, #subContainer2{ 
      flex: 1 49%; 
     } 
     #subContainer1{ 
      flex: 1 100%; 
     } 
     .content{ 
      background-color: lightgray; 
      height: 90%; 
     } 
    </style> 
</head> 
<body> 
    <div id="container1"> 
     <div id="subContainer1"> 
      <div class="content"></div> 
     </div> 
     <div id="subContainer2"> 
      <div class="content"></div> 
     </div> 
     <div id="subContainer3"> 
      <div class="content"></div> 
     </div> 
    </div> 
</body> 
</html>

Однако, поскольку я не установлю явную высоту суб контейнеров, все содержание в них не сможет быть процент от суб контейнеров.

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

**** Примечание ****

В качестве дополнительного комментария, в то время как это может быть очевидным для некоторых, любая высота определяется гибкой коробки по-прежнему будет непризнанным любого дочернего DIV, пытающегося использовать высоту в процентах , Например, если наш контент делится на то, где у них есть дети, которые хотели бы быть% от их родительской высоты, нам нужно было бы использовать flex-box в направлении столбца, чтобы установить это вместо% height.

источник

2016-02-12 Loren Shqipognja

Я думаю, что 'height: 90%;' не будет работать здесь, поскольку наибольшее 'content' определяет высоту внешнего контейнера и строку flex, и вы говорите' height: 90% 'самого себя? –

Извините, я знаю, что высота 90% не будет работать, я просто иллюстрирую проблему с кодом. Я хочу решение, в котором я могу поддерживать высоту 90% и в то же время иметь возможность расширения div субконтейнеров вертикально. Когда я устанавливаю высоту в subContainer, высота контента (90%) будет работать, но тогда, если я удалите, скажем, div из tio, остальные divs не будут расширяться, чтобы заполнить высоту. –

Итак, есть братья и сестры '.content'? И вы хотите, чтобы 'content' увеличивался пропорционально (9x высота) других элементов в' subContainer'? Конструкция, которую вы хотите, неясна =/ –

вы можете достичь, добавьте еще Flexbox к подконтейнер DIVs:

div{border: 1px solid black} 
 
    html, body{height: 100%; width: 100%; margin:0;padding:0} 
 
    #container1{ 
 
     width: calc(100% - 4px); 
 
     height: calc(100% - 4px); 
 
     display: flex; 
 
     flex-flow: row wrap; 
 
    } 
 
    #subContainer3, #subContainer2{ 
 
     flex: 1 49%; 
 
     display:flex; 
 
     flex-flow: column wrap; 
 
    } 
 
    #subContainer1{ 
 
     flex: 1 100%; 
 
     display:flex; 
 
     flex-flow: column wrap; 
 
    } 
 
    .content{ 
 
     flex: 1 100%; 
 
     background-color: lightgray; 
 
    }

<div id="container1"> 
 
    <div id="subContainer1"> 
 
     <div class="content"></div> 
 
    </div> 
 
    <div id="subContainer2"> 
 
     <div class="content"></div> 
 
    </div> 
 
    <div id="subContainer3"> 
 
     <div class="content"></div> 
 
    </div> 
 
</div>

Примечание: я извлекал поля и отступы от страницы, чтобы избежать olls и до тех пор, пока вы хотите сохранить границы, я также отредактировал ширину и высоту главного контейнера div, равную минус 4px, которые являются границами дополнительной ширины и высоты

источник

2016-02-12 21:08:33

Если я устанавливаю высоту в div субконтейнера, то они не будут гибко расширяться в вертикальном направлении, как в горизонтальном направлении, когда субконтейнер будет удален. Например, если вы удаляете subContainer1, остальные два подконтейнера не заполняют всю страницу. В этом суть вопроса –

да, извините, я отредактировал ответ, я думаю, что он будет делать то, что вы ищете сейчас –

Попробуйте использовать прописку, чтобы добавить некоторую высоту заполнителя, а значение по умолчанию align-items: stretch; должно содержать равные высоты столбцов content. Использование height: 90%; у ребенка контейнера с динамической высотой не имеет смысла.

Вы можете найти хорошее описание, когда height с % ценность работает и не работает здесь. У меня также есть ответ там, как сделать высоту, пропорциональной width контейнера, который может быть вариантом для вашего дизайна:

Percentage Height HTML 5/CSS

источник

2016-02-12 20:53:13

Вам нужно добавить дополнительную обертку вокруг подконтейнеров 2 & 3 и используйте вложенный flex. Следующий пример демонстрирует это.

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.horizontal { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    flex: 1 0 auto; 
 
} 
 
#subContainer1, 
 
#subContainer2, 
 
#subContainer3 { 
 
    flex: 1 0 auto; 
 
    border: 1px solid black; 
 
} 
 
.content { 
 
    background-color: lightgray; 
 
}

<div id="container1"> 
 
    <div id="subContainer1"> 
 
    <div class="content"></div> 
 
    </div> 
 

 
    <div class="horizontal"> 
 
    <div id="subContainer2"> 
 
     <div class="content"></div> 
 
    </div> 
 
    <div id="subContainer3"> 
 
     <div class="content"></div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-02-12 20:57:21 Giorgos

Flexbox как иметь элементы изменения размера как по горизонтали, так и по вертикали, сохраняя высоту

ответ

Смежные вопросы