Переход flex-рост элементов в flexbox

Можно ли переместить элементы в flexbox? Когда вы нажимаете, я хочу, чтобы все элементы свертывались, кроме тех, которые были нажаты. Тот, который нажал, должен использовать все свободное пространство из контейнера.

// only works once!
$(".item").click(function() {
  $(".item").not(this).each(function() {
    $(this).addClass("collapse");
  });
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  transition: all 2s;
}
.collapse {
  flex-grow: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item" style="background: red">a</div>
  <div class="item" style="background: green">b</div>
  <div class="item" style="background: blue">c</div>
  <div class="item" style="background: purple">d</div>
</div>

Ответ 1

flex-grow является анимированным, но только если значение <number>. Однако, похоже, что Google Chrome (v41) не запускает анимацию, если значение установлено на 0.

Обходным путем для этого может быть использование очень маленького значения - нечто вроде 0.0001:

Обновленный пример.

$(".item").click(function() {
    $(".item").addClass("collapse");
    $(this).removeClass("collapse");    
});

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;    
}

.container {
    flex-basis: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    transition: all 2s;
}

.collapse {
    flex-grow: 0.001;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item" style="background: red">a</div>
    <div class="item" style="background: green">b</div>
    <div class="item" style="background: blue">c</div>
    <div class="item" style="background: purple">d</div>
</div>

Ответ 2

$(".item").click(function() {
    $(this).removeClass('collapse');
    $(".item").not(this).each(function() {
        $(this).addClass("collapse");    
    });


});

и вы можете анимировать flex-grow от 20 до 1

.item {
    flex-grow: 20;
    transition: all 1s;
}

.collapse {
    flex-grow: 1;

}

http://jsfiddle.net/L8hktsgn/11/

Ответ 3

Вы можете работать с max-height.

.item
{
  max-height:100%;
}

.collapse
{
  max-height: 64px;
}

http://jsfiddle.net/L8hktsgn/9/

Ответ 4

Если вы хотите только одну строку, это может работать https://codepen.io/balvin/pen/gKrXdM, но если вы хотите их обернуть, вы можете использовать https://codepen.io/balvin/pen/wXGyYw. Кажется, что это взломать, но установив width:0;flex-grow:1 это решение, но для того, чтобы обернуть элементы, вам нужно объяснить width строки в браузере, потому что она не знает, на какой ширине вы хотите обмотать элементы и имея в виду, что вы просто играете с setTimeout. Проверьте коды