css3实现左右div高度自适应且内容居中对齐

主要运用了css3的弹层布局，直接上代码：

效果：左边盒子宽度固定、内容居中对齐、与右侧盒子高度相等，右侧自动缩放

 

html：

<div class="main">
    <div class="left">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题1111</div>
    <div class="right">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内2222222222222222222222容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容333333333333333333333333333333333333333</div>
</div>

 

css：

            .main{
                background: #f9f9f9;
                margin: 50px auto;
                display: flex;  /*设置父盒子为弹层盒模型*/
            }
            .left{
                width: 300px;
                background: red;
                flex-grow: 0;  /*设置左边盒子 不放大  默认值为0时 既不放大*/
                flex-shrink: 0;/*设置左边盒子 不缩小  默认值为1时 既缩小*/
                display: flex; /*设置左边盒子为弹层盒模型*/
                align-items: center; /*设置左边盒子交叉轴对齐方式为居中对齐*/
            }
            .right{
                background: yellow;
                flex-grow: 1;  /*设置右侧盒子 自动放大*/
                flex-shrink:1; /*设置右侧盒子 自动缩小  默认值为1 可不写*/
            }