Übergang von flex-grow-Elemente in einer flexbox

Ist es möglich, um den übergang der Elemente in einer flexbox?
Wenn Sie klicken Sie auf ich möchte, dass alle Elemente, die zu kollabieren, außer der, auf die geklickt wird.
Die eine, die angeklickt wird, sollten alle zur Verfügung stehenden Platz aus dem container.

JS:

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

CSS:

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;
}

HTML:

<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>

JSFiddle: http://jsfiddle.net/clankill3r/L8hktsgn/

InformationsquelleAutor clankill3r | 2015-04-14
Schreibe einen Kommentar