flexBox CSS3

by spacexplorer

HTML

<body>
    <div class="box">
      <div>un</div>
      <div>deux</div>
      <div>trois</div>
    </div>
  </body>

CSS

.box {
  /* basic styling */
  width: 350px;
  height: 95px;
  border: 1px solid #555;
  font: 14px Arial;

  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;
}

.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;

  -moz-transition: width 0.7s ease-out;
  -o-transition: width 0.7s ease-out;
  -webkit-transition: width 0.7s ease-out;
  transition: width 0.7s ease-out;
}

/* our colors */
.box > div:nth-child(1){ background : #FCC; }
.box > div:nth-child(2){ background : #CFC; }
.box > div:nth-child(3){ background : #CCF; }

.box > div:hover { 
  width: 200px;
}