Vuetify Flex: как создавать макеты Flexbox

Макет flexbox упрощает процесс разработки гибкой и адаптивной структуры макета страницы без использования float или ручного позиционирования. Он позволяет автоматически упорядочивать отзывчивые элементы внутри контейнера в зависимости от размера области просмотра. В этой статье мы узнаем о различных вспомогательных классах, которые Vuetify предоставляет для управления макетом flex-контейнеров с выравниванием, выравниванием, переносом и т. д.

Контейнер Vuetify Flexbox

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

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex pa-2"
        outlined
        tile
      >
        <div>A flexbox container</div>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Встроенный гибкий

Класс d-inline-flex превращает элемент во встроенный контейнер flexbox.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-inline-flex pa-2"
        outlined
        tile
      >
        <div>Inline flexbox container</div>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Мы также можем настроить утилиты 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

Vuetify Flex Направление

Vuetify предоставляет вспомогательные классы flex для указания направления flex-элементов внутри контейнера. Эти классы изменяют свойство CSS flex-direction элемента. Они есть:

• гибкий ряд
• flex-row-reverse
• flex-колонка
• flex-столбец-обратный

flex-row и flex-row-reverse

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

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-row mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
      <v-card
        class="d-flex flex-row-reverse"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

flex-column и flex-column-reverse

Вспомогательный класс flex-column отображает гибкие элементы вертикально в столбце. flex-column-reverse делает то же самое, но в обратном порядке:

<template>
  <v-app>
    <div class="ma-4">
      <div class="d-flex flex-column mb-6">
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </div>
      <div class="d-flex flex-column-reverse">
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </div>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Существуют также адаптивные варианты этих классов, которые устанавливают свойство flex-direction для определенных точек останова.

• 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

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Получите бесплатную копию здесь.

Классы Flex Justify

Мы можем изменить свойство justify-content flex гибкого контейнера с помощью классов flex justify из Vuetify. justify-content изменяет элементы flexbox по оси x или оси y для flex-direction из row или column соответственно. Вспомогательные классы могут установить justify-content в start (браузер по умолчанию), end, center, space-between или space-around. Они есть:

• justify-start
• justify-end
• justify-center
• justify-space-between
• justify-space-around

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex justify-start mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-start
        </v-card>
      </v-card>
      <v-card
        class="d-flex justify-end mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-end
        </v-card>
      </v-card>
      <v-card
        class="d-flex justify-center mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-center
        </v-card>
      </v-card>
      <v-card
        class="d-flex justify-space-between mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-space-between
        </v-card>
      </v-card>
      <v-card
        class="d-flex justify-space-around mb-6"
        color="grey lighten-4"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          justify-space-around
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Существуют также адаптивные варианты этих классов, которые устанавливают свойство justify-content для определенных точек останова:

• justify-sm-start
• justify-sm-end
• justify-sm-center
• justify-sm-space-between
• justify-sm-space-around
• justify-md-start
• justify-md-end
• justify-md-center
• justify-md-space-between
• justify-md-space-around
• justify-lg-start
• justify-lg-end
• justify-lg-center
• justify-lg-space-between
• justify-lg-space-around
• justify-xl-start
• justify-xl-end
• justify-xl-center
• justify-xl-space-between
• justify-xl-space-around

Классы Vuetify Flex Align

У нас также есть служебные классы flex от Vuetify, которые изменяют свойство CSS align-items контейнера flex. align-items изменяет элементы flexbox по оси Y или X для направления flex-направления row или column соответственно. Вспомогательные классы могут установить align-items в start, end, center, baseline или stretch (по умолчанию в браузере). Они есть:

• align-start
• align-end
• align-center
• align-baseline
• align-stretch

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-start mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-start
        </v-card>
      </v-card>
      <v-card
        class="d-flex align-end mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-end
        </v-card>
      </v-card>
      <v-card
        class="d-flex align-center mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-center
        </v-card>
      </v-card>
      <v-card
        class="d-flex align-baseline mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-baseline
        </v-card>
      </v-card>
      <v-card
        class="d-flex align-stretch mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          align-stretch
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Они также являются адаптивными вариантами этих классов, которые устанавливают свойство align-items для определенных точек останова:

• align-sm-start
• align-sm-end
• align-sm-center
• align-sm-baseline
• align-sm-stretch
• align-md-start
• align-md-end
• align-md-center
• align-md-baseline
• align-md-stretch
• align-lg-start
• align-lg-end
• align-lg-center
• align-lg-baseline
• align-lg-stretch
• align-xl-start
• align-xl-end
• align-xl-center
• align-xl-baseline
• align-xl-stretch

Самостоятельные классы Flex Align

Мы используем вспомогательные классы flex align для изменения свойства align-self flex элемента. align-self изменяет элементы flexbox в x-axis или y-axis для flex-direction из row или column соответственно. Вспомогательные классы могут установить align-self в start, end, center, baseline или stretch (по умолчанию в браузере). Они есть:

• align-self-start
• align-self-end
• align-self-center
• align-self-baseline
• align-self-stretch

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        v-for="j in justify"
        :key="j"
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        height="100"
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          :class="[n === 2 && `align-self-${j}`]"
          outlined
          tile
        >
          {{ n === 2 ? 'Aligned flex item' : 'Flex item' }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    justify: [
      'start',
      'end',
      'center',
      'baseline',
      'auto',
      'stretch',
    ],
  }),
};
</script>

Vuetify также предоставляет адаптивные варианты этих классов, которые устанавливают свойство align-self для определенных точек останова:

• align-self-sm-start
• align-self-sm-end
• align-self-sm-center
• align-self-sm-baseline
• align-self-sm-auto
• align-self-sm-stretch
• align-self-md-start
• align-self-md-end
• align-self-md-center
• align-self-md-baseline
• align-self-md-auto
• align-self-md-stretch
• align-self-lg-start
• align-self-lg-end
• align-self-lg-center
• align-self-lg-baseline
• align-self-lg-auto
• align-self-lg-stretch
• align-self-xl-start
• align-self-xl-end
• align-self-xl-center
• align-self-xl-baseline
• align-self-xl-auto
• align-self-xl-stretch

Автоматические поля

Мы можем применить один из вспомогательных классов маржи из Vuetify к контейнеру flex, чтобы управлять позиционированием flex-элементов по оси x или оси y для направления flex row или column соответственно.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
      <v-card
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 1 && 'mr-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
      <v-card
        class="d-flex mb-6"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 3 && 'ml-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Использование align-items

Если мы установим flex-direction в column и укажем значение для align-items, мы можем использовать вспомогательный класс mb-auto или mt-auto для настройки позиционирования flex-элемента:

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-start flex-column mb-6"
        color="grey lighten-2"
        flat
        tile
        height="200"
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 1 && 'mb-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
      <v-card
        class="d-flex align-end flex-column"
        color="grey lighten-2"
        flat
        tile
        height="200"
      >
        <v-card
          v-for="n in 3"
          :key="n"
          :class="n === 3 && 'mt-auto'"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Классы Vuetify Flex Wrap

По умолчанию класс d-flex не обеспечивает перенос (он ведет себя аналогично установке flex-wrap в nowrap). Мы можем изменить это, применив к контейнеру один из вспомогательных классов flex-wrap. Классы:

• flex-nowrap
• flex-wrap
• flex-wrap-reverse

flex-nowrap

flex-nowrap указывает, что элементы не должны переноситься.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-nowrap py-3"
        color="grey lighten-2"
        flat
        tile
        width="125"
      >
        <v-card
          v-for="n in 5"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

flex-wrap

flex-wrap делает перенос элементов при необходимости.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-wrap"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

flex-wrap-reverse

flex-wrap-reverse указывает, что flex-элементы будут переноситься при необходимости в обратном порядке.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-wrap-reverse"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item {{ n }}
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Vuetify также предоставляет адаптивные варианты этих классов для установки свойства flex-wrap для определенных точек останова:

• 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

Классы заказов Vuetify Flex

Мы можем использовать один из служебных классов flex order, чтобы настроить визуальный порядок элементов flexbox в их контейнере.

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex flex-wrap"
        color="grey lighten-2"
        flat
        tile
      >
        <v-card
          class="order-2 pa-2"
          outlined
          tile
        >
          First flex item
        </v-card>
        <v-card
          class="order-3 pa-2"
          outlined
          tile
        >
          Second flex item
        </v-card>
        <v-card
          class="order-1 pa-2"
          outlined
          tile
        >
          Third flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Эти классы устанавливают свойство order flex контейнера. Они есть:

• order-first
• order-0
• order-1
• order-2
• order-3
• order-4
• order-5
• order-6
• order-7
• order-8
• order-9
• order-10
• order-11
• order-12
• order-last

Vuetify также предоставляет адаптивные варианты этих классов, которые устанавливают свойство order для определенных точек останова:

• order-sm-first
• order-sm-0
• order-sm-1
• order-sm-2
• order-sm-3
• order-sm-4
• order-sm-5
• order-sm-6
• order-sm-7
• order-sm-8
• order-sm-9
• order-sm-10
• order-sm-11
• order-sm-12
• order-sm-last
• order-md-first
• order-md-0
• order-md-1
• order-md-2
• order-md-3
• order-md-4
• order-md-5
• order-md-6
• order-md-7
• order-md-8
• order-md-9
• order-md-10
• order-md-11
• order-md-12
• order-md-last
• order-lg-first
• order-lg-0
• order-lg-1
• order-lg-2
• order-lg-3
• order-lg-4
• order-lg-5
• order-lg-6
• order-lg-7
• order-lg-8
• order-lg-9
• order-lg-10
• order-lg-11
• order-lg-12
• order-lg-last
• порядок-xl-первый
• order-xl-0
• order-xl-1
• order-xl-2
• order-xl-3
• order-xl-4
• order-xl-5
• order-xl-6
• order-xl-7
• order-xl-8
• order-xl-9
• order-xl-10
• order-xl-11
• order-xl-12
• order-xl-last

Vuetify Flex Align Content

Vuetify предоставляет классы содержимого flex align, которые мы можем использовать для установки свойства CSS align-content контейнера flex. align-content изменяет элементы flexbox по оси x или оси y для направления flex-направления row или column соответственно. Вспомогательные классы могут установить align-content в start (браузер по умолчанию), end, center, between, around или stretch. Они есть:

• align-content-start
• align-content-end
• align-content-center
• align-content-between
• align-content-around
• align-content-stretch

align-content-start

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-start flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

align-content-end

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-end flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

align-content-center

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-center flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

align-content-space-between

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-space-between flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

align-content-space-around

<template>
  <v-app>
    <div class="ma-4">
      <v-card
        class="d-flex align-content-space-around flex-wrap"
        color="grey lighten-2"
        flat
        tile
        min-height="200"
      >
        <v-card
          v-for="n in 20"
          :key="n"
          class="pa-2"
          outlined
          tile
        >
          Flex item
        </v-card>
      </v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Существуют также адаптивные варианты этих классов, которые устанавливают свойство align-content для определенных точек останова:

• align-sm-content-start
• align-sm-content-end
• align-sm-content-center
• align-sm-content-space-between
• align-sm-content-space-around
• align-sm-content-stretch
• align-md-content-start
• align-md-content-end
• align-md-content-center
• align-md-content-space-between
• align-md-content-space-around
• align-md-content-stretch
• align-lg-content-start
• align-lg-content-end
• align-lg-content-center
• align-lg-content-space-between
• align-lg-content-space-around
• align-xl-content-start
• align-xl-content-end
• align-xl-content-center
• align-xl-content-space-between
• align-xl-content-space-around
• align-xl-content-stretch

Классы Vuetify Flex Grow и Shrink

Vuetify также поставляется со вспомогательными классами, которые устанавливают flex-grow и flex-shrink контейнера flexbox. Эти служебные классы имеют форму flex-{condition}-{value}, где condition может быть либо grow, либо shrink, а value может быть либо 0, либо 1. Условие grow позволяет элементу увеличиваться, чтобы заполнить доступное пространство, в то время как shrink позволяет элементу уменьшаться только до места, необходимого для его содержимого, если в его контейнере недостаточно места. Значение 0 предотвратит возникновение условия, а 1 позволит. Классы:

• flex-grow-0
• flex-grow-1
• flex-shrink-0
• flex-shrink-1

<template>
  <v-app>
    <div class="ma-4">
      <v-container class="grey lighten-5">
        <v-row
          no-gutters
          style="flex-wrap: nowrap"
        >
          <v-col
            cols="2"
            class="flex-grow-0 flex-shrink-0"
          >
            <v-card
              class="pa-2"
              outlined
              tile
            >
              I'm 2 column wide
            </v-card>
          </v-col>
          <v-col
            cols="1"
            style="min-width: 100px; max-width: 100%"
            class="flex-grow-1 flex-shrink-0"
          >
            <v-card
              class="pa-2"
              outlined
              tile
            >
              I'm 1 column wide and I grow to take all the
              space
            </v-card>
          </v-col>
          <v-col
            cols="5"
            style="min-width: 100px"
            class="flex-grow-0 flex-shrink-1"
          >
            <v-card
              class="pa-2"
              outlined
              tile
            >
              I'm 5 column wide and I shrink if there's not
              enough space
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Существуют также адаптивные варианты этих классов, которые устанавливают свойства flex-grow и flex-shrink для определенных точек останова:

• flex-sm-grow-0
• flex-sm-grow-1
• flex-sm-shrink-0
• flex-sm-shrink-1
• flex-md-grow-0
• flex-md-grow-1
• flex-md-shrink-0
• flex-md-shrink-1
• flex-lg-grow-0
• flex-lg-grow-1
• flex-lg-shrink-0
• flex-lg-shrink-1
• flex-xl-grow-0
• flex-xl-grow-1
• flex-xl-shrink-0
• flex-xl-shrink-1

Заключение

Макеты Flexbox позволяют автоматически упорядочивать отзывчивые элементы внутри контейнера в зависимости от размера экрана. Vuetify поставляется с различными служебными классами flexbox для управления макетом flex-контейнеров с выравниванием, выравниванием, переносом и т. д.

Обновлено на: codingbeautydev.com

Получайте новые советы по веб-разработке каждую неделю.

Подписаться