css - Flex box alignment，尝试将 'stretch' 组合到 parent 和 'center' 到 one child

Question

我有下面的代码和以下问题:

1. 我需要 .lt 的所有子级获得最大的高度。(请参见第一个 .lt 上的红色边框}。为此我使用 对齐元素:拉伸(stretch);

2. 我需要元素 .left 的内容以 v/h 为中心。所以我使用 align-self:center; 但这会取消拉伸(stretch)。 (红色边框缩小)

3. 我需要将 .right 元素左上对齐。

.container { 
display: flex;
flex-direction:column;
}

.lt{
align-items: stretch;
border: 1px solid #e3e3e3;
display: flex;
margin-bottom: 1.5rem;
}

.left { 
border-right: 1px solid red;
flex: 0 0 90px;
padding: 8px;
align-self:center;
justify-content: center;
}

.right { 
justify-self: flex-start;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75"/>
        abcd
      </a>
    </div>
    <div class="right">
dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
       the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
</div>  



    <div class="lt">
      <div class="left">
        <a href="">
          <img src="https://via.placeholder.com/75"/>
          abcd
        </a>
      </div>
      <div class="right">
        dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
    </div>
</div>    

Answer 1

您可以使用简单的渐变来替换边框，因为您知道图像的宽度，因此您可以正确放置它:

.container {
  display: flex;
  flex-direction: column;
}

.lt {
  align-items: stretch;
  border: 1px solid #e3e3e3;
  display: flex;
  margin-bottom: 1.5rem;
  background:
    linear-gradient(red,red) 105px 0/1px 100% no-repeat;
}

.left {
  flex: 0 0 90px;
  padding: 8px;
  align-self: center;
  text-align:center;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>



  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
  </div>
</div>

或者简单地使用嵌套的 flexbox 容器。保持第一个拉伸(stretch)并将内容居中:

.container {
  display: flex;
  flex-direction: column;
}

.lt {
  align-items: stretch;
  border: 1px solid #e3e3e3;
  display: flex;
  margin-bottom: 1.5rem;
}

.left {
  flex: 0 0 90px;
  padding: 8px;
  border-right:1px solid red;
  display:flex;
  flex-direction:column;
  justify-content: center;
  text-align:center;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>



  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
  </div>
</div>