Flexbox wrap - различное выравнивание для последней строки

Я использую flex box, чтобы выровнять два элемента слева и справа от контейнера, а вертикальное выравнивание по центру. Здесь очень простой пример того, чего я пытаюсь достичь.

HTML:

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>

CSS

.container {
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
}

Здесь jsfiddle примера.

Это работает отлично, если экран достаточно широк, чтобы поместить оба внутренних div в одну строку. Однако, когда размер экрана мал (например, мобильный телефон), и divs обертываются во вторую линию, вторая также выравнивается с левой стороной (то есть flex-start). Как заставить второй div всегда выравниваться по правой границе, независимо от того, находится ли он в первой строке или завернут на второй?

EDIT: В этом примере я назначил фиксированную ширину двум дочерним элементам - это просто для простоты. В реальном приложении все ширины динамически изменяются в зависимости от содержимого, считанного из базы данных во время выполнения. Следовательно, любое решение, основанное на фиксированных размерах, не будет работать.

Ответы

Ответ 1

Вы можете попробовать добавить левое поле, чтобы направить ваш элемент .second вправо:

.second {
    margin-left: auto;
}


.container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.first {
  background-color: yellow;
  width: 200px;
  height: 100px;
}
.second {
  background-color: blue;
  width: 200px;
  height: 100px;
  margin-left: auto;
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

Ответ 2

Я нашел решение, но оно довольно "хакерское" в природе (см. демо здесь, объяснение позже), в том смысле, что оно требует, чтобы вы явно знали ширину родительского контейнера, который инициирует изменение макета на основе @media.

Причина, по которой ваш код не работает, объясняется путаницей того, как работает align-self. В модели flexbox "align" означает выравнивание по поперечной оси (то есть в обычном смысле направления макета "строка", которое будет ссылаться на вертикальное выравнивание), тогда как "оправдание" относится к выравниванию вдоль основного оси (т.е. строки). Чтобы лучше объяснить мою точку зрения, я присоединяю образ, сделанный Крисом Койером из flexbox guide:

align-self description

Следовательно, align-self: flex-start означает указание .first совместить верхнюю часть контейнера, а align-self: flex-end означает сообщение .second для выравнивания в нижней части контейнера. В этом случае, поскольку вы не указали явную высоту для родителя, родитель возьмет на себя высоту своего самого высокого ребенка. Поскольку как .first, так и .second равны 100px, родительский элемент также будет иметь вычисленную высоту 100px, поэтому не имеет никакого значения в выравнивании (потому что оба они находятся заподлицо с началом и концом поперечной оси).

Хак будет переключать flex-direction на строку со следующими ограничениями: Вы знаете, насколько широким будет ваш контейнер, или явная ширина его дочерних элементов. В этом случае точка останова будет быть в 400px, где .first и .second будут пересекаться друг с другом.

.container {
    width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100px;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
    align-self: flex-start;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
    align-self: flex-end;
}

@media screen and (max-width: 400px) {
    .container {
        height: 200px;
    }
}

Опять же, вот сценарий доказательной концепции, измененный с вашего оригинального: http://jsfiddle.net/teddyrised/cncozfem/2/