in English

Флекс

Челтәр баганаларының макетын, тигезләнешен, зурлыгын тиз арада идарә итегез, навигация, компонентлар һәм башкалар. Катлаулырак тормышка ашыру өчен, махсус CSS кирәк булырга мөмкин.

Бу биттә

Флекс тәртибен рөхсәт итегез

Флексбокс displayконтейнеры ясау һәм балаларның туры элементларын флекс әйберләренә әверелдерү өчен коммуналь хезмәтләрне кулланыгыз. Флекс контейнерлар һәм әйберләр өстәмә флекс үзлекләре белән алга таба үзгәртелә ала.

Мин флексбок контейнер!

html

<div class="d-flex p-2">I'm a flexbox container!</div>

Мин эчке флексбок контейнер!

html

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

.d-flexForаваплы вариацияләр дә бар .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

Ectionнәлеш

Флекс әйберләрнең юнәлешен флекс контейнерга урнаштырыгыз. Күпчелек очракта сез монда горизонталь классны калдыра аласыз, браузерның килешүе row. Ләкин, сез бу кыйммәтне ачык итеп куярга тиеш булган очракларга очрарга мөмкин (җаваплы макетлар кебек).

.flex-rowГоризонталь юнәлешне (браузерның килешү) урнаштыру өчен, яки .flex-row-reverseгоризонталь юнәлешне каршы ягыннан башлау өчен кулланыгыз .

Флекс 1

Флекс 2

Флекс 3

Флекс 1

Флекс 2

Флекс 3

html

<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

.flex-columnВертикаль юнәлеш куяр өчен, яки .flex-column-reverseвертикаль юнәлешне каршы ягыннан башлау өчен кулланыгыз .

Флекс 1

Флекс 2

Флекс 3

Флекс 1

Флекс 2

Флекс 3

html

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Forаваплы вариацияләр дә бар 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,,,, яки .centerbetweenaroundevenly

Флекс әйбер

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Forаваплы вариацияләр дә бар 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, кросс күчәрендәге флекс әйберләрнең тигезләнешен үзгәртү өчен (баштан ук күчәре, х күчәре булса flex-direction: column). start,,,, Яки (браузерның килешү буенча end) сайлагыз center.baselinestretch

Флекс әйбер

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Forаваплы вариацияләр дә бар 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

Selfзеңне тигезлә

align-selfФлексбокс әйберләрендәге коммуналь хезмәтләрне кросс күчәрендә тигезләү өчен индивидуаль кулланыгыз (башлау өчен у күчәре, х күчәре булса ) flex-direction: column. Шул ук вариантлардан сайлагыз align-items: start,,,, яки ( браузер килешү) end.centerbaselinestretch

Флекс әйбер

Тигезләнгән флекс пункты

Флекс әйбер

Тигезләнгән флекс пункты

Флекс әйбер

Тигезләнгән флекс пункты

Флекс әйбер

Тигезләнгән флекс пункты

Флекс әйбер

Тигезләнгән флекс пункты

Флекс әйбер

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Forаваплы вариацияләр дә бар 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аларны горизонталь киңлекне алганда, аларның эчтәлегенә тигез булган киңлекләргә (яки аларның эчтәлеге чик сандыкларыннан артмаса).

Күп эчтәлекле флекс әйбер

Флекс әйбер

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Forаваплы вариацияләр дә бар flex-fill.

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

Owсегез һәм кысылыгыз

.flex-grow-*Флекс әйбернең үсү сәләтен алыштыру өчен, коммуналь хезмәтләрне кулланыгыз . Түбәндәге мисалда, .flex-grow-1элементлар мөмкин булган барлык урынны кулланалар, калган ике флекс әйберләренә кирәкле урынны рөхсәт итәләр.

Флекс әйбер

Өченче флекс пункты

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

.flex-shrink-*Кирәк булса, флекс әйбернең кысылу сәләтен алыштыру өчен коммуналь хезмәтләрне кулланыгыз . Түбәндәге мисалда, икенче флекс элементы .flex-shrink-1аның эчтәлеген яңа сызыкка төрергә мәҗбүр, элеккеге флекс пункты өчен күбрәк урын бирү өчен "кысыла" .w-100.

Флекс әйбер

Ф��екс әйбер

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

flex-growForаваплы вариацияләр дә бар 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 автомобиль кырлары белән кушылганда, Flexbox бик искиткеч әйберләр эшли ала. Түбәндә күрсәтелгән флекс әйберләрен автомобиль кырлары аша контрольдә тотуның өч мисалы: килешү (авто маржа юк), ике әйберне уңга ( .me-auto), һәм ике әйберне сулга этәрү ( .ms-auto).

Флекс әйбер

html

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Тигезләү әйберләре белән

Бер флекс әйберне контейнерның өске яисә аскы өлешенә күчереп күчерегез align-items, flex-direction: columnһәм .margin-top: automargin-bottom: auto

Флекс әйбер

html

<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Ура

Флекс әйберләрнең флекс контейнерга ничек төрелгәнен үзгәртегез. .flex-nowrapБер-берсенә төрүдән (браузерның килешү) , төрү .flex-wrapяки кире төрү белән сайлагыз .flex-wrap-reverse.

Флекс әйбер

<div class="d-flex flex-nowrap">
  ...
</div>

Флекс әйбер

<div class="d-flex flex-wrap">
  ...
</div>

Флекс әйбер

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Forаваплы вариацияләр дә бар 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 заказын куллану өчен яңадан торгызабыз. 0 дән 5кә кадәр бөтен санны алган кебек order, кирәкле өстәмә кыйммәтләр өчен махсус CSS өстәгез.

Беренче флекс пункты

Икенче флекс пункты

Өченче флекс пункты

html

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Forаваплы вариацияләр дә бар 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: -1order: 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,,,, яки . Бу коммуналь хезмәтләрне күрсәтү өчен, без флекс әйберләр санын арттырдык һәм арттырдык.centerbetweenaroundstretchflex-wrap: wrap

Идарә итә! Бу мөлкәт флекс әйберләренең бер рәтенә тәэсир итми.

Флекс әйбер

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Флекс әйбер

<div class="d-flex align-content-end flex-wrap">...</div>

Флекс әйбер

<div class="d-flex align-content-center flex-wrap">...</div>

Флекс әйбер

<div class="d-flex align-content-between flex-wrap">...</div>

Флекс әйбер

<div class="d-flex align-content-around flex-wrap">...</div>

Флекс әйбер

<div class="d-flex align-content-stretch flex-wrap">...</div>

Forаваплы вариацияләр дә бар align-content.

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

Медиа объект

Медиа объект компонентын Bootstrap 4- дән күчерергә телисезме? Элеккегә караганда тагын да сыгылучанлык һәм көйләү мөмкинлеге бирә торган берничә флекс ярдәме белән аны беркайчан да булдырмагыз.

Бу медиа компонентыннан кайбер эчтәлек. Сез моны теләсә нинди эчтәлек белән алыштыра аласыз, кирәк булганда көйли аласыз.

html

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Рәсем янындагы эчтәлекне вертикальләштерергә телисез ди:

html

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Сасс

Коммуналь API

Flexbox коммуналь хезмәтләре безнең коммуналь 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
    ),
    "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,
      ),
    ),