javascript - 弹性布局怎么解决？

Question

两个div弹性布局，左边宽度自适应且距离右边div10px，右边的div也是弹性布局且右边的div超出换行，左边的div跟右边div的第一行对齐

Answer 1

要求：

1. 左右两侧是弹性布局；
2. 左侧宽度自适应，左侧 div 与右侧 div 间距为 10px；
3. 右侧 div 内容，会自动换行。

实现：

1. 设置 .container 属性 display: flex;；

2. 左侧 .div1：

   1. 设置 flex-shrink: 0;，避免宽度被压缩，此时 .div1 宽度取决于其内容（内容不会换行）。
   2. 设置 align-self: flex-start;，使 .div1 与 .div2 首行对齐。

3. 右侧 .div2：

   1. 设置 flex-grow: 1;，自动拉伸，填满.container剩余空间。
   2. 设置 display: flex; 与 flex-wrap: wrap;，内部 span 元素在超出后会自动换行。

---

参考代码：

CSS:

    .container {
        width: 100%;
        display: flex;
    }

    .div1 {
        margin-right: 10px;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .div2 {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
    }

html:

<div class="container">
    <div class="div1">
        <!--content 1-->
        content 1-122323
    </div>
    <div class="div2">
        <!--content 2-->
        <span>content 2-1</span>
        <span>content 2-2</span>
        <span>content 2-3</span>
        <span>content 2-4</span>
        <span>content 2-5</span>
        <span>content 2-6</span>
        <span>content 2-7</span>
    </div>
</div>

Answer 2

看看是不是你要的效果
不确定是否理解对

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

<style>
  .container {
    display: flex;
    align-items: flex-start;
  }
  
  .left {
    flex: 1;
    margin-right: 10px;
  }
  
  .right {
    flex: 1;
    overflow: hidden; /* 防止超出换行 */
  }
</style>