[CSS面试题] 如何使得左右两边没有确定宽度的元素保持其中文本的自适应

Question

需要实际的代码, 而不是解题思路 :

<div class="bg">
    <div>
        <span>文案文案文案文案文案文案文案文案文案文案文案文案文案文案</span>
    </div>
    
    <div>
        <button>按钮按钮</button>
    </div>
</div>

Answer 1

我也来试试 :

<style type="text/css">
    .bg {
        display: flex;
        justify-content: space-between;
        width: 440px;
        background-color: beige;
        align-items: center;
    }


    img {
        width: 44px;
        height: 44px;
    }

    .left {
        flex: 1;
    }

    .right {
        flex: none;
    }
</style>

其中, html为 :

<div class="bg">
    <img src="https://sponsor-static.ostack.cn/a0178ced5d32d23e1e29fe810c91de02.jpg" alt="">
    <div class="left">
        <span>文案文案文案文案文案文案文案文案</span>
    </div>

    <div class="right">
        <button>按钮按钮</button>
    </div>
</div>