Bootstrap 4 justify content center: content-*-center

Содержание

Утилиты Flex Bootstrap v5.1.3 | полная документация на русском

Задействуйте «гибкое» поведение

Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.

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

<div>Я контейнер flexbox!</div>

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

<div>Я встроенный контейнер Flexbox!</div>

Также существуют отзывчивые варианты .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

Направление

Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).

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

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

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

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3


<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Для flex-direction также есть отзывчивые вариации.

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
. flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row

.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Выравнивание содержимого

Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column). Выбирайте из start (умолчание браузера), end, center, between, around или evenly.

Flex item

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

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

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
. justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
. justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Выравнивание элементов

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

Flex item


<div>.
  ..</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для 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-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Сплошное выравнивание

Используйте утилиты align-self в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если

flex-direction: column). Выбирайте из таких же параметров, как у align-items: start, end, center, baseline или stretch (умолчание браузера).

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item


<div>Aligned flex item</div>
<div>Aligned flex item</div>
<div>Aligned flex item</div>
<div>Aligned flex item</div>
<div>Aligned flex item</div>

Отзывчивые вариации для align-self

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
. align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Заполнение

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

Flex item with a lot of content

Flex item


<div>
  <div>Flex item with a lot of content</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

Для этого класса также есть адаптивные вариации flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill

Увеличение и уменьшение

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

Flex item

Third flex item


<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Third flex item</div>
</div>

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

Flex item


<div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

Для flex-grow и flex-shrink также есть адаптивные вариации.

. flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1

Авто-марджины

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

Flex item


<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

С элементами выравнивания

Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items, flex-direction: column и margin-top: auto или margin-bottom: auto.

Flex item


<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

<div>
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

Обертка

Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap, можете обернуть их классом .flex-wrap или реверсируйте оборачивание с классом .flex-wrap-reverse.

Flex item


<div>
  ...
</div>

Flex item


<div>
  ...
</div>

Flex item


<div>
  ...
</div>

Отзывчивые вариации есть также для 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-wrap
.flex-xxl-wrap-reverse

Порядок

Измените визуальный порядок определенных гибких элементов с помощью утилит order. Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Поскольку order принимает любое целочисленное значение от 0 до 5, добавьте обычный CSS для создания необходимых дополнительных значений.

First flex item

Second flex item

Third flex item


<div>
  <div>First flex item</div>
  <div>Second flex item</div>
  <div>Third flex item</div>
</div>

Отзывчивые вариации есть также для order.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
. order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Кроме того, существуют также адаптивные классы .order-first и .order-last, которые изменяют order, применяя значения order: -1 и order: 6 соответственно.

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Выравнивание содержимого

Используйте утилиты align-content в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start (умолчание браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество элементов flex.

Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.

Flex item


<div>
  ...
</div>

Flex item


<div>...</div>

Flex item


<div>...</div>

Flex item


<div>. ..</div>

Flex item


<div>...</div>

Flex item


<div>...</div>

Отзывчивые вариации есть также для align-content.

.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
. align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
. align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch

Медиа объект

Хотите скопировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.

PlaceholderImage

Это некоторый контент из медиа-компонента. Вы можете заменить это любым содержимым и настроить его по мере необходимости.


<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это некоторый контент из медиа-компонента. Вы можете заменить это любым содержимым и настроить его по мере необходимости.
  </div>
</div>

Допустим, вы хотите центрировать контент по вертикали рядом с изображением.

PlaceholderImage


<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это некоторый контент из медиа-компонента. Вы можете заменить это любым содержимым и настроить его по мере необходимости.
  </div>
</div>

Sass

API утилит

Утилиты флексбокс объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),

Помочь проекту

Bootstrap 4 Вертикальный центр.

Как выровнять что-нибудь по вертикали | Кэрол Скелли | WDstack

Как выровнять что-либо по вертикали

Это сложно.

Вертикальное выравнивание элементов по центру всегда было проблемой в CSS, не говоря уже о Bootstrap. В этой статье я рассмотрю все новых подходов в Bootstrap 4 , которые проще вертикального центра в Bootstrap 3.

Теперь, когда Bootstrap 4 по умолчанию flexbox, вертикальное выравнивание становится немного проще. В общем, существует 3 разных подхода к вертикальному выравниванию…

Авто-поля
Утилиты Flexbox
Утилиты отображения вместе с утилитами вертикального выравнивания.

Поначалу утилиты «Вертикальное выравнивание» кажутся очевидным выбором, но они работают только со встроенными и табличными элементами отображения. Рассмотрите следующие варианты и сценарии вертикального выравнивания.

В целом существует 2 типа сценариев вертикального выравнивания, с которыми вы столкнетесь…

вертикальное центрирование внутри родительского контейнера.
или вертикальное центрирование относительно соседних элементов.

1 — Вертикальное центрирование с использованием автоматических полей

Один из способов вертикального центрирования — использовать my-auto . Это отцентрирует элемент внутри контейнера flexbox (Bootstrap 4 .row равен дисплей: flex ). Например, h-100 делает строку полной высоты, а my-auto вертикально центрирует столбец col-sm-12 .

  
  
 Card

my-auto представляет поля по вертикальной оси Y и эквивалентно:

 поле-сверху: авто; 
 нижняя граница: авто;

Демонстрация — вертикальное центрирование с использованием автоматических полей

2 — Вертикальный центр с Flexbox

Поскольку класс Bootstrap 4 . row теперь равен display:flex , вы можете просто использовать новую утилиту align-self-center vertical flexbox для любого столбца . по центру:

  
  
  
 По центру 
 
 
 < /div> 
  
  
 Taller

или используйте align-items-center для всего .row для вертикального выравнивания по центру все col-* (columns ) в строке…

  
  
  
 Center 
 
 
 
 
  
  
 Taller

Демонстрация — Вертикальный центр Разная высота Смежные столбцы

3 — Вертикальный центр Использование Display Utils

Bootstrap 4 теперь имеет display utils используются обертки для свойств отображения CSS, таких как display:block , display:inline , display:table-cell, display:none и т. д. Их можно использовать с утилитами вертикального выравнивания для выравнивания встроенного , встроенный блок или элементы ячейки таблицы.

  
  
  
 Я грут 4 Вертикальное центрирование в картах одинаковой высоты 
 Bootstrap 4 Вертикальное центрирование с помощью карт 
  Чтобы следить за последними разработками, примерами и темами Bootstrap 4, также ознакомьтесь с моим Bootstrap4.guide 
  Flex - Bootstrap 4.2 - 日本語リファレンス  
          Flex (フレックス) を と と, 配置 など の レイアウト を 簡単 行え ます。 複雑 な 実装 は カスタム CSS が 必要 です。 
        
        

   Flexの動作を有効にする (включить гибкое поведение)  
   дисплей  を適用して, 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 
 方向(Направление) 
  direction  を使用して, コンテナのFlexアイテムの方向を設定できます。 
 ほとんどの場合, ブラウザのデフォルトが  row  なので, 左から横並びのクラスは省略可能です。
  .flex-row  : 左から横並び
  .flex-row-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-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-колонка-реверс
.flex-XL-ряд
.flex-xl-строка-реверс
.flex-xl-столбец
.flex-xl-колонка-реверс
Содержимое по ширине
justify-content では下記を使用できます。( flex-direction: column を適用するとy軸になります。) начало , конец , центр , между , вокруг を使用できます。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
5 Flex item
50005
Flex-элемент
Flex-элемент
Flex-элемент
Flex-элемент
Flex-элемент
<дел>. .. <дел>... <дел>... <дел>...
...

justify-content はレスポンシブにも対応しています。
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-между
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-центр
.justify-content-sm-между
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-между
.justify-content-md- вокруг
.justify-content-lg-start
. justify-content-lg-end
.justify-content-lg-центр
.justify-content-lg-между
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-центр
.justify-content-xl-между
.justify-content-xl-вокруг
アイテムの整列(Выровнять элементы)
align-items を使用してFlexアイテムの配置を変更できます。 начало , конец , центр , базовая линия , растяжка を使用できます。
Гибкий элемент
Гибкий элемент
Гибкий элемент
Flex Item
Flex Item
Elex Item
Elect Item
Elex Item
Elex Item
Elect
Elect Item
Elect
Item
Elect
.
<дел>. .. <дел>... <дел>... <дел>...
...

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-self を適用して特定のアイテムの配置を変更できます。
start , end , center , baseline , stretch を使用できます。
Flex Item
Выровненное изгиб -элемент
Flex Item
Flex Item
Выровненное изгиб
Elex Item
Elex
Выровненное изгиб
Flex Item
Elem. item
Flex item
Выровненный Flex item
Flex item

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

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

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

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

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

Также существуют адаптивные варианты для align-self . 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-центр
.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
Заполнение
.flex-fill (Flex: 1 1 Auto) をしてて, 水平を占有ししながら, 同じ幅強制できます。幅幅均等幅ので特に便利。。幅または均幅ので特にです。。幅または等幅0005
Flex item
Flex item
Flex item
<дел>
Элемент Flex

Элемент Flex

Элемент Flex