CSS 网格与 flexbox 对齐内容到底部答案

【问题标题】：CSS grid with flexbox align-content to bottomCSS 网格与 flexbox 对齐内容到底部
【发布时间】：2020-01-28 06:10:21
【问题描述】：

我在获取网格内的内容以正确显示时遇到问题。我添加了一个代码 sn-p 来显示我正在尝试做的事情。 textWrapper 内容应始终位于其父 .item 的底部。我尝试在 textWrapper 上使用 align-content

align-content: flex-end;

但这对我不起作用。如何让灰色 textWrapper 始终位于

的底部

确保您的浏览器尺寸变小，以便白色图像换行到下一行。这样你会看到右边的灰色 textWrapper 没有粘在父级的底部。

body {
  background: #20262E;
  font-family: Helvetica;
  width: 100%;
}

.component {
   width: 100%;
}

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 50%);  
}

.item {
  border: 1px solid green;
}

.images-collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image {
  width: 100px;
  height: 100px;
  border: 1px solid white;
}

.textWrapper {
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  background-color: gray;
}

.text {
  text-align: center;
  color: white;
  width: 300px;
}

<div class="component">
  <div class="grid">
    <div class="item">
      <div class="images-collection">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
      </div>
      <div class="textWrapper">
         <div class="text">
          <p>This is my title</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
        </div>
      </div>
    </div>
     <div class="item">
      <div class="images-collection">
        <div class="image"></div>
      </div>
      <div class="textWrapper">
         <div class="text">
          <p>This is my title</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

回滚剪切，以便问题及其答案有意义。以后请在新问题中添加相关的sn-p，而不是编辑旧问题
这是个好主意。

标签： css flexbox css-grid

【解决方案1】：

只需更改您的.item 即可添加：

.item {
  display: flex; /* Make it flex */
  flex-direction: column; /* Make images and text go above one another */
  justify-content: space-between; /* If the parent is bigger than image + text, add space between them */
  border: 1px solid green;
}

这将产生一个执行此操作的 HTML 标记：

<div class="component">
  <div class="grid">
    <div class="item">
      <!-- Everything within the first div is placed at the top -->
      <div>
        Everything in here is placed at the top.
      </div>
      <!-- Everything within the second div is placed at the bottom -->
      <div>
         Everything in here is placed at the bottom.
      </div>
    </div>
  </div>
</div>

有了这个，你可以在第一个 div 中添加更多的 div、文本图像等，它将被放置在顶部。第二个 div 中的所有内容都将放在底部。

例子：

body {
  background: #20262E;
  font-family: Helvetica;
  width: 100%;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid green;
}

/* Class is purely decorative to show div outline, is not actually required */
.top-content{
  color: white;
  text-align: center;
  border: 1px solid red;
}

.component {
   width: 100%;
}

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 50%);  
}

.images-collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image {
  width: 100px;
  height: 100px;
  border: 1px solid white;
}

.textWrapper {
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  background-color: gray;
}

.text {
  text-align: center;
  color: white;
  width: 300px;
}

<div class="component">
  <div class="grid">
    <div class="item">
      <!-- Everything within the first div (top-content) is placed at the top -->
      <div class="top-content">
        <div class="images-collection">
          <div class="image"></div>
          <div class="image"></div>
          <div class="image"></div>
          <div class="image"></div>
          <div class="image"></div>
        </div>
        <div>
          Some other content.
        </div>
        <div>
          Some other content.
        </div>
        <div>
          Some other content.
        </div>
      </div>
      <!-- Everything within the second div (textWrapper) is placed at the bottom -->
      <div class="textWrapper">
         <div class="text">
          <p>This is my title</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
        </div>
      </div>
    </div>
     <div class="item">
      <!-- Everything within the first div (top-content) is placed at the top -->
      <div class="top-content">
        <div class="images-collection">
          <div class="image"></div>
        </div>
        <div>
          Some other content.
        </div>
      </div>
      <!-- Everything within the first div (textWrapper) is placed at the top -->
      <div class="textWrapper">
         <div class="text">
          <p>This is my title</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

如果我想在其中放另一个 div 然后 justify-content: space-between;行不通。因此，例如，我只希望 textWrapper 位于底部，而其他两个 div 位于顶部？
@me-me 我已更新我的答案以包含更多热门内容。
是的，我想你可以做到。我更多的是谈论在顶级内容之外添加另一个 div。基本堆叠。这样您就可以只挑出底部的一个，而将其他多个 div 堆叠起来。
@me-me 据我所知，由于justify-content 属性限制，这是不可能的。您可以使用justify-content: space-between 将两个元素弯曲到顶部和底部，但是如果添加第三个元素，它们将被放置在顶部、中间和底部。不幸的是，这是一个限制，因此解决方案是将我们想要的元素放在第一个 div 的顶部，将我们想要的元素放在第二个 div 的底部。

【解决方案2】：

你需要将 .item div 变成一个弹性盒子，这样你才能对齐它。

body {
  background: #20262E;
  font-family: Helvetica;
  width: 100%;
}

.component {
   width: 100%;
}

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 50%);  
}

.item {
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.images-collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image {
  width: 100px;
  height: 100px;
  border: 1px solid white;
}

.textWrapper {
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  background-color: gray;
}

.text {
  text-align: center;
  color: white;
  width: 300px;
}

<div class="component">
  <div class="grid">
    <div class="item">
      <div class="images-collection">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
      </div>
      <div class="textWrapper">
         <div class="text">
          <p>This is my title</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
        </div>
      </div>
    </div>
     <div class="item">
      <div class="images-collection">
        <div class="image"></div>
      </div>
      <div class="textWrapper">
         <div class="text">
          <p>This is my title</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：