Я использую 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: В этом примере я назначил фиксированную ширину двум дочерним элементам - это просто для простоты. В реальном приложении все ширины динамически изменяются в зависимости от содержимого, считанного из базы данных во время выполнения. Следовательно, любое решение, основанное на фиксированных размерах, не будет работать.