Флекс
Челтәр баганаларының макетын, тигезләнешен, зурлыгын тиз арада идарә итегез, навигация, компонентлар һәм башкалар. Катлаулырак тормышка ашыру өчен, махсус 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-flex
Forаваплы вариацияләр дә бар .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
горизонталь юнәлешне каршы ягыннан башлау өчен кулланыгыз .
<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
вертикаль юнәлешне каршы ягыннан башлау өчен кулланыгыз .
<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
.between
around
<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
.baseline
stretch
<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
.center
baseline
stretch
<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 with a lot of content</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-grow
Forаваплы вариацияләр дә бар 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: auto
margin-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
,,,center
between
килешүaround
яки . stretch
Бу коммуналь хезмәтләрне күрсәтү өчен, без flex-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