Flexbox的CSS网格内容从底部对齐 [英] CSS grid with flexbox align-content to bottom

问题描述

我在使内容正确放入网格内时遇到问题。
我添加了一个代码段以显示我要执行的操作。 textWrapper内容应始终位于其父.item的底部。我尝试在textWrapper上使用align-content

I'm having issues with getting content inside a grid to alight correctly. I added a code snippet to show what I'm trying to do. The textWrapper content should always be at the bottom of its parent .item. I tried using align-content on the textWrapper

align-content: flex-end;

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

But it wont work for me. How can I get the gray textWrapper to be always at the bottom of

的底部，请确保将浏览器的尺寸缩小，以使白色图像换行。这样，您将看到右侧的灰色textWrapper不粘在父级的底部。

Make sure your browser is sized down small so the white images wrap to next line. This way you will see that the right had side gray textWrapper is not sticking to the bottom of the parent.

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>

推荐答案

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

Just change your .item to add:

.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标记：

This will result in a HTML markup that does this:

<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中的所有内容都将放置在底部。

With this you can add more divs, text images etc in the first div and it will be placed at the top. Everything in the second div will be placed at the bottom.

示例：

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>

这篇关于Flexbox的CSS网格内容从底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！