Отодвинуть контент
В настоящее время у меня есть 3 логотипа h1 в HTML с разными классами
<h1 class = "logo"><span>Rec</span></h1>
<h1 class = "logo2">X</h1>
<h1 class = "logo3">change</h1>
Когда я нахожусь над логотипом2, я хочу, чтобы можно было вытолкнуть логотип и логотип3 путь ... в настоящее время я могу отодвинуть логотип3 (вправо) в сторону ... однако я не могу получить доступ к предыдущему логотипу, чтобы отодвинуть его (который я хотел бы переместить влево).
.logo2:hover ~ .logo3{
transition: all ease-in-out 500ms;
padding-left: 0.3em;
}
Как мне получить доступ к первому логотипу. Я не хочу, чтобы logo2 перемещал только logo и logo3 ..
Ответы 1
Некоторые уловки flexbox делают то, что вы хотите. ;).
Если вы новичок в flexbox, я рекомендую это руководство.
Фрагмент
.container {
display: flex;
justify-content: center;
}
.logo2 {
text-align: center;
}
.logo2:hover {
flex: 1;
transition: all ease-in-out 500ms;
}<div class = "container">
<h1 class = "logo logo1"><span>Rec</span></h1>
<h1 class = "logo logo2">X</h1>
<h1 class = "logo logo3">change</h1>
</div>Не могли бы вы объяснить это немного подробнее или показать картинку с желаемым эффектом? В вашем коде элементы h1 расположены один под другим, как и в моем.
Поэтому, если вы переключите отображение на встроенный гибкий и направление гибкости на ряд, тогда они будут в порядке с Rec слева, X посередине и Change справа. Я хочу оставить X посередине и нажать Rec влево и Change вправо. Извините, если в первый раз это не имело смысла.
Я только что отредактировал свой ответ. Вы можете настроить точные значения, но помогает ли это вам, или я все еще вас не понимаю?
Это правильно, спасибо, но ничего не происходит, когда я нахожусь рядом со своим, но я разберусь, спасибо.
И последнее: есть ли способ сделать это с помощью inline-flex?
Для контейнера? Конечно, но тогда вам также нужно определить ширину. display: inline-flex; width: 100%;.
Спасибо за это, но контент находится рядом, мне нужны отступы слева и справа. Например, x находится посередине, rec - слева, а изменение - справа. В ряд.