Невозможно выровнять элемент во flexbox

Question

В настоящее время я пытаюсь выровнять последний элемент в flexbox с высотой выше, чем его элементы в нижней части flexbox, но мне не удается это сделать.Я знаю, что могу использовать align-content: stretch, который является поведением по умолчанию, но я не хочу, чтобы пропуски между моими элементами.

Я просто хочу, чтобы «More Stuff» был внизу окна и выровненнаправо, и я не могу понять, как это сделать, прочитав спецификацию flexbox.

https://jsfiddle.net/k8dec2bx

HTML:

<div class="flex">
  <img/>
  <div>
    <p>
      Stuff
    </p>
  </div>
  <div class="bottom">
    <p>
      More Stuff
    </p>
  </div>
</div>

CSS:

.flex{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 500px;
  height: 600px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

img{
  width: 100%;
  height: 250px;
}

.flex div{
  width: 100%;
}

.bottom{
  align-self: flex-end;
  text-align: right;
}

Answer 1

Проще увидеть, если вы положили разноцветные фоны на свои элементы, но ваши два элемента имеют ширину 100% и располагаются друг над другом в центре страницы из-за flex-wrap: wrap.

Итак, чтобы выровнять или выровнять элементы, вам нужно сначала задать направление изгиба.(Задавая направление, когда любая строка столбца меняет то, что считается главной осью, вы можете увидеть диаграмму на MDN )

Строка установит основную ось как лево-правую, а столбец -главная ось вверх-вниз.

После этого вы можете использовать Justify-content: space-beween, чтобы расположить элементы как можно больше в поле div вдоль главной оси.(align-content контролирует все, что установлено в качестве противоположной оси)

    .flex{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      align-content: flex-start;
      width: 500px;
      height: 600px;
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }

Answer 2

Сначала вам нужно поместить flex-direction: column на элемент .flex при попытке выровнять элементы по вертикали.Отсюда можно просто манипулировать flex-grow и flex-shrink для достижения желаемого результата.

Если вы хотите, чтобы элемент .bottom hard находился снизу, все, что вам нужно сделать, это сказать другому элементу (который я дал классу .top, чтобы прояснить ситуацию), что он долженрасти, чтобы занять все доступное пространство.Это можно сделать с помощью flex-grow: 1.

. Это можно увидеть следующим образом:

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; /* New */
  align-content: flex-start;
  width: 500px;
  height: 600px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

img {
  width: 100%;
  height: 250px;
}

.flex div {
  width: 100%;
}

.top {
  flex-grow: 1; /* New */
}

.bottom {
  align-self: flex-end;
  text-align: right;
}

<div class="flex">
  <img src="http://placehold.it/100" />
  <div class="top">
    <p>
      Stuff
    </p>
  </div>
  <div class="bottom">
    <p>
      More Stuff
    </p>
  </div>
</div>