ვებ დიზაინერის სახელმძღვანელო Flexbox-ისთვის

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

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

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

შემდეგი თაობის დიზაინი

Flexbox არის შემდეგი თაობის ინსტრუმენტი, რომელიც დაგეხმარებათ შექმნათ განლაგება CSS-ით; გსურთ თუ არა თქვენი ვებსაიტის ნაწილის განლაგება თუ მედია ელემენტების ბადის ჩვენება. ეს საშუალებას გაძლევთ მარტივად მოაწყოთ, დააწყოთ, გაამართლოთ, გააფართოვოთ და დაალაგოთ ელემენტები თქვენს გვერდზე, CSS უსიამოვნო ჰაკერების ან JavaScript-ის მყიფე დამოკიდებულების გარეშე.

Flexbox-ს შეუძლია შეცვალოს floats, პოზიციონირების ხრიკები, inline-block განლაგება და თუნდაც – shudder – მაგიდის ჩვენების განლაგება. თუ ოდესმე შეგიშლიათ თმა და გაინტერესებთ, რატომ იყო ზოგიერთი ერთი შეხედვით მარტივი განლაგება რთული ან თუნდაც შეუძლებელი CSS-ში, თქვენ მოგეწონებათ Flexbox.

მოქნილი ელემენტები

Flexbox-ის მაგია არის მშობლის „ფლექს კონტეინერსა“ ​​და შვილების „ფლექს ნივთებს“ შორის ურთიერთობაში. იმისათვის, რომ აიღოთ Flexbox-ის სრული კონტროლი, თქვენ უნდა მიატოვოთ ცურვის, პოზიციონირებისა და გაწმენდის წინა იდეა. ეს არის სრულიად ახალი გზა თქვენი გვერდის გასაშლელად.

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

შენიშვნა: ნებისმიერი HTML ელემენტი შეიძლება იყოს flex კონტეინერი ან flex ელემენტი. ნებისმიერი : ადრე და : შემდეგ ფსევდოელემენტები, რომლებიც გაქვთ თქვენს ფლექს კონტეინერზე, განიხილება როგორც ბავშვები და, შესაბამისად, პირველი კლასის ფლექსის ნივთები.

რიგები და სვეტები

Flexbox-ში არის ორი ღერძი, რომელიც აკონტროლებს, თუ როგორ განლაგებულია ფლექსის ელემენტები გვერდზე: მთავარი ღერძი და ჯვარედინი ღერძი. ნაგულისხმევად, Flexbox დაყენებულია ისე, რომ ძირითადი ღერძი გადადის მარცხნიდან მარჯვნივ (ან პირიქით, ენებისთვის, რომლებიც იკითხება მარჯვნივ-მარცხნივ) და ჯვარედინი ღერძი მიედინება ზემოდან ქვემოდან (ზემოთ ნაჩვენები). სანამ ამის დამახსოვრებას აპირებთ, გაითვალისწინეთ, რომ ეს ყველაფერი შეიძლება შეიცვალოს - და შეიცვლება მოქნილი მიმართულება ქონება.

ნაგულისხმევად, Flexbox დაყენებულია flex-direction: row; რაც ნიშნავს, რომ ელემენტები მიედინება მთავარ ღერძზე მარცხნიდან მარჯვნივ, ზედიზედ. ჩვენ შეგვიძლია გადავცვალოთ მთავარი ღერძი ისე, რომ ის მიედინება მარჯვნიდან მარცხნივ გამოყენებით flex-direction: row-reverse (როგორც ზემოთ არის ნაჩვენები).

როგორც ძირითადი ღერძის, ასევე ჯვარედინი ღერძის გადართვისთვის, ჩვენ ვცვლით განლაგებას flex-direction: სვეტი;. ეს შეცვლის მთავარ ღერძს და მოქნილი ელემენტის ნაკადს მარცხნიდან მარჯვნივ ზემოდან ქვემომდე, სვეტში (ზემოთ). ჩვენ ასევე შეგვიძლია დავიწყოთ ქვემოდან და ავიდეთ ზევით ძირითადი ღერძის გადაბრუნებით flex-direction: სვეტი-უკუ.

ცენტრის ელემენტები

Flexbox-ის ერთ-ერთი საუკეთესო რამ არის ის, რომ ის საშუალებას გაძლევთ გაასწოროთ თქვენი შინაარსი ისე, როგორც გსურთ – თუნდაც ვერტიკალური ცენტრირება აბსოლუტური ნიავია! ხშირად არის დაბნეულობა Flexbox-ის გასწორების ირგვლივ, რადგან არსებობს სამი განსხვავებული თვისება, რომლებსაც ვიყენებთ ჩვენი flex ელემენტების გასწორების შესაცვლელად.

ამის ერთ-ერთი მიზეზი ის არის, რომ ეს თვისებები ასწორებს ელემენტებს ძირითადი და ჯვარედინი ღერძის გასწვრივ. ასე რომ, იმის ნაცვლად, რომ იკითხოთ, „როგორ გავამახვილო რაღაც ვერტიკალურად ან ჰორიზონტალურად?“ ჯერ უნდა დაადგინოთ რომელი მიმართულება თქვენი ღერძი არის მიმართული და შემდეგ გაარკვიეთ, რომელი CSS თვისება გამოიყენოთ თქვენი მოქნილი ელემენტების სწორად გასწორებისა და ცენტრისთვის მათ.

მომდევნო რამდენიმე მაგალითში, მე შევეცდები სრულყოფილად მოვახდინო ჩემი ნივთების ცენტრირება. თუმცა, უნდა იცოდეთ, რომ თითოეულ ამ თვისებას აქვს გასწორების რამდენიმე ვარიანტი. სრული სიისთვის, გირჩევთ შეინახოთ ეს CSS-Tricks flexbox მითითება მოხერხებული.

ჯვრის ღერძი

ნაგულისხმევად, მოქნილი ელემენტები გადაჭიმულია მთელ მოქნილ კონტეინერზე ჯვარედინი ღერძის გასწვრივ. თუ გვსურს ელემენტების ცენტრირება ჯვრის ღერძის გასწვრივ, შეგვიძლია გამოვიყენოთ გასწორება-პუნქტები თვისება ჩვენს flex კონტეინერზე და დააყენეთ ცენტრი (ზემოთ ნაჩვენები).

Დამატებით გაჭიმვა და ცენტრი, ასევე შეგვიძლია გამოვიყენოთ მოქნილი დაწყება და flex-end ნივთების დამაგრება ზემოდან და ქვედაში შესაბამისად. და ბოლოს, ჩვენ გვაქვს საბაზისო ხაზი, რომელიც გაასწორებს ელემენტებს თქვენი ტექსტის ქვედა (ან საბაზისო ხაზის) გასწვრივ. ეს ძალზე სასარგებლოა, როდესაც ცდილობთ ნივთების გასწორებას შრიფტის სხვადასხვა ზომის მიხედვით.

დაასაბუთეთ მთავარი ღერძის გასწვრივ

ახლა ჩვენ გვაქვს ცენტრირება, რომელიც მუშაობს ჯვარედინი ღერძის გასწვრივ - ჩვენს შემთხვევაში ზემოდან ქვემოდან - ჩვენ უნდა მივიღოთ ცენტრალური მუშაობა მთავარ ღერძზე. ამისთვის ვიყენებთ დასაბუთება-შინაარსი: ცენტრი (ზემოთ ნაჩვენები).

ისევე როგორც გასწორება-პუნქტები, ასევე შეგვიძლია გამოვიყენოთ მოქნილი დაწყება ან flex-end, ისევე, როგორც სივრცე-შორის და სივრცე-ირგვლივ, რომელიც თანაბრად გაყოფს ელემენტებს შორის დარჩენილ სივრცეს. ეს ძალიან სასარგებლოა ბადის განლაგებებთან მუშაობისას, რომლებიც არ აგროვებენ ზღვრისა და სიგანეების 100 პროცენტს.

უბრალოდ გახსოვდეთ, თუ გადავალთ ნაგულისხმევიდან flex-direction: row; რომ flex-direction: სვეტი;, ძირითადი ღერძი შეიძლება შეიცვალოს მარცხნიდან მარჯვნივ ზემოდან ქვევით. როდესაც ჩვენ გადავდივართ სვეტზე, align-item ხდება ჰორიზონტალური გასწორება, ხოლო justify-content ხდება ვერტიკალური გასწორება.

მრავალი ხაზის გასწორება

ხოლო გასწორება-პუნქტები და დასაბუთება-შინაარსი მშვენივრად მუშაობს, როდესაც თქვენ გაქვთ შინაარსის ერთი მწკრივი ან სვეტი, ყველაფერი ცოტა უფრო რთული ხდება, როდესაც საქმე გაქვთ შინაარსის მრავალ ხაზთან გამოყენების შედეგად. flex-wrap: შეფუთვა; ფლექსის კონტეინერზე.

გასწორება-შიგთავსი მუშაობს ისევე, როგორც დასაბუთება-შინაარსი, მაგრამ ჩნდება მაშინ, როდესაც გვაქვს შინაარსის მრავალი ხაზი. განაცხადით align-content: ცენტრი; ჩვენ შეგვიძლია უზრუნველვყოთ, რომ ხაზები დამაგრდება ჯვრის ღერძის შუაში და მათი ელემენტების ცენტრიდან იქიდან.

ისევე როგორც დასაბუთება-შინაარსი, ასევე შეგვიძლია გამოვიყენოთ მოქნილი დაწყება, flex-end, სივრცე-შორის და სივრცე-ირგვლივ. თუმცა, ამჯერად ისინი მიუთითებენ შინაარსის მწკრივებსა და სვეტებს შორის არსებულ სივრცეს და არა თავად მოქნილ ელემენტებს.

ახლა, CSS-ის მხოლოდ ოთხი ხაზით, ჩვენ გვაქვს ტყვიაგაუმტარი გზა ვერტიკალურად და ჰორიზონტალურად მოქნილი კონტეინერის ყველა პირდაპირი შვილების ცენტრში.

.container {
align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; }

შეავსეთ სივრცე

ჯერჯერობით, ყველაფერი, რაც ვისწავლეთ გასწორების შესახებ, დაკავშირებულია მოქნილ კონტეინერთან და იმაზე, თუ როგორ ასწორებს ის მის შვილებს. ერთად align-self შესაძლებელია გადალახოს გასწორება-პუნქტები თვისება დაყენებულია flex კონტეინერზე ინდივიდუალურად დაყენებით გასწორება-თვითონ რომ მოქნილი დაწყება, flex-end, ცენტრი, საბაზისო ან გაჭიმვა.

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

თითოეულ flex ელემენტს შეიძლება მიენიჭოს ა მოქნილი ზრდის, მოქნილი შეკუმშვა და ა მოქნილი ბაზა ღირებულება. ამ მნიშვნელობებით ჩვენ შეგვიძლია მივუთითოთ ჩვენი იდეალური ზომები და შემდეგ დავაზუსტოთ, თუ როგორ უნდა იმოქმედონ ელემენტებმა იმ სიტუაციებში, სადაც არის დამატებითი ან არასაკმარისი სივრცე. იქიდან ნივთები ამას თავად გაარკვევენ.

მე მინდა ვიფიქრო ამ თვისებებზე, როგორც:

• მოქნილი ზრდის: როგორ მოვიქცე, როცა დამატებითი სივრცეა? როგორ გაიყოფა მოქნილი ელემენტები დარჩენილ სივრცეს?
• მოქნილი შეკუმშვა: როგორ მოვიქცე, როდესაც არ არის საკმარისი ადგილი ყველა მოქნილი ელემენტისთვის? კონტეინერის გადაფარვის ნაცვლად, ვინ დათმობს საკუთარი თავის ნაწილს, რათა ყველაფერი მოერგოს?
• მოქნილი ბაზა: იმის ნაცვლად, რომ დააყენოთ გარკვეული სიგანე ან სიმაღლე თქვენს ელემენტზე, იდეალურად რა სიგანე (რიგად) ან სიმაღლე (სვეტის სახით) იქნება?

გაითვალისწინეთ, რომ მიუხედავად იმისა, რომ შესაძლებელია ამ თვისებების ინდივიდუალურად დაზუსტება, თქვენ თითქმის ყოველთვის იყენებთ ფლექსის სტენოგრამას. იზრდება, შეკუმშვა და საფუძველი აფასებს ერთდროულად. შეამოწმეთ ვიდეოები აქ Flexbox.io flex სტენოგრამის თვისების უფრო დეტალური აღწერისთვის.

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

იდეა იმაში მდგომარეობს, რომ ჩვენ შეგვიძლია დავაყენოთ ჩვენი იდეალური სიგანე ან სიმაღლე საბაზისო მნიშვნელობით და შემდეგ, როდესაც დამატებითი ადგილი იქნება მოქნილი ნივთებისთვის, მოქნილი ზრდის ქონება გადაწყვეტს დამატებით რამდენის აღებას. ანალოგიურად, როდესაც არ არის საკმარისი სივრცე ხელმისაწვდომი, shrink თვისება გადაწყვეტს, თუ რამდენად დათმობს თითოეული ელემენტი (ან 'shrink').

The მოქნილი ზრდის და მოქნილი შეკუმშვა თვისებები არის ერთეულზე ნაკლები, პროპორციული მნიშვნელობები. ისინი აღწერენ, თუ რამდენად გაიზრდება ან შემცირდება ნივთი - ყველა სხვა მოქნილ ელემენტთან მიმართებაში.

ვთქვათ, გვაქვს ორი მოქნილი ელემენტი: ვიდეო და კრედიტები. ჩვენ დავაყენებთ ვიდეოს flex: 1 1 700px; და კრედიტები flex: 3 3 300px;. ახლა ორივე ამ ელემენტის მშობელი არის მოქნილი კონტეინერი, და როდესაც ის 1000 პიქსელის სიგანეა, ყველაფერი მშვენივრად მიდის: ვიდეო იკავებს თავის 700 პიქსელს, ხოლო კრედიტები იკავებს დანარჩენ 300 პიქსელს.

რა მოხდება, როდესაც მოქნილი კონტეინერი არის 1500 პიქსელის სიგანე? ჩვენ გვაქვს დამატებითი 500 პიქსელი სამუშაო, ასე რომ, სად მიდის ეს? სწორედ იქ მოქნილი ზრდის ურტყამს. ვიდეო დაყენებულია 1-ზე, ხოლო კრედიტები დაყენებულია 3-ზე. ეს ნიშნავს, რომ დამატებით ოთახს კრედიტები სამჯერ (375 პიქსელი) დასჭირდება, ვიდრე ვიდეოს მიიღებს (125 პიქსელი).

მსგავსება, რა ხდება, როდესაც ჩვენი მოქნილი კონტეინერი 1000 პიქსელზე ნაკლებია? ვთქვათ, ეს არის 900 პიქსელი: როგორ მოქმედებს ვიდეო და კრედიტები მაშინ? ათწილადებისგან განსხვავებით, ჩვენ უბრალოდ არ ვარღვევთ ახალ ხაზს, ან არ ვამცირებთ მათ პროცენტებს. ამის ნაცვლად, ჩვენ ვიყენებთ მოქნილი შეკუმშვა ქონება.

ვინაიდან კრედიტებს აქვს ა მოქნილი შეკუმშვა 3-დან და ვიდეოს აქვს ა მოქნილი შეკუმშვა 1-დან, ეს ნიშნავს, რომ კრედიტები ვიდეოზე სამჯერ მეტ ადგილს დათმობს. ასე რომ, რადგან სადღაც 100 პიქსელი უნდა გავპარსოთ, კრედიტები უარს იტყვიან 75 პიქსელზე, ხოლო ვიდეო კონტეინერი მხოლოდ 25 პიქსს.

უცნობი ნავიგაციის ზომა

მოდით შევხედოთ flexbox-ის რამდენიმე საერთო გამოყენების შემთხვევას. თუ თქვენ ოდესმე გიმუშავიათ ნავიგაციაზე CMS-ში, როგორიცაა WordPress, გეცოდინებათ, რომ რთული იქნება იმის პროგნოზირება, თუ რამდენი ელემენტი შედის თქვენს ნავიგაციაში.

ყველა ელემენტს შორის სივრცის თანაბრად განაწილება მოითხოვს JavaScript-ს. მაგალითად, თუ თქვენ გაქვთ სამი ელემენტი, თითოეულმა უნდა დაიკავოს სიგანის 33,33 პროცენტი, ხოლო ხუთი ელემენტით თითოეულმა უნდა დაიკავოს 20 პროცენტი.

მოდით შევხედოთ ამ ჩვეულებრივ კოდს, როგორც მაგალითი:

Home
About
Contact

flexbox-ის საშუალებით ჩვენ შეგვიძლია მარტივად შევქმნათ ეს ნავიგაცია და გავხადოთ ის საპასუხო, ეს ყველაფერი მხოლოდ რამდენიმე სტრიქონის CSS-ით. ჩვენ მხოლოდ უნდა დავაყენოთ ჩვენი ნავიგაციის კონტეინერი (ჩვეულებრივ, ელემენტების შეუკვეთავი სია) ჩვენება: მოქნილიდა შემდეგ თითოეული მოქნილი ელემენტი მოქნილობა: 1 ან flex-grow: 1;.

ეს გაჭიმავს სიის ელემენტებს ჰორიზონტალურად და იდეალურად მოერგება მათ ხელმისაწვდომ სიგანეში. მიზეზი, რის გამოც ეს ასე კარგად მუშაობს, არის ის, რომ ჩვენ ვაყენებთ მოქნილი ელემენტების გაზრდას 1-ზე, რაც ნიშნავს, რომ როდესაც ზედმეტი სივრცე რჩება, ის თანაბრად გაიყოფა ყველა ელემენტს შორის.

ამის შესახებ მეტი ინფორმაციისთვის და იმის გასაგებად, თუ როგორ განსხვავებულად შეაფასოთ თქვენი ნავიგაციის ელემენტები, დარწმუნდით, რომ უყურეთ საპასუხო ნავიგაციის სახელმძღვანელოს, რომელიც ხელმისაწვდომია საიტზე Flexbox.io.

თანაბარი სიმაღლის სვეტები

ოდესმე გსურდათ, რომ CSS-ს ჰქონოდა სიმაღლე: as-high-as-the-highest-sibling საკუთრება? ჩვენ ყველანი ვიყავით იქ - გვაქვს შინაარსის სამი სვეტი, რომელთაგან ყველა განსხვავებული ზომისაა (ზემოთ). კონტენტი დინამიურია და საიტი რეაგირებს, ამიტომ თითოეულზე ფიქსირებული სიმაღლის დაყენება გამორიცხულია და JavaScript-ის შესწორება იდეალური არ არის.

ადრე გავიგეთ, რომ align-item-ების ნაგულისხმევი არის მონაკვეთი. ეს ნიშნავს, რომ მოქნილი ელემენტები გაიჭიმება ისე, რომ მოერგოს მშობელ მოქნილ კონტეინერს. და ფლექსის კონტეინერის სიმაღლე როგორ განისაზღვრება? თითქმის ყოველთვის ყველაზე მაღალი შინაარსის ყუთის სიმაღლეზე.

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

I'm short
I'm a pretty tall box that is the biggest
I'm a medium sized box

ახლა, თუ უბრალოდ გამოვიყენებთ ჩვენება: flex; Flex კონტეინერზე და დააყენეთ თითოეული ელემენტი 33,33 პროცენტად მოქნილი ბაზა თვისება, დაუყოვნებლივ მოქნილი ელემენტები გადაჭიმულია მთელ ჯვარედინი ღერძზე, მიუხედავად იმისა, თუ რამდენი შინაარსია მათში (იხ. სურათი ზემოთ).

.container {
display: flex; } .box {
flex: 1 1 33.33%; }

Flexbox-ის უპირატესობები

ვიმედოვნებ, რომ ახლა თქვენ ხედავთ Flexible Box მოდულის გამოყენების სწავლის მნიშვნელობას. მიუხედავად იმისა, რომ ის ვერ გადაჭრის ყველა პრობლემას, რომელიც თქვენ გაქვთ CSS-თან, ეს არის მნიშვნელოვანი ინსტრუმენტი, რომელიც ყველა დიზაინერმა და დეველოპერმა უნდა იცოდეს და ჰქონდეს არსენალში.

დიდი ხანი გავიდა მას შემდეგ, რაც ჩვენ გვქონდა მსგავსი რამ CSS-ზე და მე ვიტყოდი, რომ ეს CSS-ის ერთ-ერთი ყველაზე რთული ნაწილია სასწავლად. უბრალოდ დაიმახსოვრე, რომ შენ ისწავლე, მაგრამ Flexbox არის ის, რისი ათვისებაც შეგიძლია!

აუცილებელი რესურსები

რა Flexbox?!

'რა Flexbox?!' არის უფასო 20 ვიდეო სასწავლო კურსი, რომელიც მე შევქმენი. კურსის პირველ ნახევარში თითოეული ვიდეო წარმოგიდგენთ Flexbox-ის ახალ ასპექტს. მე შევინახე ეს ლამაზი და მოკლე, ასე რომ თქვენ შეგიძლიათ მითითება მოგვიანებით, როდესაც თქვენ გჭირდებათ ფუნჯი up კონკრეტული ნაწილი. კურსის მეორე ნახევარი ეძღვნება რეალურ სამყაროს მაგალითს, სადაც აღწერილია, თუ როგორ შეგვიძლია გამოვიყენოთ Flexbox სწრაფად და მარტივად გადაჭრას მრავალი საერთო განლაგების პრობლემა, რომელსაც ჩვენ ვაწყდებით.

Flexbox-ის სრული სახელმძღვანელო

მას შემდეგ რაც Flexbox-ს ახერხებთ, შეგიძლიათ ტრენინგის მასალები განზე გადადოთ. თუმცა, სასარგებლოა ვიზუალური მითითების ხელმისაწვდომობა. კრის კოიერის ეს ფანტასტიკური რესურსი არღვევს Flexbox-ის 13 განსხვავებულ თვისებებს, რომლებიც გვიჩვენებს, რომელი ეხება flex კონტეინერს და რომელიც ვრცელდება პირდაპირ flex ელემენტებზე.

Flexbugs

Flexbox არ არის უპრობლემოდ და, როგორც ნებისმიერი სხვა, არის ბრაუზერის რამდენიმე შეცდომა და გამოსავალი, რომელთა შესახებაც უნდა იცოდეთ. Flexbugs ასახავს Flexbox-ის ცნობილ შეცდომებს, ასევე გვთავაზობს შესაძლო გამოსწორებებსა და გამოსავალს.

Წაიკითხე მეტი:

• შექმენით ანიმაციური გაყოფილი ეკრანის ჩატვირთვის ეკრანი
• თქვენი შემოქმედებითი აზროვნების გარდაქმნის 10 გზა
• SVG პოლიგონების შექმნა და ანიმაცია