Прижать блок вправо css flex

Метод позиционирования элементов Flexbox

Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.

Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.

Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).

Внутри flex-контейнера создаются две оси: главная и перпендикулярная ей поперечная. Сначала flex-элементы выстраиваются по главной оси, а потом уже по поперечной.

Свойства flex-контейнера

• row – слева направо (по умолчанию);
• row-reverse – справа налево;
• column – сверху вниз;
• column-reverse – снизу вверх.

• nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию);
• wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну;
• wrap-reverse – похоже на wrap, но перенос происходит снизу вверх.

• flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию);
• flex-end – flex-элементы прижимаются к концу главной оси;
• center – flex-элементы выравниваются по центру главной оси;
• space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу;
• space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.

• flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию);
• flex-end – flex-элементы прижимаются к концу поперечной оси;
• center – flex-элементы выравниваются по центру поперечной оси;
• baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»;
• stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

• flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию);
• flex-end – строки flex-элементов прижимаются к концу поперечной оси;
• center – fстроки flex-элементов выравниваются по центру поперечной оси;
• space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя — к концу;
• space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками.
• stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

Это свойство не работает для однострочного flex-контейнера.

row-gap Определяет промежутки между строками flex-элементов, т.е. вертикальные промежутки. Задается в px, %, em и остальных единицах измерения.
Например: row-gap: 24px; column-gap Определяет промежутки между столбцами flex-элементов, т.е. горизонтальные промежутки. Задается в px, %, em и остальных единицах измерения.
Например: column-gap: 16px; gap Определяет промежутки между flex-элементами по вертикали и горизонтали. Задается в px, %, em и остальных единицах измерения. Это короткая запись, объединяющая свойства row-gap и column-gap, поэтому может иметь одно или два значения.
Например: gap: 24px 16px;

Cвойства row-gap, column-gap, gap появились в 2021 году. Поддержка браузерами.

Свойства flex-элементов

order Определяет порядок следования отдельно взятого flex-элемента внутри flex-контейнера. Задается целым числом. По умолчанию равно 0, тогда элементы следуют друг за другом в порядке естественного потока. Значение order задает вес позиции элемента в последовательности, а не абсолютную позицию.
Пример flex-basis Определяет базовый размер flex-элемента перед распределением пространства в контейнере. Может быть задан в px, %, em и остальных единицах измерения. По сути это своего рода отправная точка, относительно которой происходит растягивание или сжатие элемента. Значение по умолчанию – auto, при этом размер элемента зависит от размера внутреннего контента.

В спецификации CSS Flexible Box Layout Module Level 1 приведена наглядная диаграмма для трех flex-элементов со значениями flex-grow 1, 1, 2 соответственно:

Пример flex-basis: 0
Пример flex-basis: auto flex-grow Определяет, какую долю свободного места внутри контейнера добавит к своему базовому размеру flex-элемент. Задается целым числом, служащим пропорцией. По умолчанию равно 0. Если у всех элементов flex-grow: 1, то все они будут одинакового размера. Если одному flex-элементу задать значение 2, то к его базовому размеру добавится в два раза больше, чем к другим.
Пример flex-shrink Определяет, на сколько в случае недостатка места будет уменьшаться flex-элемент относительно уменьшения соседних элементов внутри flex-контейнера. Задается целым числом, служащим пропорцией. По умолчанию равно 1. Если одному flex-элементу задать значение flex-shrink: 2, то из его базового размера вычтется в два раза больше, чем из других, если контейнер меньше, чем сумма базовых размеров входящих в него элементов.
Пример flex Определяет сразу три параметра: flex-grow, flex-shrink, flex-basis.
Например, flex: 1 1 200px; align-self Переопределяет выравнивание, заданное по умолчанию или в align-items, для конкретного flex-элемента. Возможные значения:

• flex-start – flex-элемент прижимается к началу поперечной оси (по умолчанию);
• flex-end – flex-элемент прижимается к концу поперечной оси;
• center – flex-элемент выравнивается по центру поперечной оси;
• baseline – flex-элемент выравнивается по базовой линии;
• stretch – flex-элементы растягивается, занимая все доступное место по поперечной оси. Но если задана высота, то stretch будет проигнорирован.

Пример

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

Чтобы прижать заголовок сайта влево, а номер телефона вправо, то заголовку надо задать flex: 1.

Источник

Aligning elements left, center and right in flexbox

I’m trying to create this top header using flexbox. Basically I would like to center the (Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image.

.nav < background: #e1e1e1; >ol, ul < list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; >.header-title < justify-content: center; align-self: center; display: flex; >.nav ul li.logout < margin-left: auto; >.nav ul li a

Not possible with flexbox and your current html structure. Flexbox assumes the elements you are aligning are at the same level (you have the menus nested inside)

If you are open to changing your html, you need to put all the items in your header on the same level in the dom

No problem a jsfiddle is ok as an adittion if there are a lot of code but always include the relevant part . will delete my comments

5 Answers 5

Use nested flex containers and flex-grow: 1 .

This allows you to create three equal-width sections on the nav bar.

Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.

Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).

.nav < display: flex; height: 50px; /* optional; just for demo */ background: white; >.links < flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ display: flex; justify-content: flex-start; align-items: center; border: 1px dashed red; >.header-title < flex: 1; display: flex; justify-content: center; align-items: center; border: 1px dashed red; >.logout < flex: 1; display: flex; justify-content: flex-end; align-items: center; border: 1px dashed red; >.links a

 
 
Institutioner Ledere 
 
Institution institution 1
 
Log ud
 

Источник

How to Right-Align a Flex Item

Have you ever wondered how you can right align a flex item? If so, this snippet is for you.

Before the introduction of Flexbox, aligning elements seemed like the most difficult problem in web design. Now, alignment has become quite simple, since Flexbox allows us to align items and groups of items properly.

In this snippet, we’re interested in the case, when we need to align a flex item to the right. For that, you can use the CSS justify-content property with the “space-between” value on the flex container. Let’s see how this can be done, and then, we’ll also discuss some examples with other properties.

Create HTML

h2>Example h2> div class="main"> div class="align1"> a href="https://www.w3docs.com/learn-html.html">HTML a> div> div class="align2"> a href="https://www.w3docs.com/learn-css.html">CSS a> div> div>

Add CSS

• Style the ”main” class by setting the display property to “flex” and the justify-content to “space-between”.
• Style the “align1” and “align2” classes by specifying the background and border properties.

.main < display: flex; justify-content: space-between; > .align1, .align2 < background: #e8e7e3; border: 1px solid #8a8a8a; >

Example of aligning a flex item to the right:

html> html> head> title>Title of the document title> style> .main < display: flex; justify-content: space-between; > .align1, .align2 < background: #e8e7e3; border: 1px solid #8a8a8a; > style> head> body> h2>Example h2> div class="main"> div class="align1"> a href="https://www.w3docs.com/learn-html.html">HTML a> div> div class="align2"> a href="https://www.w3docs.com/learn-css.html">CSS a> div> div> body> html>

Result

You can also align a flex item to the right by setting the CSS margin-right property. In our example below, we set the «auto» value of this property on the «align2» class.

Example of aligning a flex item to the right with the CSS margin-right property:

html> html> head> title>Title of the document title> style> .main < display: flex; > a < text-decoration: none; > .align2 < margin-right: auto; > .align1, .align2, .align3 < background: #e8e7e3; border: 1px solid #8a8a8a; padding: 5px 10px; > style> head> body> h2>Example h2> div class="main"> div class="align1"> a href="https://www.w3docs.com/learn-html.html">HTML a> div> div class="align2"> a href="https://www.w3docs.com/learn-css.html">CSS a> div> div class="align3"> a href="https://www.w3docs.com/learn-git.html">GIT a> div> div> body> html>

Another way is using the CSS margin-left property. In our last example, you can see that we apply its «auto» value to the «last» class.

Example of aligning a flex item to the right with the CSS margin-left property:

html> html> head> title>Title of the document title> style> .main < display: flex; > a < text-decoration: none; display: block; background-color: lightblue; padding: 10px 20px; color: #666666; > a:hover < background-color: blue; color: #ffffff; > .last < margin-left: auto; > div < background: #e8e7e3; > style> head> body> h2>Example h2> div class="main"> div> a href="https://www.w3docs.com/learn-html.html">HTML a> div> div> a href="https://www.w3docs.com/learn-css.html">CSS a> div> div> a href="https://www.w3docs.com/learn-javascript.html">JavaScript a> div> div class=last> a href="https://www.w3docs.com/learn-git.html">GIT a> div> div> body> html>

Источник