Flex-end не работает с flexbox
Я настраиваю навигацию, и я новичок в Flexbox. Я стараюсь иметь левый и правый элементы с flex-end и flex-start (кажется, что у flex-around слишком много места для меня). Все выровнено по левому краю, и я, кажется, не понимаю, что делаю не так. Вот мой код:
<header className = "header">
<div className = "leftSide">
<div className = "one">One of left elements</div>
</div>
<div className = "rightSide">
<p className = "two">One of right elements</p>
</div>
</header>
CSS:
.header{
width: 100%;
height: 140px;
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
align-items: center;
}
.leftSide{
margin-left: 20px;
display: flex;
justify-content: flex-start;
}
.rightSide{
margin-right: 20px;
display: flex;
justify-content: flex-end;
}
@TemaniAfif Недостаточно установить ширину заголовка на 100%, чтобы выровнять два элемента слева и справа внутри него?
вы не выравниваете элемент, вы выравниваете текст внутри элемента, элементы выравнивания применяются к внутренним элементам
@TemaniAfif Простите, у меня плохо. Я пытался выровнять элементы. Я заменил align-items на justify-content, но, похоже, он тоже ничего не делает.
вам нужно применить их к родительскому контейнеру :) вот что я пытаюсь объяснить. Justify-content и align-items одинаковы, их необходимо указать в гибком контейнере.
@TemaniAf, если я вроде понимаю, о чем вы говорите, но в то же время, если у меня есть только один родительский элемент и два дочерних элемента, я не могу использовать и flex-end, и flex-end для этого одного родителя, если я не использую пробел или пробел -между. Каким-то образом я смог добиться того, чего хочу, установив margin-left: auto в элемент rightSide :)
просто используйте для left Side margin-right: auto и для right Side margin-left: auto.
ничего плохого, но гибкий элемент сжимается, чтобы соответствовать содержимому (например, встроенный блок), поэтому нечего выравнивать