css弹性盒简介之一

css弹性盒简介之一

css布局经历了使用table和float布局的过程，W3C推出了flexbox的布局方式。

Flexbox基础

flex container

使用div或者其他标签作为容器，用于放置其他子元素。

flex items

嵌套在容器中的直接元素自动转为flex item，子元素的子元素便不是flex item。

实例

<!-- html part -->
<div class="container">
  <div>A flex item</div>
  <div>Another flex item</div>
  <div>A third flex item</div>
</div>

/* css part */
.container {
  display: -webkit-flex;
  display: flex;
}

.container div {
  -webkit-flex: 1;
  flex: 1;
}