带有flexbox对齐内容的CSS网格到底部

Question

我在使内容正确放入网格内时遇到问题。我添加了一个代码片段以显示我要执行的操作。 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>

Answer 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>

Answer 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>