Сделайте гибкий контейнер со стойками для усадки колонн

Предположим, что у нас есть контейнер, чьи дети должны заполнить его в столбцах. Контейнер ограничен по высоте и должен быть таким же широким/узким, насколько это необходимо для всех потомков. Он должен выглядеть следующим образом:

enter image description here

Чтобы сделать это, я попробую flexbox. Вопрос в том, возможно ли сделать его сжатым?

  • float:left: в Chrome вообще ничего не делается, в Firefox контейнер имеет ширину только одного столбца - пример 1
  • position:absolute: он не способствует нормальному потоку, поэтому отмените это.

Пока я сужу диапазон браузера до Chrome и FF.

HTML:

<div class="flexcontainer wrap column">
    <div></div>
    <div></div>
    ...
</div>

CSS:

.flexcontainer{
    display: flex;              /* make it a flexbox */
    flex-flow: column wrap;     /* make it a column container, and fill them one after another */

    align-content: stretch;
    align-items: center;
    justify-content: center;

    float: left;                /* shrink-to-fit */

    max-height: 450px;          /* limit the height */
    min-height: 300px;
}
.flexcontainer > div {
    height: 100px;            
    margin: 3px;
    width: 100px;               /* set the width of descendants */
}

Спасибо!

ОТВЕТЫ

Ответ 1

Решение Javascript:

$(document).ready(function() {
 $('.flexcontainer').each(function( index ) {
     var parentHeight = $(this).outerHeight();
     var childHeight = $(this).children().outerHeight();
     var childCount = $(this).children().length;
     var cols = Math.ceil(childHeight*childCount/parentHeight);

     var childWidth = $(this).children().outerWidth();
     var padding = 15;
     $(this).width(childWidth*cols+padding);
    })
});

Ответ 2

Трюк ol 'float/clear:

float: left;
clear: left;

Он заставляет элемент сжиматься до размера его содержимого. Иногда проще.

скрипка, чтобы увидеть этот код в действии

HTML:

<div class="container">
  <div class="left ">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="left ">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

CSS

.container{ 
  float: left;
  clear: left;
  border: solid 2px black; 
}

.left{ float: left }

.box{
  display: block;
  background-color: orange;
  border: solid 1px green;
  height: 20px;
  width: 20px;
}