flex布局实现居中

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、Flexbox的应用场景

根据元素个数的变化，自主的适配容器的占比
例如：电商页面的标签

二、具体实例

1.占比例分配：

样式如下（示例）：

代码如下（示例）：

  .flex_parent{
        display: -webkit-flex; //标示使用flexbox弹性盒子
        color: #fff;
        text-align: center;
        width: 300px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
    }
    .item_one{
       flex:1;             //flex:num 占容器比例 四分之一
       background-color: orange;
       
    }
    .item_two{
        flex:2;           //占容器四分之二
        background-color: blueviolet;
    }
    .item_three{
        flex:1;
        background-color: blue;
    }

2.不定宽高的垂直水平居中：

下面给大家介绍两种 这是面试经常遇到的哦
1.使用绝对定位实现
2.利用弹性盒子实现

1.使用绝对定位实现（示例）：

    body{
        background-color: rebeccapurple;
        margin: 0;
        padding: 0;
    }
    .my_parent{
        background-color: peru;
        text-align: center;
        line-height: 160px;
        font-size: 20px;
        color: #fff;
        /* 重点来咯 */
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        -webkit-transform: translate(-50%,-50%);
        border-radius: 6px;
    }

2.利用弹性盒子实现：

    .flex_parent{
        width: 300px;
        height: 160px;
        background-color: peru;
        color: #fff;
        /* 重点来咯 */
        justify-content: center;   /* 子元素水平居中 */
        align-items: center;       /* 子元素垂直居中 */
        display: -webkit-flex;
    }
    .flex_item{
    	padding: 20px;
        text-align: center;
        font-size: 20px;
        line-height: 90px;
        background-color: #000;
    }

  <div class="flex_parent">
        <div class="flex_item">利用flex实现</div>
    </div>

效果如下：
结尾：
不喜勿喷，生命不易。任何建议都可评论私信哦