flex:1与动态文本元素实例页面

展示

代码

• HTML：

  <h4 class="fill">默认</h4>
  <div class="container">
      <img src="/images/common/1.jpg">
      <p>右侧按钮没有设置flex:none，表现为最小内容宽度。</p>
      <button>按钮</button>
  </div>
  
  <h4 class="fill">&lt;p&gt;设置flex:1</h4>
  <div class="container">
      <img src="/images/common/1.jpg">
      <p>描述信息元素使用了flex:1，按钮正常显示了。</p>
      <button>按钮</button>
  </div>

• CSS：

  .container {
      display: flex;
      padding: .5rem;
      border: 1px solid lightgray;
      background-color: #fff;
  }
  img {
      width: 3rem; height: 3rem;
      margin-right: .5rem;
      object-fit: cover;
  }
  button {
      align-self: center;
      padding: 5px;
      margin-left: .5rem;
  }
  .container ~ .container p {
      flex: 1;
  }