flex双列布局

最近遇到了这么个布局要求：

• 两列布局，两列等宽平分父元素宽度，并且两列之间隔5px。
• 两列等高，高度取决于最高列的高度。

查阅了很多资料和很多两列布局的方式，发现了css3中有这么一个新属性，可以完美的完成这项工作。并且为双列布局打开了一个新的世界——flex，弹性盒模型。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

flex的弹性布局可以根据子元素的个数，将容器平分或者按照一定的比例，对子元素进行分配宽度。 可以将任何一个容器都指定为flex布局：

    .box{
      display: flex;
    }

对各个浏览器进行兼容处理：

    .box{
      display: -webkit-flex; /* Safari */
      display: -moz-flex;  /* firefox */
      display: flex;
    }

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

属性：

• flex-direction: 属性决定主轴的方向（即项目的排列方向）

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }

• flex-wrap：决定项目是否排在一条轴线上。

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

• flex-flow：是flex-direction 和 flex-wrap的简写形式。

    .box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }

• align-items：属性定义项目在交叉轴上如何对齐。

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

根据flex这一属性，便可以完美的实现等高布局的要求，为布局提供了一个新的方法。

以上属性使用在容器上，下面的方法将使用在项目上：

• order： 属性定义项目的排列顺序。数值越小的越靠前，默认值为0。

    .item {
      order: <integer>;
    }

• flex-grow：属性定义项目的放大比例。默认为0.

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink: 属性定义了项目的缩小比例，默认为1.

注：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

• flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

    .item {
      flex-basis: <length> | auto; /* default auto */
    }

注：当该属性设置为固定的数值时，例如250px,该项目则占据固定的宽度。

• flex（建议使用该属性代替上面3个属性）： 为flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

简写： flex: 1; 将项目平分容器的空间。

根据上面的属性整理，便可以很容易的解决项目平分、等高的新需求。然而有一个问题还没有解决，就是『间隔5px』。

再深入学习flex,发现flex果然特别的给力，它不仅能够自动推算属性值、计算宽度。而且可以通过设定某一个项目的宽度，其他的项目自动计算宽度的功能。于是，可以在任意一个项目上添加属性：

margin-left: 5px;

浏览器会自动计算剩余空间的大小，并平分给两个项目。代码如下：

.flow-tip {
      display: flex;
      flex-flow: row;
   }
.flow-list-up,
.flow-list-down {
    flex: 1;
    background-color: #e4e4e4;
    border-radius: 2px;
    padding: 8px;
    &.ui-state-hover {
        opacity: 0.6;
    }
}
.flow-list-down {
    margin-left: 5px;
}