Bootstrap 5 Flex Auto поля с элементами выравнивания
Опубликовано: 18 Февраля, 2023
Bootstrap 5 Поля Flex Auto с align-items используются для вертикального размещения flex-элементов сверху или снизу контейнера с использованием классов Bootstrap.
Поля Flex Auto с классами align-items:
- align-items: этот класс используется для установки выравнивания flex-элементов.
- flex-direction: этот класс используется для установки направления flex-элементов в контейнере.
- margin-top: этот класс используется для установки верхнего края элемента.
- margin-bottom: этот класс используется для установки нижнего края элемента.
Синтаксис:
<div class="d-flex align-items-*"> ... </div>
Пример 1. В этом примере мы будем использовать класс align-items-start для отображения гибких элементов.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Flex Auto margins with align-items</ title > rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > GeeksforGeeks </ h1 > < h2 > Bootstrap 5 Flex Auto margins with align-items </ h2 > < div class="d-flex align-items-start flex-column bg-success mb-3" style = "height: 300px;" > < div class = "p-3 bg-danger" >Geeks Item</ div > < div class = "mb-auto p-3 bg-danger" >Geeks Item</ div > < div class = "p-3 bg-danger" >Geeks Item</ div > </ div > </ div > </ body > </ html > |
Выход:
Пример 2. В этом примере мы будем использовать класс align-items-center для отображения flex-элементов.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Flex Auto margins with align-items</ title > rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > GeeksforGeeks </ h1 > < h2 > Bootstrap 5 Flex Auto margins with align-items </ h2 > < div class="d-flex align-items-center flex-column bg-success mb-3" style = "height: 300px;" > < div class = "p-3 bg-danger" >Geeks Item</ div > < div class = "p-3 bg-danger" >Geeks Item</ div > < div class = "mb-auto p-3 bg-danger" >Geeks Item</ div > </ div > </ div > </ body > </ html > |
Выход:
Ссылка: https://getbootstrap.com/docs/5.0/utilities/flex/#with-align-items