Выравнивание текста по правому краю в flexbox
У меня есть flexbox, и элементы в нем — это элементы «p».
Я пытаюсь выровнять его правильно, но он все еще не работает, и все по-прежнему выровнено по центру.
.box1{
display: flex;
flex-direction: column;
text-align: right;
justify-content: space-between;
font-family: 'Merriweather', sans-serif;
font-size: 60px;
width: 30%;
}
Можно ли его правильно выровнять?
Ответы 2
align-items: flex-end; выровняет элементы <p> по правой стороне контейнера, но только если ширина контейнера больше ширины дочерних элементов.
div {
width: 200px;
display: flex;
flex-direction: column;
align-items: flex-end;
box-sizing: border-box;
border: solid red 3px;
}
p {
width: 100px;
text-align: right; // you might also want to use this so that your text is aligned to the far right side.
box-sizing: border-box;
border: solid lime 3px;
}<div>
<p>Testing 1...</p>
<p>Testing 2...</p>
<p>Testing 3...</p>
<p>Testing 4...</p>
</div>Flex-боксы могут быть немного сложными, поскольку свойство justify-content всегда выравнивает содержимое в том же направлении, что и flex-бокс (т. е. вертикально для столбцов и горизонтально для строк), тогда как align-items всегда выравнивает содержимое в поперечном направлении (т. е. по горизонтали для столбцов и по вертикали для строк). ряды). Например...
display: flex;
flex-direction: column;
justify-content:; /* aligns content vertically */
align-items:; /* aligns content horizontally */
display: flex;
/* flex-direction: row; is the default value */
justify-content:; /* aligns content horizontally */
align-items:; /* aligns content vertically */
Я также пробовал выравнивать элементы. Но конец в ориентации столбца на самом деле является нижней частью столбца...
@Tatjana, это объясняет и решает твою проблему?
Ваше решение сработало только тогда, когда я добавил выравнивание текста по абзацу) Но все равно спасибо
@Tatjana, демо в моем ответе показывает, что именно происходит. align-items: flex-end выравнивает элементы по правой стороне, но текст по умолчанию выравнивается по левому краю, поэтому он будет выглядеть так, как будто он не выровнен по правому краю, если ширина текстового материала меньше ширины их контейнера.
Примените выравнивание текста к абзацам:
.box1 p {
text-align: right;
}
нам тоже нужно увидеть ваш HTML