გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

მოქნილი

სწრაფად მართეთ ბადის სვეტების, ნავიგაციის, კომპონენტების და სხვათა განლაგება, გასწორება და ზომები. უფრო რთული განხორციელებისთვის, შეიძლება საჭირო გახდეს მორგებული CSS.

მოქნილი ქცევების ჩართვა

გამოიყენეთ displayკომუნალური პროგრამები flexbox კონტეინერის შესაქმნელად და პირდაპირი ბავშვების ელემენტების მოქნილ ელემენტებად გადაქცევისთვის. Flex კონტეინერები და ნივთები შეიძლება შეიცვალოს დამატებითი მოქნილობის თვისებებით.

მე ვარ ფლექსბოქსის კონტეინერი!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
მე ვარ inline flexbox კონტეინერი!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

საპასუხო ვარიაციები ასევე არსებობს .d-flexდა .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

მიმართულება

დააყენეთ მოქნილი ელემენტების მიმართულება მოქნილ კონტეინერში მიმართულების უტილიტებით. უმეტეს შემთხვევაში შეგიძლიათ გამოტოვოთ ჰორიზონტალური კლასი აქ, რადგან ბრაუზერის ნაგულისხმევია row. თუმცა, შეიძლება შეგხვდეთ სიტუაციები, როდესაც დაგჭირდათ ამ მნიშვნელობის მკაფიოდ დაყენება (როგორიცაა საპასუხო განლაგება).

გამოიყენეთ .flex-rowჰორიზონტალური მიმართულების დასაყენებლად (ბრაუზერის ნაგულისხმევი) ან .flex-row-reverseჰორიზონტალური მიმართულების ��აპირისპირო მხრიდან დასაწყებად.

Flex ელემენტი 1
Flex ელემენტი 2
Flex ელემენტი 3
Flex ელემენტი 1
Flex ელემენტი 2
Flex ელემენტი 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ვერტიკალური მიმართულების საპირისპირო მხრიდან დასაწყებად.

Flex ელემენტი 1
Flex ელემენტი 2
Flex ელემენტი 3
Flex ელემენტი 1
Flex ელემენტი 2
Flex ელემენტი 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>

საპასუხო ვარიაციები ასევე არსებობს 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კომუნალური პროგრამები flexbox კონტეინერებზე, რათა შეცვალოთ flex ელემენტების განლაგება მთავარ ღერძზე (X ღერძი დასაწყებად, y-ღერძი თუ flex-direction: column). აირჩიეთ start(ბრაუზერის ნაგულისხმევი), end, center, between, aroundან evenly.

Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<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>

საპასუხო ვარიაციები ასევე არსებობს 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კომუნალური პროგრამები flexbox კონტეინერებზე, რათა შეცვალოთ მოქნილი ელემენტების განლაგება ჯვარედინი ღერძზე (y-ღერძი დასაწყებად, x-ღერძი თუ flex-direction: column). აირჩიეთ start, end, center, baselineან stretch(ბრაუზერის ნაგულისხმევი).

Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<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>

საპასუხო ვარიაციები ასევე არსებობს 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

საკუთარი თავის გასწორება

გამოიყენეთ align-selfკომუნალური პროგრამები flexbox-ის ელემენტებზე, რათა ინდივიდუალურად შეცვალოთ მათი განლაგება ჯვარედინი ღერძზე (y-ღერძი დასაწყებად, x-ღერძი თუ flex-direction: column). აირჩიეთ იგივე ვარიანტებიდან align-items: start, end, center, baselineან stretch(ბრაუზერის ნაგულისხმევი).

Flex ელემენტი
გასწორებული flex ელემენტი
Flex ელემენტი
Flex ელემენტი
გასწორებული flex ელემენტი
Flex ელემენტი
Flex ელემენტი
გასწორებული flex ელემენტი
Flex ელემენტი
Flex ელემენტი
გასწორებული flex ელემენტი
Flex ელემენტი
Flex ელემენტი
გასწორებული flex ელემენტი
Flex ელემენტი
<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>

საპასუხო ვარიაციები ასევე არსებობს 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კლასი ძმური ელემენტების სერიაზე, რათა აიძულოთ ისინი მათი შინაარსის ტოლი სიგანეებით (ან ტოლი სიგანეებით, თუ მათი შინაარსი არ აღემატება მათ საზღვრებს) და დაიკავებს მთელ ხელმისაწვდომ ჰორიზონტალურ სივრცეს.

Flex ელემენტი ბევრი შინაარსით
Flex ელემენტი
Flex ელემენტი
<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>

საპასუხო ვარიაციები ასევე არსებობს flex-fill.

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

იზრდება და მცირდება

გამოიყენეთ .flex-grow-*კომუნალური პროგრამები მოქნილი ელემენტის ზრდის შესაძლებლობის გადასართავად ხელმისაწვდომი სივრცის შესავსებად. ქვემოთ მოყვანილ მაგალითში .flex-grow-1ელემენტები იყენებს ყველა მისაწვდომ სივრცეს, რაც მათ შეუძლიათ, ხოლო დანარჩენ ორ მოქნილ ელემენტს აუცილებელ სივრცეს აძლევს.

Flex ელემენტი
Flex ელემენტი
მესამე მოქნილი ელემენტი
<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.

Flex ელემენტი
Flex ელემენტი
<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და 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-ს შეუძლია გააკეთოს საკმაოდ გასაოცარი რამ, როდესაც აურიეთ მოქნილი გასწორებები ავტო მინდვრებთან. ქვემოთ მოცემულია მოქნილი ელემენტების მართვის სამი მაგალითი ავტომატური მინდვრების საშუალებით: ნაგულისხმევი (ავტომატური მინდვრის გარეშე), ორი ელემენტის მარჯვნივ ( .me-auto) და ორი ელემენტის მარცხნივ ( .ms-auto).

Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>

გასწორებული ნივთებით

ვერტიკალურად გადაიტანეთ ერთი მოქნილი ელემენტი კონტეინერის ზევით ან ქვევით შერევით align-items, flex-direction: columnდა margin-top: autoან margin-bottom: auto.

Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<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.

Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex flex-nowrap">
  ...
</div>
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex flex-wrap">
  ...
</div>
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex flex-wrap-reverse">
  ...
</div>

საპასუხო ვარიაციები ასევე არსებობს 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 შეკვეთის გამოსაყენებლად. როგორც orderიღებს ნებისმიერ მთელ რიცხვს 0-დან 5-მდე, დაამატეთ მორგებული CSS ნებისმიერი დამატებითი მნიშვნელობისთვის.

პირველი მოქნილი ნივთი
მეორე flex ელემენტი
მესამე მოქნილი ელემენტი
<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>

საპასუხო ვარიაციები ასევე არსებობს 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: -1და order: 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კომუნალური პროგრამები flexbox-ის კონტეინერებზე, რათა გაასწოროთ მოქნილი ელემენტები ჯვარედინი ღერძზე. აირჩიეთ start(ბრაუზერის ნაგულისხმევი), end, center, between, aroundან stretch. ამ კომუნალური საშუალებების დემონსტრირებისთვის, ჩვენ გავაძლიერეთ flex-wrap: wrapდა გავზარდეთ მოქნილი ელემენტების რაოდენობა.

Თავები მაღლა! ეს თვისება არ მოქმედებს მოქნილი ელემენტების ცალკეულ მწკრივებზე.

Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex align-content-end flex-wrap">...</div>
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex align-content-center flex-wrap">...</div>
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex align-content-between flex-wrap">...</div>
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex align-content-around flex-wrap">...</div>
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
Flex ელემენტი
<div class="d-flex align-content-stretch flex-wrap">...</div>

საპასუხო ვარიაციები ასევე არსებობს 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

მედია ობიექტი

ეძებთ მედია ობიექტის კომპონენტის გამეორებას Bootstrap 4-დან? ხელახლა შექმენით ის უმოკლეს დროში რამდენიმე მოქნილი უტილიტათი, რაც კიდევ უფრო მეტ მოქნილობასა და პერსონალიზაციას იძლევა, ვიდრე ადრე.

Placeholder Image
ეს არის გარკვეული შინაარსი მედია კომპონენტიდან. თქვენ შეგიძლიათ შეცვალოთ იგი ნებისმიერი შინაარსით და შეცვალოთ იგი საჭიროებისამებრ.
<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>

და თქვით, რომ გსურთ შინაარსის ვერტიკალურად ცენტრირება სურათის გვერდით:

Placeholder Image
ეს არის გარკვეული შინაარსი მედია კომპონენტიდან. თქვენ შეგიძლიათ შეცვალოთ იგი ნებისმიერი შინაარსით და შეცვალოთ იგი საჭიროებისამებრ.
<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>

სას

Utilities API

Flexbox-ის კომუნალური პროგრამები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss. ისწავლეთ როგორ გამოიყენოთ Utilities 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
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "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,
      ),
    ),