html - 如何使用 flexbox 在不移动周围元素的情况下扩展文本

Question

我正在尝试创建一个布局，以便在我单击“查看更多”以展开一个容器的文本时，周围的容器保持在相同的位置。

共有三个容器，每个容器都有两个包装器，顶部包含标题，底部包含图像、文本和按钮。我事先不知道标题的长度，所以为了确保框、文本和按钮对齐，我给每个容器justify-content: space-between 以便底部包装始终对齐。

问题出现在点击“查看更多”后，每个容器的底部 wrapper 向下移动以适应容器的高度。

     .main-container {
          display: flex;
          flex-direction: row;
        }
        .container {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .top-wrapper {
          display: flex;
          flex-direction: column;
          height: 100%;
        } 
        .bottom-wrapper {
          display: flex; 
          flex-direction: column; 
          justify-content: space-between;
        } 

    <div class="main-container">
      <div class="container">
          <div class="top-wrapper">
              <div class="title">
                    TITLE 1 IS LONG THAT IT GOES TO NEXT LINE
              </div>
          </div>
          <div class="bottom-wrapper">
              <div class="image-text-wrapper">
                  <div class="image-container">
                      <img class="image" src="https://dummyimage.com/200x200/000/000">
                  </div>
                  <div class=“text” id="text">
                   {{ text }}
                   //See More code
                  </div>
              </div>
              <button>
                BUTTON 1
              </button>
          </div>
      </div>
      <div class="container">
         //second container code
      <div>
      <div class="container">
         //third container code
      <div>
    </div>
   

我应该使用表格还是对此有一个简单的 CSS 修复？

您可以在这里找到完整的代码:Plunkr

Answer 1

尝试将以下内容添加到您的 .container 类中:

.container {
  align-self: flex-start;
}

align-self 属性允许您覆盖控制 flex 元素对齐的 align-items 设置。

并将以下内容添加到 .title 类:

.title {
  min-height: 50px
}

您可能需要尝试使用此设置，但它会阻止在图像和标题之间没有任何空格的情况下呈现图像。

警告:您在帖子中包含的 CSS 与我打开您的 Plunkr 链接时得到的不完全相同——.container 没有display: grid; 设置，但我认为这应该仍然有效。