CSS grid with flexbox align-content to bottom

问题

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;

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

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>

回答1:

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;
}

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>

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.

Example:

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>

回答2:

You need to make the .item div into a flex box so you can align it.

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>

来源：https://stackoverflow.com/questions/58142630/css-grid-with-flexbox-align-content-to-bottom

标签

css

flexbox

css-grid