მოქნილი

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

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

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

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

მიმართულება

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

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

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

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

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

საპასუხო ვარიაციები ასევე არსებობს 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კომუნალური პროგრამები flexbox კონტეინერებზე, რათა შეცვალოთ მოქნილი ელემენტების განლაგება ჯვარედინი ღერძზე (y-ღერძი დასაწყებად, x-ღერძი თუ 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>

საპასუხო ვარიაციები ასევე არსებობს 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-selfკომუნალური პროგრამები flexbox-ის ელემენტებზე, რათა ინდივიდუალურად შეცვალოთ მათი განლაგება ჯვარედინი ღერძზე (y-ღერძი დასაწყებად, x-ღერძი თუ 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>

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

სამწუხაროდ, IE10 და IE11 სათანადოდ არ უჭერენ მხარს ავტომატურ მინდვრებს flex ელემენტებზე, რომელთა მშობელს აქვს არანაგულისხმევი 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: autoან margin-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>

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

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

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