css中的flex精彩使用（一）

最近在写推推ui组件模态框的时候，有一处使用了flex布局和css的兄弟选择器（+），觉得很新颖，所以把它记录下来。
首先来看一下 我们实现的Modal的效果吧。

image.png

不要小看这个样式，里边要

<!--html-->
<div class="tt-modal">
        <div class="tt-mask"></div>
        <div class="tt-modal-wrap">
            <div class="tt-modal-body">
                <p>您的会员即将到期，请及时续费，以免影响您的权益。</p>
            </div>
            <div class="tt-modal-footer">
                <a class="tt-btn">下次再说</a>
                <a class="tt-btn">下次再说</a>
                <a class="tt-btn">立即续费</a>
            </div>
        </div>
    </div>

// css
/* 模态框 */
.tt-modal{
    display: none;
}
/* 控制模态框的显示 */
.tt-modal.show{
    display: block;
}
/* 模态框窗口容器 */
.tt-modal .tt-modal-wrap{
    position: absolute;
    width: 75%;
    max-width: 480px;
    top: 45%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: .4rem;
    z-index: 301;
}
/* 模态框内容区 */
.tt-modal .tt-modal-body{
    padding: 1.8rem .8rem 1.5rem;
    text-align: center;
    font-size: .8rem;
    line-height: 1.2rem;
    overflow: hidden;
}
/* 模态框尾部 */
.tt-modal .tt-modal-footer{
    display: flex;
    border-top: 1px solid #ddd;
}
/* 模态框尾部里按钮的样式 */
.tt-modal .tt-modal-footer .tt-btn{
    border: none;
    border-radius: 0;
    width: 100%;
    font-size: .8rem;
}
/* 模态框尾部中的按钮加上分隔 */
.tt-modal .tt-modal-footer .tt-btn + .tt-btn{
    border-left: 1px solid #ddd;
}
/* 控制模态框内容区的内边距 */
.tt-modal .tt-modal-body.no-padding{
    padding: 0;
}
/* 图片形式的模态框样式 */
.tt-modal .tt-modal-body .tt-modal-img{
    display: block;
    width: 100%;
    border-radius: .3rem;
}
/* 纯图片模态框里的关闭按钮 */
.tt-modal .tt-modal-close{
    position: absolute;
    left: 0;
    right: 0;
    width: 1.3rem;
    line-height: 1.3rem;
    margin: auto;
    bottom: -3rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 100;
    color: #eee;
    border: 1px solid #eee;
    border-radius: 50%;
}

这段样式中好几处需要注意的点：

1.tt-modal-wrap框自动垂直居中

按照我的想法，可能会通过如下的两种方式实现水平处置居中

image.png

.style1{
  display:fixed;
  width:100px;
  height:100px;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto
}
.style2{
  position:absolute;
   width:100px;
  height:100px;
  left:50%
  right:50%;
  magin-left:-50px;
  margin-top:-50px
}

其实对这两段代码，我们都很熟悉，所以不过多解释。但是使用这两种样式的前提是要明确知道这个区块的高度和宽度，在高度和宽度不确定的情况下，这样的样式就显得有点鸡肋。根据文章我们可以使用css3使用的新属性transform属性来很好的解决这个问题。代码如下：

.tt-modal .tt-modal-wrap{
    position: absolute;
    width: 75%;
    max-width: 480px;
    top: 45%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: .4rem;
    z-index: 301;
}

这段代码中 transform: translateY(-50%);狠毒，原理是如果在 transform 的转化属性中使用百分比，那这个百分比的参照物就是当前盒子的宽度或高度。

2.按钮区域按钮平分整个区块

image.png

这块要实现的效果就是如果有2个按钮，每个按钮各占50%，要过有三个，就各占33%，反正就是不能换行，平均分配空间。要实现这样的效果最常用的方法就是使用flex布局。但是我写出来的样式肯定没有人家写的好，下面是某位大神写的样式。

/* 模态框尾部 */
.tt-modal .tt-modal-footer{
    display: flex;
    border-top: 1px solid #ddd;
}
/* 模态框尾部里按钮的样式 */
.tt-modal .tt-modal-footer .tt-btn{
    border: none;
    border-radius: 0;
    width: 100%;
    font-size: .8rem;
}
/* 模态框尾部中的按钮加上分隔 */
.tt-modal .tt-modal-footer .tt-btn + .tt-btn{
    border-left: 1px solid #ddd;
}

a brife handler, a perfect handler. 父节点代码使用display:flex;子节点代码使用width:100%;另一个需要注意的点就是最后一个css区块中的兄弟选择器（+）的使用，感觉很别出心裁，比我的写法优秀许多。