Блог

Я искал и нашел обсуждение выравнивания элемента по правому краю в гибком, выровненном по строкам, но не в выровненном по столбцам.

У меня есть несколько строк текста. Каждая строка центрирована по горизонтали, а контейнер расположен вертикально. Однако одна строка находится в нижнем колонтитуле, и я хочу выровнять ее по правому краю.

Я перепробовал все возможные комбинации выравнивания нижнего колонтитула по правому краю (различные значения align-self , изменение используемого нижнего колонтитула inline-block , изменение justify-content нижнего колонтитула и т. Д.), И все это приводит к выравниванию по левому краю.

CSS в этих двух section элементах задан; я не могу их изменить. Я могу делать все, что захочу footer (в пределах разумного).

Как мне выровнять текст в нижнем колонтитуле по правому краю, т. Е. В правой части окна, т. Е. Что text-align: right бы было, если бы это не было в гибком контейнере?

 <section>
  <p>Lorem ipsum</p>
  <p>Morbi at interdum odio</p>
  <p>Maecenas mi ex</p>
  <footer>
    <p>Nunc ultricies</p>
  </footer>
</section>
 

 section{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(70vh - 3em);
}

section > *{
  margin: 0;
}

footer {
  margin-top: 1em;
}
 

align-self:flex-end

 section{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(70vh - 3em);
}

section > *{
  margin: 0;
}

footer {
  margin-top: 1em;
  align-self:flex-end;
} 

 <section>
  <p>Lorem ipsum</p>
  <p>Morbi at interdum odio</p>
  <p>Maecenas mi ex</p>
  <footer>
    <p>Nunc ultricies</p>
  </footer>
</section> 

ИЛИ text-align если вы создадите нижний колонтитул width:100%

 section{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(70vh - 3em);
}

section > *{
  margin: 0;
}

footer {
  margin-top: 1em;
  text-align:right;
  width:100%;
} 

 <section>
  <p>Lorem ipsum</p>
  <p>Morbi at interdum odio</p>
  <p>Maecenas mi ex</p>
  <footer>
    <p>Nunc ultricies</p>
  </footer>
</section>