CSS сетка с flexbox выровнять контент по низу

Question

У меня проблемы с получением содержимого в сетке для корректного освещения.Я добавил фрагмент кода, чтобы показать, что я пытаюсь сделать.Содержимое textWrapper всегда должно находиться внизу его родительского элемента .item.Я попытался использовать align-content для textWrapper

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 в гибкий блок, чтобы вы могли выровнять его.

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>