Source

Флекс

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

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

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

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

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

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

<div class="d-inline-flex p-2 bd-highlight">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 bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

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

Флекс 1

Флекс 2

Флекс 3

Флекс 1

Флекс 2

Флекс 3

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">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

Тутыру

.flex-fillБарлык булган горизонталь киңлекне алганда, аларны тигез киңлектә мәҗбүр итәр өчен классны бертуган элементлар сериясендә кулланыгыз . Бигрәк тә тигез киңлектә, яки акланган, навигация өчен файдалы.

Флекс әйбер

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

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

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

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

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

Флекс әйбер

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

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

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

Флекс әйбер

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">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

Авто кырлар

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

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

Флекс әйбер

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

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

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

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

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

Флекс әйбер

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

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">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 bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">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