Как прижать блок к правому краю css flex

CSS flex. Как прижать только один дочерний элемент к краю

Есть блок с несколькими дочерними элементами, и требуется, чтобы один был прижат к правому краю, а остальные к левому. Заранее спасибо.

Отслеживать
задан 1 мая 2018 в 18:11
BaseScript BaseScript
421 1 1 золотой знак 3 3 серебряных знака 12 12 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.wrapper < display: flex; flex-flow: row wrap; >.child < margin: 0 10px; >.righted

 child1
 child2
 child3
 child4

Отслеживать
14.6k 6 6 золотых знаков 36 36 серебряных знаков 71 71 бронзовый знак
ответ дан 1 мая 2018 в 21:55
128 6 6 бронзовых знаков

Для того чтобы прижать елемент к краю эму нужно задать margin-left:auto . Если елемент который вы хотите прижать не крайний с права установите order:2 для этого елемента.

Отслеживать
ответ дан 1 мая 2018 в 20:39
Дмитрий Мирошниченко Дмитрий Мирошниченко
807 4 4 серебряных знака 11 11 бронзовых знаков
Очень информативно, спасибо, буду знать.
4 мая 2018 в 20:08
@Дмитрий Мирошниченко === шикарное решение .
3 сен 2022 в 19:46

css
позиционирование

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Как прижать элемент к правому краю блока родителя. HTML CSS.

Вопрос: Есть блок с несколькими дочерними строчными элементами, и требуется, чтобы один последний дочерний span элемент был прижат к правому краю родительского блока, а остальные к левому.

Ответ AI GhatGPT:

Вы можете использовать свойство CSS text-align для выравнивания всех дочерних элементов span блока div по левому краю, а затем применить свойство float:right ; к последнему дочернему элементу span , чтобы прижать его к правому краю родительского блока. Например:

 Первый Второй Третий Последний

Или можно использовать свойство display:flex; для контейнера, чтобы автоматически выравнивать элементы по левому и правому краям. Например:

 Первый Второй Третий Последний

Обратите внимание, что в этом случае порядок элементов изменен, чтобы последний элемент был последним в контейнере.

Как прижать элемент к правому краю css

Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:

  class="wrapper">  class="content">i am a wrapper  class="inside">i am inside

Допустим необходимо блок с классом inside разместить в нижней части относительно блока с классом content:

.wrapper  /* Отцентрируем блоки для экспериментов и зададим им ширину*/ margin: 100px auto; width: 300px; > .content  background-color: #38d9a9; height: 200px; position: relative; > .inside  /* абсолютное позиционирование */ position: absolute; /* прижимаем блок к правой границе относительно блока с position: relative*/ right: 0; /* Для примера можем прижать блок и к нижней границе */ bottom: 0; /* задаем ширину и цвет бэкграунда для наглядности*/ width: 75px; height: 75px; background-color: #444; >

Как через flexbox прижать последний элемент к правому краю, а остальные оставить посередине?

Имеем некий navbar, посередине навигация, а с правого края должно быть блок с логином. Навигацию оставить посередине, логин прижать вправо. Возможно есть и другие решения.

Вопрос задан более трёх лет назад
6333 просмотра

Комментировать

Решения вопроса 2

vadimkot

Вадим Кот @vadimkot Куратор тега CSS

Для логина
margin-left: auto;

Ответ написан более трёх лет назад

Нравится 2 3 комментария

gsv_rus

Станислав Григорьев @gsv_rus Автор вопроса

он прижимает все остальные элементы к левому краю

vadimkot

Вадим Кот @vadimkot Куратор тега CSS

Станислав Григорьев, Ну тогда и для меню
margin-left: auto;

gsv_rus

Станислав Григорьев @gsv_rus Автор вопроса

Вадим Кот, хм и правда, благодарю!

fl4r3

Кино, вино и домино

По середине всего navbar или между левым краем navbar и началом блока с логином?
Если второй вариант (скорее всего) — то это 2 разных div, первый из которых flexbox с flex-grow:1; и justify-content:center, а второй с flex-shrink: 0; flex-grow: 0; и возможно margin-left: auto;