Flex display vertical align: html — How to vertically align div on page with flexbox

Leave a Comment / Разное / By alexxlab / 18.02.2023

html — Вертикальное выравнивание гибкого элемента в flexbox

Задай вопрос

спросил 5 лет, 7 месяцев назад

Изменено 5 лет, 7 месяцев назад

Просмотрено 9к раз

Я пытался сгибать элементы, чтобы выровнять их по центру соответствующих div, используя все возможные варианты, такие как

 выравнивание элементов: по центру;
выровнять себя: по центру;
выравнивание содержимого: по центру;
выравнивание текста: по центру;

Однако я не могу расположить гибкие элементы по центру гибкого блока. Вот пример того, как это выглядит: https://jsfiddle.net/skd/xypmLspe/1/

Flex Group

 .flex-group {
    дисплей: гибкий;
    flex-направление: строка;
    высота: 400 пикселей;
    фон: серый;
    выравнивание элементов: по центру;
    выровнять себя: по центру;
    выравнивание содержимого: по центру;
    выравнивание текста: по центру;
}

Элементы Flex

 . flex-group .flex {
    гибкий рост: 1;
    высота: 100%;
    -webkit-transition: фон 0.6с;
    переход: фон 0,6 с;
}
.flex-группа .flex: hover {
    цвет фона: #34373c;
}

В примере jssfiddle, показанном выше, я хочу выровнять «Blah» и «Another Blah» по центру div.

html
css
flexbox

Вы можете установить flex: 1 для обоих внутренних div, чтобы каждый из них занимал половину ширины родителей, а затем также добавлял display: flex , align-items: center и justify-content: center для центрирования текста внутри них.

 тело {поле: 0}

.flex-группа {
  дисплей: гибкий;
  высота: 100вх;
  фон: серый;
}
.flex-группа .flex {
  гибкий: 1;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  переход: фон 0,6 с;
}
.flex-группа .flex: hover {
  цвет фона: #34373c;
}

 <дел>
  Блин
  Еще одна хрень

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Flex · Bootstrap v5.

Включить поведение flex

Применение утилит display для создания контейнера flexbox и преобразования направляет дочерние элементы во гибкие элементы. Flex-контейнеры и элементы могут быть изменены с помощью дополнительных flex-свойств.

Я флексбокс-контейнер!

 Я контейнер flexbox!

Я встроенный контейнер flexbox!

 Я встроенный контейнер flexbox!

Адаптивные варианты также существуют для .d-flex и .d-inline-flex .

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
. d-xxl-flex
.d-xxl-inline-flex

Направление

Установите направление гибких элементов в flex-контейнере с помощью утилит направления. В большинстве случаев вы можете опустить здесь горизонтальный класс, так как по умолчанию в браузере используется строка . Однако вы можете столкнуться с ситуациями, когда вам нужно явно установить это значение (например, адаптивные макеты).

Используйте .flex-row , чтобы установить горизонтальное направление (браузер по умолчанию), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.

Гибкий элемент 1

Flex-элемент 2

Flex-элемент 3

Flex-элемент 1

Flex-элемент 2

Flex-элемент 3

 
  Элемент Flex 1
  Элемент Flex 2
  Элемент Flex 3

<дел>
  Элемент Flex 1
  Элемент Flex 2
  Элемент Flex 3

  Используйте  . flex-column  для установки вертикального направления или  .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.
 Flex-элемент 1
 Flex-элемент 2
 Flex-элемент 3
 Flex-элемент 1
 Flex-элемент 2
 Flex-элемент 3
 
  Элемент Flex 1
  Элемент Flex 2
  Элемент Flex 3

<дел>
  Элемент Flex 1
  Элемент Flex 2
  Элемент Flex 3
 
 Адаптивные варианты также существуют для  flex-direction 
  .
  .flex-ряд 
  .flex-ряд-реверс 
  .flex-столбец 
  .flex-столбец-обратный 
  .flex-см-строка 
  .flex-sm-row-reverse 
  .flex-sm-столбец 
  .flex-sm-column-reverse 
  .flex-MD-ряд 
  . flex-md-row-reverse 
  .flex-MD-столбец 
  .flex-md-column-reverse 
  .flex-lg-строка 
  .flex-lg-строка-реверс 
  .flex-lg-столбец 
  .flex-lg-column-reverse 
  .flex-xl-ряд 
  .flex-xl-строка-реверс 
  .flex-xl-столбец 
    .flex-xl-колонка-реверс 
  .flex-xxl-строка 
  .flex-xxl-ряд-реверс 
  .flex-xxl-столбец 
  .flex-xxl-столбец-реверс 
 Justify content 
 Используйте утилиты  justify-content  в контейнерах flexbox для изменения выравнивания flex-элементов по главной оси (ось x для начала, ось y, если  flex-direction: column  ). Выберите из  начало  (браузер по умолчанию),  конец ,  центр ,  между  ,  вокруг  или  равномерно  .
 Flex Item
 Flex Item
 Elex Item
 Elect Item
 Elex Item
 Elex Item
 Elect
 Elect Item
 Elect
 Item
 Elect
. Flex item
 Flex item
 Flex item
   Flex item
 Flex item
 Flex item
 ...
<дел>...
<дел>...
<дел>...
<дел>...
<дел>...
 
 Адаптивные варианты также существуют для  justify-content  .
  .justify-content-start 
  .justify-content-end 
  .justify-content-center 
  .выравнивание содержимого между 
  .justify-content-around 
  .justify-content-evenly 
  .justify-content-sm-start 
  .justify-content-sm-end 
  .justify-content-sm-центр 
  . justify-content-sm-между 
  .justify-content-sm-around 
  .justify-content-sm-evenly  
  .justify-content-md-start 
  .justify-content-md-end 
  .justify-content-md-center 
  .justify-content-md-между 
  .justify-content-md- вокруг 
  .justify-content-md-evenly 
  .justify-content-lg-start 
  .justify-content-lg-end 
  .justify-content-lg-center 
  .justify-content-lg-между 
  .justify-content-lg-around 
  .justify-content-lg-равномерно 
  .justify-content-xl-start 
  .justify-content-xl-end 
  .justify-content-xl-центр 
  .justify-content-xl-между 
  .
  justify-content-xl-вокруг 
  .justify-content-xl-равномерно 
  .justify-content-xxl-начало 
  .justify-content-xxl-end 
  .justify-content-xxl-центр 
  .justify-content-xxl-между 
  .justify-content-xxl-вокруг 
  .justify-content-xxl-равномерно 
 Выравнивание элементов 
 Используйте утилиты  align-items  на контейнерах flexbox для изменения выравнивания flex-элементов по поперечной оси (ось Y для начала, ось x, если  flex-direction: столбец  ). Выберите из  start  ,  end  ,  center  ,  baseline  или  stretch  (браузер по умолчанию).
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex-элемент
 Flex-элемент
 Flex-элемент
  Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
. ..

3 Flex-элемент

3

3 Flex-элемент <дел>... <дел>... <дел>... <дел>...

Адаптивные варианты также существуют для align-items .

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
. align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-базовый уровень
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-базовый уровень
.align-items-xxl-stretch

`Align self`

Используйте утилиты align-self для элементов flexbox для индивидуального изменения их выравнивания по поперечной оси (ось Y для начала, ось X, если flex-direction: столбец ). Выберите один из тех же параметров, что и align-items : start , end , center , baseline или stretch (браузер по умолчанию).

Flex Item

Выровненное изгиб -элемент

Flex Item

Elex Item

Выровненное изгиб

Elect Item

Elex Item

Выравнированный изгиб

Elect

.0003

Flex-элемент

Выровненный гибкий элемент

Flex-элемент

 Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент

Также существуют адаптивные варианты для align-self .

.align-self-start
.align-self-end
.align-self-center
.align-self-базовый уровень
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-центр
. align-self-sm-базовый уровень
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-базовый уровень
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-центр
.align-self-lg-базовый уровень
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-центр
.align-self-xl-базовый уровень
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-центр
. align-self-xxl-базовый уровень
.align-self-xxl-stretch

`Заливка`

Используйте класс .flex-fill для серии одноуровневых элементов, чтобы придать им ширину, равную их содержимому (или равную ширину, если их содержимое не выходит за границы их рамок), при этом занимая всю доступную горизонтальную пространство.

Элемент Flex с большим количеством содержимого

Элемент Flex

 
  Элемент Flex с большим количеством контента
  Элемент Flex
  Элемент Flex

Адаптивные варианты также существуют для flex-fill .

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-заполнение
.flex-xxl-заполнение

`Увеличение и сжатие`

Используйте утилиты . flex-grow-* для переключения способности гибкого элемента увеличиваться для заполнения доступного пространства. В приведенном ниже примере элементы .flex-grow-1 используют все доступное пространство, в то время как оставшимся двум элементам гибкости предоставляется необходимое пространство.

Элемент Flex

Третий элемент Flex

 
  Элемент Flex
  Элемент Flex
  Третий гибкий элемент

Используйте утилиты .flex-shrink-* для переключения способности гибкого элемента сжиматься, если это необходимо. В приведенном ниже примере второй гибкий элемент с .flex-shrink-1 принудительно переносит свое содержимое на новую строку, «сжимаясь», чтобы освободить место для предыдущего гибкого элемента с .w-100 .

Flex-элемент

 
  Элемент Flex
  Элемент Flex

Адаптивные варианты также существуют для flex-grow и flex-shrink .

.flex-{расти|уменьшить}-0
.flex-{расти|сжать}-1
.flex-sm-{расти|сжать}-0
.flex-sm-{расти|сжать}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{расти|сжать}-0
.flex-lg-{расти|сжать}-1
.flex-xl-{расти|сжать}-0
.flex-xl-{расти|сжать}-1
.flex-xxl-{расти|сжать}-0
.flex-xxl-{расти|сжать}-1

`Автоматические отступы`

Flexbox может делать довольно удивительные вещи, когда вы смешиваете гибкие выравнивания с автоматическими отступами. Ниже показаны три примера управления гибкими элементами с помощью автоматических полей: по умолчанию (без автоматического поля), смещение двух элементов вправо ( .me-auto ) и смещение двух элементов влево ( . ms-auto 9).0042 ).

Flex item

`3`

3 Flex item

Элемент Flex

 <дел>Элемент Flex
Элемент Flex
Элемент Flex

 <дел>Элемент Flex
Элемент Flex
Элемент Flex
   С align-items 
 Вертикальное перемещение одного гибкого элемента в верхнюю или нижнюю часть контейнера путем смешивания  align-items  ,  flex-direction: column  и  margin-top: auto  или  margin-bottom : авто  .
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 
  Элемент Flex
  Элемент Flex
  Элемент Flex

<дел>
  Элемент Flex
  Элемент Flex
  Элемент Flex
 
 Wrap 
 Изменение способа переноса flex-элементов в flex-контейнер. Выберите полное отсутствие переноса (по умолчанию в браузере) с  .flex-nowrap  , перенос с  .flex-wrap  или обратный перенос с  .flex-wrap-reverse  .
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 
  ...

 
 Гибкий элемент
 Гибкий элемент
 Гибкий элемент
 Flex Item
 Flex Item
 Flex Item
 Elect Item
 Elex Item
 Flex Item
 Elex Item
 Elect Item
 Elect
 Elect
 Item
. раздел>
...

  Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 
  .. .

 
 Адаптивные варианты также существуют для  flex-wrap  .
  .flex-nowrap 
  .flex-wrap 
  .flex-wrap-reverse 
  .flex-sm-nowrap 
  .flex-sm-wrap 
  .flex-sm-wrap-reverse 
  .flex-md-nowrap 
  .flex-md-wrap 
  .flex-md-wrap-reverse 
  .flex-lg-nowrap 
  .flex-lg-wrap 
  .flex-lg-wrap-reverse 
  .flex-xl-nowrap 
  .flex-XL-Wrap 
  .flex-xl-wrap-reverse 
  .flex-xxl-nowrap 
  .flex-xxl-обертка 
  .flex-xxl-wrap-reverse 
 Порядок 
 Измените визуальный порядок   определенных гибких элементов с помощью нескольких утилит  порядка . Мы предоставляем только варианты для создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку  порядок  принимает любое целочисленное значение от 0 до 5, добавьте пользовательский CSS для любых необходимых дополнительных значений.
 Первый гибкий элемент
 Второй гибкий элемент
 Третий гибкий элемент
 
  Первый гибкий элемент
  Второй гибкий элемент
  Третий гибкий элемент
 
 Соответствующие варианты также существуют для  порядка  .
  .заказ-0 
  .заказ-1 
  .заказ-2 
  .заказ-3 
  .заказ-4 
  .заказ-5 
  .заказ-см-0 
  .заказ-см-1 
  .заказ-см-2 
  .заказ-см-3 
  .заказ-см-4 
  . заказ-см-5 
  .order-md-0 
  .order-md-1 
  .order-md-2 
  .order-md-3 
  .order-md-4 
  .order-md-5 
  .заказ-lg-0 
  .заказ-lg-1 
  .заказ-lg-2 
  .заказ-lg-3 
  .заказ-lg-4 
  .заказ-lg-5 
  .заказ-xl-0 
  .заказ-xl-1 
  .заказ-xl-2 
  .заказ-xl-3 
  .заказ-xl-4 
  .заказ-xl-5 
  .заказ-xxl-0 
  .заказ-xxl-1 
  .заказ-xxl-2 
  .заказ-xxl-3 
  .заказ-xxl-4 
  .заказ-xxl-5 
 Кроме того, существуют адаптивные классы  . order-first  и  .order-last , которые изменяют  порядок  элемента, применяя  порядок: -1  и  порядок: 6  соответственно.
  .заказ-первый 
  .последний заказ 
  .заказ-см-первый 
  .заказ-см-последний 
  .order-md-first 
  .order-md-последний 
  .order-lg-first 
  .заказ-lg-последний 
  .заказ-xl-первый 
  .заказ-xl-последний 
  .заказ-xxl-первый 
  .заказ-xxl-последний 
 Выровнять содержимое 
 Использовать  выравнивание содержимого  утилиты для контейнеров flexbox для выравнивания flex-элементов  вместе  на поперечной оси. Выберите из  начало  (браузер по умолчанию),  конец ,  центр ,  между ,  вокруг  или  растянуть . Чтобы продемонстрировать эти утилиты, мы усилили  flex-wrap: wrap  и увеличили количество flex-элементов.
  Внимание!  Это свойство не влияет на отдельные строки гибких элементов.
 Гибкий элемент
 Flex Item
 Flex Item
 Flex Item
 Elect Item
 Elex Item
 Elex Item
 Elex Item
 Elect Item
 Elemp элемент
 Flex элемент
 
  ...

 
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
 Flex item
73 
 90...
  Flex Item
 Flex Item
 Flex Item
 Elex Item
 Elex Item
 Elex Item
 Elect Item
 Elex Item
 Elex
 Item
 Elex
0002 Flex item
 Flex item
 Flex item
 Flex item
 . ..
 
 Flex Item
 Flex Item
 Flex Item
 Elex Item
 Elex Item
 Elex Item
 Elect Item
 Elegle Item
 Elempe
 Элемент
 Elect
 Elead
. Flex item
 Flex item
 Flex item
 ...
 
 Flex Item
 Flex Item
 Flex Item
 Elex Item
 Elex Item
 Elex Item
 Elect Item
 Elegle Item
 Elempe
 Элемент
 Elect
 Exte
 Flex item
 Flex item
 Flex item
 ...
 
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex-элемент
 Flex Item
 Flex Item
 Elex Item
 Elex Item
 Elex Item
 Elex Item
 Elect Item
 Elect Item
 Elex
 Elect Item
  ... 
 
 Адаптивные варианты также существуют для  align-content  .
  .align-content-start 
  .align-content-end 
  .align-content-center 
  .align-content-между 
  .align-content-around 
  .align-content-stretch 
  .align-content-sm-start 
  .align-content-sm-end 
  .align-content-sm-center 
  .align-content-sm-между 
  .align-content-sm-around 
  .align-content-sm-stretch 
  .align-content-md-start 
  .align-content-md-end 
  .align-content-md-центр 
  .align-content-md-между 
  .align-content-md- вокруг 
  .align-content-md-stretch 
  .align-content-lg-start 
  .align-content-lg-end 
  . align-content-lg-center 
  .align-content-lg-между 
  .align-content-lg-around 
  .align-content-lg-stretch 
  .align-content-xl-start 
  .align-content-xl-end 
  .align-content-xl-центр 
  .align-content-xl-между 
  .align-content-xl- вокруг 
  .align-content-xl-stretch 
  .align-content-xxl-start 
  .align-content-xxl-end 
  .align-content-xxl-центр 
  .align-content-xxl-между 
  .align-content-xxl- вокруг 
  .align-content-xxl-stretch 
 Медиа-объект 
 Хотите воспроизвести компонент медиа-объекта из Bootstrap 4? Воссоздайте его в кратчайшие сроки с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.
 PlaceholderImage
 Это некоторый контент из мультимедийного компонента. Вы можете заменить это любым содержимым и настроить его по мере необходимости.
 <дел>
  <дел>