css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex

遇到的问题

在实际工作的过程中经常遇到图片文字的混排，需要图片与一段文字垂直居中，这个实现方法以前一直非常复杂，而flex是解决这个问题比较好的办法；

css代码

display:flex;

flex的是Flexible的缩写，意为弹性。可以在单行或者多行的盒状模型中提供很好的灵活性，所以它也是自适应友好的。

图文混排垂直居中基本用法

用flex实现文字和图片在同一行的时候的垂直居中排列方式：
将父元素容器的display属性设为flex，而子元素的垂直方向上的margin设置为auto，就能实现图文混排的图片与文字垂直居中：
css代码：

<style>
    .container{
            display:flex;
            width:30rem;
            height:10rem;
            background-color: #faf;
            position:absolute;
            top:50%;
            left:50%;
            margin:-5rem 0 0 -15rem;
            border-radius:2rem;
        }
        .icon{
            width:7rem;
            height:7rem;
            background-image: url(img/icon.png);
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
            margin:auto auto;
        }
        p{
            font-size:20px;
            margin:auto auto;
        }
</style>

html代码：

    <div class="container">
        <div class="icon"></div>
        <p>这是一段文字</p>
    </div>

最后实现的效果：

这样排列，最终实现两个元素垂直居中，其实多个元素同样也能实现，其中每个元素在默认情况下元素的左右的margin值是一致的。

多项元素在一行中均匀分布

在网页设计中会经常见到许多块分布的块一行或者多行中均匀分布的情况，这种情况以前一般用固定子元素大小，并将元素的float设为left来实现，而用flex可以简化其实现的方式：
css代码片段：

.container2{
    width:60rem;
    height:20rem;
    display:flex;
    background-color: #fdf;
    justify-content:space-around;
}
.box{
    width:8rem;
    height:8rem;
    background-color: #a5a;
    margin:auto auto;
    font-size:2rem;
    color:white;
    line-height:8rem;
    text-align:center;
}

html片段:

<div class="container2">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

结果：

这样就算我们去掉其中的一个或者多个剩下来的在容器内部的子元素同样能够均匀排列：

除了设置子元素的margin垂直方向为auto之外，还能通过设置容器元素align-items来控制子元素垂直居中
css代码片段:

.container3{
    width:60rem;
    height:20rem;
    display:flex;
    background-color: #fdf;
    justify-content:space-around;
    align-items: center;
}
.box2{
    width:8rem;
    height:12rem;
    background-color: #c5a;
    font-size:2rem;
    color:white;
    line-height:12rem;
    text-align:center;
}

html代码片段:

<div class="container3">
    <div class="box">1</div>
    <div class="box2">2</div>
    <div class="box">3</div>
    <div class="box2">4</div>
    <div class="box">5</div>
    <div class="box2">6</div>
</div>

这样即便是大小不一样的方块设计同样可以实现水平居中：

align-items:center || flex-start || flex-end || stretch || baseline
分别表示，按照中轴线，容器上沿，容器下沿，高度充满容器，基准线（以文字）
其中还有许多属性需要一一仔细实验
包括

justify-content/*在主轴上的对齐方式*/
flex-direction:/*顺序*/
flex-wrap:/*换行*/

未完待续。。。