Флекс

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

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

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

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

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

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

<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

Ectionнәлеш

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

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

Флекс 1

Флекс 2

Флекс 3

Флекс 1

Флекс 2

Флекс 3

<div class="d-flex flex-row">
  <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

<div class="d-flex flex-column">
  <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

Эчтәлекне аклау

Флексбокс контейнерларында коммуналь хезмәтләрне кулланыгыз justify-content, төп күчәрдә флекс әйберләренең тигезләнешен үзгәртү өчен (башлау өчен х күчәре, у күчәре булса flex-direction: column). ( Браузерның startкилешү ) end,,, яки center.betweenaround

Флекс әйбер

<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>

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

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

Предметларны тигезләү

Флексбокс контейнерларында коммуналь хезмәтләрне кулланыгыз 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

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

Авто кырлар

Flexbox автомобиль кырлары белән кушылганда, Flexbox бик искиткеч әйберләр эшли ала. Түбәндә күрсәтелгән флекс әйберләрен автомобиль кырлары аша контрольдә тотуның өч мисалы: килешү (авто маржа юк), ике әйберне уңга ( .mr-auto), һәм ике әйберне сулга этәрү ( .ml-auto).

Кызганычка каршы, IE10 һәм IE11 флекс әйберләрдәге автомобиль кырларын тиешенчә хупламыйлар, аларның ата-анасы килешү булмаган justify-contentкыйммәткә ия. Төгәлрәк мәгълүмат өчен бу StackOverflow җавапын карагыз .

Флекс әйбер

<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

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

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

Флекс әйбер

<div class="d-flex align-items-start flex-column" 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" 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

Заказ

Берничә компьютер ярдәмендә махсус флекс әйберләренең визуаль тәртибен үзгәртегез order. Без әйберне беренче яки соңгы ясау вариантларын тәкъдим итәбез, шулай ук DOM заказын куллану өчен яңадан торгызабыз. orderТеләсә нинди бөтен кыйммәтне (мәсәлән, ) алган кебек 5, кирәкле өстәмә кыйммәтләр өчен махсус CSS өстәгез.

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

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

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

<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-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.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-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-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-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

Эчтәлекне тигезләү

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-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