flex-box list

by ChangJoo Park

HTML

<!-- 
  CSS flex box - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
  Reverse Transition - https://www.safaribooksonline.com/blog/2013/02/19/chaining-and-reversing-css-transitions/
-->
<div class="flex-container">
  <div class="flex-item flex-item-container">
      <div class="item-header">
        <div class="flex-between-row-container">
          <div class="item-header-name">이름</div>
          <div class="item-header-buttons">버튼들</div>
        </div>
      </div>
      <div class="item-body">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
      </div>
      <div class="item-footer">
        <div class="flex-between-row-container">
          <div class="item-footer-icon">emoji</div>
          <div class="item-footer-input">textarea</div>
          <div class="item-footer-icon">file</div>
          <div class="item-footer-icon">screen</div>
        </div>
      </div>
  </div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS

html,body {width:100%; height: 100%; margin: 0px; padding: 0px; }

.flex-container	{
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row-reverse wrap;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  overflow: hidden;
}

.flex-item {
  background: tomato;
  border: 1px solid tomato;
  width: 310px;
  height: 421px;
  transition: transform 0.1s ease-in, width 0.1s ease-in;
}

.flex-item:not(:last-child) {
  margin-right: 10px;
}

.flex-item.minimize {
  transition: width 0.1s ease-in, transform 0.1s ease-in;
  transform: translateY(400px);
  width: 200px;
}

.flex-container .flex-item-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

.flex-item-container .item-header {
  flex: none;
  height: 30px;
  background-color: #fff;
}

.flex-item-container .item-body {
  flex: 1;
  background-color: grey;
  overflow-y: auto;
}

.flex-item-container .item-footer {
  flex: none;
  background-color: #fff;
  height: 35px;  
}

.flex-between-row-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-between-row-container .item-footer-icon {
  flex: none;
  max-width: 23px;
  max-height: 23px;
}

.flex-between-row-container .item-footer-input {
  flex: 1;
}

JavaScript

$('.flex-item .item-header-name').click(function (event) {
	this.parent('.flex-item').toggleClass('minimize');
});