flex布局：常用属性及文字图片对齐试验

图片和文字的中线对齐一直是一个头疼的问题。之前一直用flex布局做垂直居中对齐，但是从来没有认真研究过。

flex布局的兼容性：

我在ios和几款android手机上测试了一下可以兼容。

常用属性：

justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/

兼容写法：

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

几种属性展示如下：

1.水平垂直居中对齐

.box {

  display:flex;

  justify-content:center;

  align-items:center;

}

由于行高line-height的影响，可以发现文字和图片中线并没有对齐，只是他们所占的空间的中线对齐了。

为了使文字的中线和图片对齐，可以设置行高等于字体的大小。

2.水平分散对齐+垂直居中对齐

.box {

  display:flex;

  justify-content:space-around;

  align-items:center;

}

3.水平两端对齐+垂直居中对齐

.box {

  display:flex;

  justify-content:space-between;

  align-items:center;

}

4.水平平均分散+垂直居中对齐

（ps：新属性，chrome和firefox中已经有这个属性了，其他还没有，暂时不要用）

.box {

  display:flex;

  justify-content:space-around;

  align-items:center;

}

5. 垂直文本基线对齐+水平居中对齐

（ps：虽说是基线对齐，但是汉字和英文底线还是没有对齐...╮(╯3╰)╭）

.box {

  display:flex;

  justify-content:center;

  align-items:baseline;

}

6. 垂直上下铺满+水平居中对齐

（ps：子元素设置了高度则为设置的高度；未设置高度，则高度等于父元素的高度）

.box {

  display:flex;

  justify-content:center;

  align-items:stretch;

}