“Выровнять элемент внизу с помощью Flexbox” Ответ

Выровнять элемент внизу с помощью Flexbox

<style>
.content {
  height: 200px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
}

button {
  margin-top: auto;
}
</style>

<div class="content">
  <h1>Hello World</h1>
  <button>Submit</button>	<!-- Aligned element -->
</div>
Mysterious Macaque

CSS Flex Bottom

You can use auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
Show code snippet

Alternatively, you can make the element before the a grow to fill the available space:

p { flex-grow: 1; } /* Grow to fill available space */
Santino

Ответы похожие на “Выровнять элемент внизу с помощью Flexbox”

Вопросы похожие на “Выровнять элемент внизу с помощью Flexbox”

Больше похожих ответов на “Выровнять элемент внизу с помощью Flexbox” по HTML

Смотреть популярные ответы по языку

Смотреть другие языки программирования

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel