რა არის Flexbox? ყველა css ავტორიტეტის აღწერა, ძირითადი პრინციპები, უპირატესობები და უარყოფითი მხარეები. განლაგება დახმარებით CSS Flexbox CSS Flexbox საფუძვლები
Flexbox იდეალურია ვებსაიტებზე ფართო განლაგების შესაქმნელად, სამსვეტიან განლაგებაზე, ე.წ. „წმინდა გრაალის“ განლაგება, სადაც ყველა სვეტმა ერთმანეთისგან დამოუკიდებლად უნდა დაიკავოს ერთი და იგივე სიმაღლე. ციმუ ინ გასასვლელი კოდიმთავარი არის ნავიგაციამდე, ხოლო თავად მთავარ მხარეს არის მთავარი ნავიგაციის შემდეგ.
Რატომაც არა.
flexbox-ის გამოჩენამდე მნიშვნელოვანი იყო ასეთი განლაგების დასრულება ყოველგვარი ჰაკერების გარეშე. საცალო მოვაჭრეებს ხშირად უწევდათ ისეთი გამოსვლები, როგორიცაა დამატებითი მარკირების დამატება, ნეგატიური ზღვრების ჩადება და სხვა ხრიკები, რათა ყველაფერი სწორი ყოფილიყო ვალდებულებისა თუ ეკრანული სამყაროს მიუხედავად. ალე, როგორც უფრო დიდი კონდახის დამიზნების ჩვენება, flexbox-ზე ყველაფერი უფრო ადვილია.
ღერძის მოკლე გამოკლების კოდი. ამ მაგალითში, ჩვენ ვიყენებთ #main ელემენტს flex-container-ით, ხოლო header და footer ივსება ბლოკის ელემენტებით. სხვა სიტყვებით რომ ვთქვათ, მხოლოდ შუა ნაწილი ხდება flexbox. ღერძი არის ფრაგმენტი, რომელიც უნდა გატეხოს її მოქნილი კონტეინერი.
#main(დისპლეი: მოქნილი; მინ-სიმაღლე: calc (100vh - 40vh);)
უბრალოდ შეცვალეთ ეკრანი: მოქნიეთ მოქნილი კონტეინერის დასაყრად. პატივისცემით, ჩვენ ასევე დავაყენეთ min-height მნიშვნელობა დამხმარე ფუნქციისთვის calc () და დავაყენეთ #main როგორც 100% იმ ფართობის სიმაღლეზე, რომელსაც განვიხილავ. მინუსქუდისა და ძირის სიმაღლე (თითოეული 20vh). ეს გარანტიას იძლევა, რომ განლაგება დაიკავებს ეკრანის მთელ სიმაღლეს, ისე რომ ის მოერგოს მცირე სივრცეს. შედეგად, იატაკი არ აწვება და არ ართმევს მის ქვეშ არსებულ ცარიელ ადგილს, თითქოს სამაგიეროდ ის იკავებს ეკრანის სიმაღლეზე ნაკლებს.
გაკეთდა მინ-სიმაღლის გამოთვლა, ვთქვათ, რომ ჩვენ შევწყვიტეთ ყუთის ზომა: საზღვრის ყუთი ყველა ელემენტისთვის. იაკბიმ არ მომკლა, მაშინ საჭირო იქნებოდა ბალიშის ღირებულების დამატება sumi-სთვის virahuvannya-სთვის.
Flex კონტეინერის დაყენების შემდეგ, ჩვენ შეიძლება ვიყოთ ფლექსის ნივთების გვერდით.
#main> article (flex: 1;) #main> nav, #main> aside (flex: 0 0 20vw; background: beige;) #main> nav (შეკვეთა: -1;)
მოქნილობის ძალა მოკლეა მოქნილობის ზრდის, მოქნილობისა და მოქნილობის ბაზისისთვის. პირველისთვის ჩვენ დავწერეთ მხოლოდ ერთი მნიშვნელობა, რადგან ეს flex აყენებს flex-grow-ის ძალას. სხვა vipad-ში ჩვენ დავწერეთ სამივე მნიშვნელობა
მინდა ვიცოდე მეტი FlexBox-ის შესახებ. Flexbox-ის განლაგების მოდული (მოქნილი ყუთი - „მოქნილი ბლოკი“, ამჟამად W3C კანდიდატის რეკომენდაცია) ადგენს ამოცანას უფრო ეფექტური განლაგების მეთოდის გავრცელება, კონტეინერში ელემენტებს შორის თავისუფალი სივრცის ჩვენება და გაყოფა, ნავიგაცია, თუ ისინი არ არის ზომის - დომინანტურად და/ან დინამიურად (ვარსკვლავური სიტყვა "ცელქი").
კონტეინერის გაფართოებაში მოქნილი განლაგების მთავარი იდეა არის მისი ელემენტების სიგანის/სიმაღლის (და რიგის) შეცვლა სივრცის უმოკლეს შევსებისთვის (უმეტეს შემთხვევაში - ეკრანის ყველა ხედის გასაუმჯობესებლად და ეკრანის ზომის შეცვლა).მოქნილი კონტეინერი აჭიმავს ელემენტებს თავისუფალი სივრცის შესავსებად ან მათი შეკუმშვის მიზნით, საზღვრიდან გასვლის თავიდან ასაცილებლად.
რაც მთავარია, flexbox-layout არ დევს პირდაპირ მთავარ განლაგებაზე (ბლოკები, ვერტიკალურად დაწყობილი და ონლაინ ელემენტები, ჰორიზონტალურად დაწყობილი).იმ საათში, რადგან ტიპიური განლაგება შესაფერისია ვებ გვერდებისთვის, თქვენ არ გჭირდებათ მოქნილი იყოთ დიდი ან დასაკეცი დანამატების მხარდასაჭერად (განსაკუთრებით თუ თქვენ შეძლებთ შეცვალოთ ეკრანის ორიენტაცია მარჯვნივ, შეცვალოთ ზომა, გააფართოვოთ, ჭედური და ა.შ.).
ოსკილკი flexbox არის მთელი მოდული და არა მხოლოდ ერთი ძალა, არამედ უპიროვნო ძალების კომბინაცია.მათი მოქმედებები შეიძლება შეასრულოს კონტეინერში (Batkiv ელემენტი, ე.წ. flex-container), ამავე დროს, როგორც სხვა ორგანოები zastosovuyutsya to ბავშვის ელემენტები, ან flex-ელემენტები.
ისევე, როგორც თავდაპირველი განლაგება პრიმირებულია ბლოკის და ხაზოვანი ელემენტების პირდაპირ ნაკადზე, მოქნილი განლაგება პრიმირებულია მოქნილი ნაკადის პირდაპირ ნაკადზე.
Flexbox
ძირითად ელემენტში ისინი გაიყოფა ან მთავარ ღერძზე (მთავარ საწყისში მთავარ ბოლოში), ან განივი ღერძში (ჯვარედინი სტარტში ჯვარედინი ბოლოში).
main-axis - მთავარი ღერძი, როგორ დავახარისხოთ მოქნილი ელემენტები.Zvernіt პატივისცემა, ეს არის obov'yazkovo დამნაშავე buti ჰორიზონტალური, ყველა ტყუილი ხარისხში დასაბუთება-შინაარსი.
ძირითადი დაწყება | main-end - მოქნილი ნივთები მოთავსებულია კონტეინერში მთავარი ბოლო პოზიციის ძირითადი საწყისი პოზიციაზე.
ძირითადი ზომა - flex-ელემენტის სიგანე ან სიმაღლე სარეზერვო არჩეული საბაზისო მნიშვნელობის მიხედვით.მთავარი მნიშვნელობა შეიძლება იყოს ელემენტის სიგანე ან სიმაღლე.
ჯვარი ღერძი - ჯვარი ღერძი, თავთან პერპენდიკულარული.Її პირდაპირ დევს მთავარი ღერძის მიმართულებით.
ჯვარედინი დაწყება | ჯვარედინი ბოლო - მოქნილი რიგები ივსება ელემენტებით და მოთავსებულია კონტეინერში ჯვარედინი დაწყების და ჯვარედინი ბოლო მდგომარეობაში.
ჯვრის ზომა - მოქნილი ელემენტის სიგანე ან სიმაღლე ვარდნაში, ძველი მნიშვნელობის ზომის მიხედვით.სიმძლავრის მნიშვნელობა იზომება ელემენტის სიგანით ან სიმაღლით, რაც დამოკიდებულია ზომაზე.
ავტორიტეტი
ჩვენება: flex | inline-flex;
მიუთითეთ flex-container (inline ან block-deposit, პირიქით), ჩართეთ flex-კონტექსტი ყველა არაშუალედური დანართისთვის.
ჩვენება: სხვა მნიშვნელობები | მოქნილი | inline-flex;
ტკიპა მხედველობაში:
CSS სვეტების სვეტები არ მუშაობს flex კონტეინერთანfloat, წმინდა და ვერტიკალური გასწორება არ მუშაობს flex ელემენტებთან
მოქნილი მიმართულება
Zastosovuetsya მამის ელემენტს Flex-კონტეინერი.
ძირითადი ძირითადი ღერძის დაყენება, თავისთავად უშუალოდ მოქნილი ელემენტებისთვის, რომლებიც მოთავსებულია კონტეინერში.
flex-direction: row | მწკრივი-უკუ | სვეტი | სვეტის საპირისპირო
მწკრივი (ჩაკეტვისთვის): მარცხნიდან მარჯვნივ ltr-სთვის, მარცხნიდან მარჯვნივ rtl-სთვის;
row-reverse: მოუხვიეთ მარჯვნივ ltr-სთვის, მოუხვიეთ მარჯვნივ rtl-სთვის;
სვეტი: მწკრივის მსგავსი, ზემოდან ქვემოთ;
სვეტი-უკუ: მწკრივის-უკუღმართის მსგავსი, ქვემოდან ზევით.
მოქნილი შეფუთვა
Zastosovuetsya მამის ელემენტს Flex-კონტეინერი.
საგულისხმოა, რომ კონტეინერი არის ერთრიგიანი ან მრავალმწკრივი, ასევე სწორია ღერძის გასწვრივ, პირდაპირ წინ, რომელშიც ახალი რიგები დაიდება.
flex-wrap: nowrap | შეფუთვა | შეფუთვა საპირისპირო
nowrap (გადასაღებად): ერთი მწკრივი / მარჯვენა ხელი ltr-ისთვის, მარჯვენა ხელი rtl-სთვის;
შეფუთვა: მდიდარი სტრიქონი / მარცხნივ მარჯვნივ ltr-სთვის, მარცხენა მარჯვნივ rtl-სთვის;
wrap-reverse: მდიდარი სტრიქონი / მარჯვნივ მარცხნივ ltr-სთვის, მარჯვნივ მარცხნივ rtl-სთვის.
მოქნილი ნაკადი
Zastosovuetsya მამის ელემენტს Flex-კონტეინერი.
ეს არის მალსახმობი მოქნილობის მიმართულებისა და მოქნილი გადახვევის სიმძლავრისთვის, ამავე დროს ისინი აღნიშნავენ თავსა და განივი ღერძს.რიგის nowrap-ის მნიშვნელობა აღებულია როგორც საკეტი.
მოქნილი ნაკადი< ‘flex-direction’> || < ‘Flex-wrap’>
დასაბუთება-შინაარსი
Zastosovuetsya მამის ელემენტს Flex-კონტეინერი.
ის აჩვენებს მთავარი ღერძის ხილვადობას.Spriyaє ეფექტური rozpodіlu vіlne mіsce in razі, თუ რიგების ელემენტები არ "იჭიმება", არამედ იჭიმება, მაგრამ უკვე მიაღწია მაქსიმალურ გაფართოებას.ის ასევე საშუალებას გაძლევთ შეაფასოთ ელემენტები სასიმღერო სამყაროში, როდესაც რიგს სცდებით.
justify-content: flex-start | მოქნილი დასასრული | ცენტრი | შორის სივრცე | სივრცე გარშემო
flex-start (ჩაკეტვისთვის): ელემენტები zsuvayutsya მწკრივის კუბამდე;
flex-end: ელემენტები zsuvayutsya რიგის ბოლომდე;
ცენტრი: ელემენტები გასწორებულია რიგის შუაზე;
სივრცე-შორის: ელემენტები განლაგებულია თანაბრად (პირველი ელემენტი რიგის კუბზე, დანარჩენი - ბოლოს)
სივრცე-ირგვლივ: ელემენტები განლაგებულია თანაბრად თანაბარი პოზიციით მათსა და მწკრივის პოზიციას შორის.
დასაბუთება-შინაარსი
გასწორება-პუნქტები
Zastosovuetsya მამის ელემენტს Flex-კონტეინერი.
გადაწყვიტეთ ჩაკეტვის ქცევა, რათა მოქნილი ელემენტები მკაფიოდ გაბრწყინდეს ღერძის გასწვრივ ნაკადის მწკრივზე.გთხოვთ, გაითვალისწინოთ justify-content ვერსია ჯვარედინი ღერძისთვის (მთავარზე პერპენდიკულარული).
align-items: flex-start | მოქნილი დასასრული | ცენტრი | საბაზისო | გაჭიმვა
flex-start: ჯვარედინი დაწყების საზღვარი ჯვარედინი დაწყების პოზიციების ელემენტებისთვის;
flex-end: ჯვარედინი საზღვარი ჯვარედინი პოზიციის გაფართოების ელემენტებისთვის;
ცენტრი: ელემენტები განლაგებულია განივი ღერძის ცენტრში;
საბაზისო: ელემენტები შეესაბამება მათ საწყისს;
გაჭიმვა (შეფუთვისთვის): ელემენტები იჭიმება კონტეინერზე მორგებისთვის (ფიქსირებული მინ-სიგანე/მაქს-სიგანე).
გასწორება-პუნქტები
შინაარსის გასწორება
Zastosovuetsya მამის ელემენტს Flex-კონტეინერი. მოქნილი კონტეინერის რიგების ჩვენება, როცა თავისუფალი სივრცე ჩანს განივი ღერძზე, მსგავსია, თუ როგორ შევამოწმოთ დასაბუთებული-შიგთავსი სათავე ღერძზე. შენიშვნა: სიმძლავრე არ ვრცელდება ერთი რიგის flexbox-ებზე.
align-content: flex-start | მოქნილი დასასრული | ცენტრი | სივრცე | სივრცე გარშემო | გაჭიმვა
flex-start: რიგები ბრუნავს კონტეინერის მანძილის მიხედვით;
flex-end: რიგები ბრუნავს კონტეინერის ბოლოების მიხედვით;
ცენტრი: რიგები გასწორებულია კონტეინერის ცენტრში;
შუალედი შორის: რიგები იყოფა თანაბრად (პირველი რიგი მწკრივის ღეროზე, დანარჩენი - ბოლოს)
სივრცე-ირგვლივ: რიგები თანაბრად იყოფა ერთმანეთში;
გაჭიმვა (ჩაკეტვისთვის): რიგები დაჭიმულია, ავსებს თავისუფალ ადგილს.
შინაარსის გასწორება
შეკვეთა
იყიდება zamovchuvannyam flex-elementi rozashovuvaetsya cob მიზნით.თუმცა, შეკვეთის უფლებამოსილებას შეუძლია გააკონტროლოს მათი შეფუთვის ბრძანება კონტეინერებში.
შეკვეთა 1
მოქნილი ზრდის
გააჩერეთ სანამ ბავშვი / მოქნილი ელემენტი. მოქნილი ელემენტისთვის განსაზღვრავს საჭიროების შემთხვევაში "ზრდის" უნარს.იღებს უსასრულო მნიშვნელობას, ემსახურება პროპორციულად.ეს ნიშნავს, რომ კონტეინერის შუაში არსებული თავისუფალი სივრცის ნაწილი შეიძლება დაიკავოს ელემენტმა. თუ Flex-grow-ის ყველა სიმძლავრის ელემენტი დაყენებულია 1-ზე, მაშინ ტყავის მორთვა ამოღებულია იმავე ზომის კონტეინერის შუაში.თუ თქვენ მიუთითეთ ერთ-ერთი ნაგულისხმევი მნიშვნელობა 2, მაშინ სესხი თვეზე ორჯერ გრძელი იქნება, უფრო დაბალი.
მოქნილი ზრდის
მოქნილი შეკუმშვა
გააჩერეთ სანამ ბავშვი / მოქნილი ელემენტი.
მოქნილი ელემენტისთვის განსაზღვრავს საჭიროების შემთხვევაში შეკუმშვის უნარს.
მოქნილი შეკუმშვა
უარყოფითი რიცხვები არ მიიღება.
მოქნილი საფუძველი
გააჩერეთ სანამ ბავშვი / მოქნილი ელემენტი. ელემენტის ჩაკეტვის დანიშვნა კონტეინერში სივრცის გახსნამდე.
მოქნილი საფუძველი
მოქნილი
გააჩერეთ სანამ ბავშვი / მოქნილი ელემენტი. ეს არის სტენოგრამა flex-grow, flex-shrink და flex-basis.სხვა და მესამე პარამეტრები (flex-shrink, flex-basis) ენის სპეციფიკურია.დაბლოკვის ღირებულება - 0 1 ავტო.
flex: არცერთი | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]
გასწორება-თვითონ
გააჩერეთ სანამ ბავშვი / მოქნილი ელემენტი. ნებას რთავს დავალებების ხელახალი რუქას ჩაკეტვის ან გასწორების ერთეულების, სხვა მოქნილი ელემენტებისთვის. ხელმისაწვდომ მნიშვნელობების მოკლე მიმოხილვისთვის დაუბრუნდით ერთეულების გასწორების სიმძლავრის აღწერას.
align-self: auto | flex დაწყება | მოქნილი დასასრული | ცენტრი | საბაზისო | გაჭიმვა
ვრცელდება
ის თითქმის უბრალო კონდახს ჰგავს, დღეს პრაქტიკულია: ზუსტად ცენტრში გამოიყურება.Flexbox-ის დამარცხება მარტივი არაფერია.
მშობელი (ჩვენება: მოქნილი; სიმაღლე: 300 პიქსელი;) .ბავშვი (სიგანე: 100 პიქსელი; /* მართალია * / სიმაღლე: 100 პიქსელი; / * მართალია * / ზღვარი: ავტო; / * მაგია! * /)
ეს კონდახი ეფუძნება იმ ფაქტს, რომ მოქნილი კონტეინერის ზღვარი, ამოცანები, როგორიცაა auto, poglenaє zayviy expanse, რომ ასეთ რანგში შესვლის ამოცანაა ელემენტის ზუსტად ცენტრში მოქცევა შეტევითი ღერძების გასწვრივ. ახლა მოდით ბრძოლა ძალაუფლებისთვის.მიუთითეთ ფიქსირებული ზომის 6 ელემენტის ნაკრები (შეღებვისთვის), ან შეგიძლიათ შეცვალოთ კონტეინერის ზომა.ჩვენ გვინდა თანაბრად გავაფართოვოთ ისინი ჰორიზონტალურად, ისე, რომ ბრაუზერის ფანჯრის ზომის შეცვლისას ყველაფერი კარგად გამოიყურებოდა (@ media-savings-ის გარეშე!).
Flex- კონტეინერი (
/* Cob flex კონტექსტზე */
ჩვენება: მოქნილი;
/ * ახლა ეს არის მნიშვნელოვანი პირდაპირ ნაკადი i chi მინდა mi, schob elementi
გადატანილია ახალ რიგში
* გახსოვდეთ, რომ ეს იგივეა, რომ მე:
* Flex-direction: row;
* Flex-wrap: შეფუთვა;
* /
flex-flow: მწკრივის შეფუთვა;
/ * ახლა მნიშვნელოვანია, როგორ გაფართოვდება სივრცე * /
}
მზადაა. ყველაფერი დანარჩენი - უკვე მარჯვნივ არის მორთული. ოდესღაც რამე ვცადოთ.შეგვატყობინეთ, რომ ჩვენ გვჭირდება ნავიგაცია ნავიგაციის მარჯვენა მხარეს, ჩვენი საიტის ზედა ნაწილში, მაგრამ გვსურს, რომ ის გამოჩნდეს ცენტრში საშუალო ზომის ეკრანებისთვის და გადაიქცეს ერთ გვერდზე პატარაებზე.ყველაფრის დასრულება მარტივია.
/* დიდი ეკრანები */
.ნავიგაცია(
ჩვენება: მოქნილი;
flex-flow: მწკრივის შეფუთვა;
/ * ელემენტების გატეხვა მწკრივის ბოლომდე თავის ღერძის გასწვრივ * /
justify-content: flex-end;
}
მედია ყველა და (მაქს. სიგანე: 800 პიქსელი) (
.ნავიგაცია(
/ * საშუალო ზომის ეკრანებისთვის გამორთეთ ნავიგაცია ცენტრში,
ელემენტებს შორის სივრცის თანაბრად განაწილება * /
დასაბუთება-შინაარსი: სივრცე ირგვლივ;
}
}
/* პატარა ეკრანები */
მედია ყველა და (მაქს. სიგანე: 500 პიქსელი) (
.ნავიგაცია(
/ * პატარა ეკრანებზე შემიძლია შევცვალო სტრიქონი ელემენტების ჩემი თანმიმდევრობით სვეტში * /
flex-direction: სვეტი;
}
}
მოდით ვითამაშოთ მოქნილი მოქნილი ელემენტებით!მოგწონთ მობილურზე ორიენტირებული სამ სვეტიანი განლაგება სრული სიგანის სათაურით და ქვედა კოლონტიტულით?І іnshim შეუკვეთე roztashuvannya.
შეფუთვა (
ჩვენება: მოქნილი;
flex-flow: მწკრივის შეფუთვა;
}
/* დააყენეთ ყველა ელემენტის სიგანე 100% */
.header, .main, .nav, .aside, .footer (
მოქნილობა 1100%;
}
/ * ჩემი აზრით, ორიენტაციისთვის ჩვენ ვეყრდნობით გარე წესრიგს
* მობილური დანართები:
* 1 თავი
* 2 ნავი
* 3 მთავარი
* 4 განზე
* 5 ფუტი
* /
/* საშუალო ზომის ეკრანი */
მედია ყველა და (წთ. სიგანე: 600 პიქსელი) (
/* შეურაცხყოფილი ორი გვერდითი ზოლი ერთ მწკრივად არის აშლილი */
.გვერდით (მოქნილი: 1 ავტო;)
}
/* დიდი ეკრანები */
არაფერი დგას, მუშავდება ტექნოლოგიები და სტანდარტები, ინერგება საიტის განლაგების ახალი და ახალი მეთოდები, მაგალითად, განლაგება ტაბულური ელემენტებით, მაგრამ ჩვენ ვერ დავინახეთ ობიექტური მიზეზები, ის შეიცვალა განლაგებით მცურავი ელემენტებით.
ჩაკეტვის კოდით მდიდარი რედაქტორებისთვის, ან Emmet შვედური მარკირების სახელმძღვანელოს ჩამოსატვირთი დანამატისთვის, ის საშუალებას აძლევს კონდახის ძირითადი მარკირება განხორციელდეს შემდეგი გზით: სექცია > div * 3 > lorem+ ჩანართი (მნიშვნელობა ლორემიქმნის ტექსტს, როგორც ქვემოთ მოცემულ სურათზე).
პატივისცემის გამოსახატავად, რომ განსაკუთრებული ძალისხმევის გამომჟღავნების გარეშე წავიღეთ ჩვენი განლაგების სვეტების განლაგება იმავე სიმაღლეზე, მათგან დამოუკიდებლად და ეს საოცრებაა. ელემენტები
არა მოქნილი ელემენტებით შესაფუთად და ოფლში ხელახლა შესანახად მესამეელემენტი
ჩვენი დუნდულების შედეგი:
რიგის მოქნილი კონტეინერი
ბლოკის ელემენტების ანალოგიით, მოქნილი კონტეინერები შეიძლება იყოს პატარა. მოდით შევხედოთ, თუ რატომ არის განხილული ბლოკის მსგავსი პატარა მოქნილი კონტეინერების გამოყენება. წინა კონდახზე ჩვენ გადავხედეთ გამარჯვებული ბლოკის კონტეინერს, რადგან პირველადი ბლოკის ელემენტი იკავებს ეკრანის მთელ სიგანეს და იქცევა ისე, როგორც ძირითადი ელემენტი ბლოკის ტოლია. როგორც კი არის პატარა მოქნილი კონტეინერები, მაშინ სუნი ხდება ყველაზე მნიშვნელოვანი ელემენტი, რომელიც ზრუნავს ელემენტების მყიფეობაზე.
შემტევ კონდახში ჩვენ შეგვიძლია დავინახოთ ხილვადობა, ამიტომ წინა კონდახი არ არის ნაჩვენები, ამ მიზეზების გამო, რომ ბავშვის მოქნილი ელემენტები ცალსახად არ ადგენენ გასადიდებელ ამოცანებს და შეგახსენებთ, ჩვენი კონტეინერი, იქნება ეს რიგი. -მწკრივი, ან ბლოკი, თუმცა ნასესხები b ეკრანის მთელ სიგანეზე.
ვისი კონდახი გაშლილი ორიპატარა ი ორიბლოკის მოქნილი კონტეინერები, მათ შუაში მოთავსებული იყო სამყაროს მიხედვით ხუთიელემენტები
დახმარებისთვის მსგავსი განლაგების სწრაფად გენერირება ემეტჩაწერეთ რედაქტორის ნაბიჯი: div.inline-flex * 2> div * 5 + Tab, და იგივე მხოლოდ ქვედა კლასის div.flex * 2> div * 5 + Tab.
შეხედეთ ჩვენი აპლიკაციის შედეგს, თქვენთვის უკვე ნათელია განსხვავება პატარა და ბლოკის მოქნილ კონტეინერებს შორის. მწკრივის კონტეინერი მოძრაობს ბავშვის ელემენტის მსგავსად და იკავებს სიგანეს, მას სჭირდება მხოლოდ ერთი ბავშვის მოქნილი ელემენტი, ხოლო ბლოკის მოქნილი კონტეინერი, რომელიც არ აინტერესებს მისი ბავშვის მოქნილი ელემენტის ზომას, იკავებს ეკრანის მთელ სიგანეს.
ჩვენი დუნდულების შედეგი:
მალ. 205 სიცოცხლისუნარიანობის კონდახით inline-flex კონტეინერები მოქნილი კონტეინერებში.
პირდაპირ? რომელი პირდაპირ?
პირდაპირ მოქნილი ელემენტები იქმნება ორი ღერძის პოზიციის მიხედვით: თავის ღერძიკონტეინერი ფლექსი და იოგა განივი ღერძი, იაკა ზავჟდი რაზტაშოვანია თავთან პერპენდიკულარული. სათაური მიმართულებით ltr (გლობალური HTML ატრიბუტი dir, როგორიცაა CSS მიმართულების ძალა ltr მნიშვნელობებით) ბრუნავს მარჯვნივ, ხოლო განივი - ზემოდან ქვემოთ (მნიშვნელობა არის საკეტის უკან), rtl მნიშვნელობისთვის ის ასახულია.
გასწორების-შიგთავსის სიმძლავრე ადგენს მწკრივის ხილვადობის ტიპს მოქნილი კონტეინერის შუაში განივი ღერძის გასწვრივ, როდესაც თავისუფალი სივრცე ჩანს.
zastosovuetsya სანამ A: Flex კონტეინერი.
მნიშვნელობა საკეტისთვის: დაჭიმეთ.
Flex-start რიგები იდება განივი ღერძის კუბზე. კანის შემტევი რიგი წინას პარალელურად მიდის. flex-end რიგები ჩამოყალიბებულია განივი ღერძის ბოლოდან დაწყებული. კანი წინ არის რიგი, რომელიც მიდის ნაბიჯთან ერთად. ცენტრი რიგები გაშლილია კონტეინერის ცენტრში. ინტერვალი რიგები თანაბრად არის დაშორებული კონტეინერებში და დგანან მათ შორის თანაბრად. space-around მწკრივები თანაბრად იყოფა ისე, რომ სივრცე ორ სუციდურ მწკრივს შორის იყოს იგივე. ცარიელი სივრცე პირველი რიგის წინ და დარჩენილი რიგის შემდეგ სრულდება სასამართლოს ორ მწკრივს შორის არსებული სივრცის ნახევარით. სივრცე თანაბრად რიგები თანაბრად არის დაშორებული. ცარიელი სივრცე პირველი რიგის წინ და დარჩენილი მწკრივის შემდეგ არის იგივე სიგანე, როგორც სხვა რიგები. გაჭიმეთ რიგები იჭიმება თანაბრად, ავსებს სივრცეს.
align-content თვისება ასწორებს flex კონტეინერის ხაზებს flex კონტეინერში, როდესაც არის დამატებითი სივრცე ჯვარედინი ღერძზე, ისევე, როგორც justify-content ასწორებს ცალკეულ ელემენტებს მთავარ ღერძში. გაითვალისწინეთ, რომ ეს თვისება არ მოქმედებს ერთი ხაზის მოქნილ კონტეინერზე. მნიშვნელობებს აქვთ შემდეგი მნიშვნელობა:
შენიშვნა: მხოლოდ მრავალხაზიან მოქნილ კონტეინერებს აქვს თავისუფალი ადგილი ჯვარედინი ღერძზე ხაზების გასწორებისთვის, რადგან ერთხაზიანი მოქნილობის კონტეინერში ერთადერთი ხაზი ავტომატურად იჭიმება სივრცის შესავსებად.
Ვრცელდება: Flex კონტეინერები.
საწყისი: დაჭიმეთ.
Flex-start ხაზები შეფუთულია flex კონტეინერის დასაწყისამდე. Flex კონტეინერის პირველი ხაზის ჯვარედინი დაწყების კიდე მოთავსებულია ფლექსის კონტეინერის ჯვარედინი დაწყების კიდესთან და ყოველი მომდევნო ხაზი მოთავსებულია წინა ხაზზე. flex-end ხაზები შეფუთულია flex კონტეინერის ბოლოსკენ. ბოლო ხაზის ჯვარედინი კიდე მოთავსებულია მოქნილი კონტეინერის ჯვარედინი კიდესთან, ხოლო ყოველი წინა ხაზი მოთავსებულია მომდევნო ხაზთან. ცენტრის ხაზები შეფუთულია მოქნილი კონტეინერის ცენტრისკენ. ფლექს კონტეინერში ხაზები მოთავსებულია ერთმანეთზე და გასწორებულია მოქნილი კონტეინერის ცენტრში, თანაბარი სივრცით ფლექსი კონტეინერის ჯვარედინი დაწყების შიგთავსის კიდესა და მოქნილი კონტეინერის პირველ ხაზს შორის და მოქნილი კონტეინერის ჯვარედინი შიგთავსის კიდე და ფლექსი კონტეინერის ბოლო ხაზი. (თუ დარჩენილი თავისუფალი ადგილი უარყოფითია, ხაზები ორივე მიმართულებით თანაბრად გადაედინება.) ხაზებს შორის სივრცე თანაბრად ნაწილდება მოქნილ კონტეინერში. თუ დარჩენილი თავისუფალი ადგილი უარყოფითია, ეს მნიშვნელობა იდენტურია flex-start-ისა. წინააღმდეგ შემთხვევაში, ფლექსის კონტეინერში პირველი ხაზის ჯვარედინი დაწყების კიდე მოთავსებულია ფლექსი კონტეინერის ჯვარედინი დაწყების შიგთავსის კიდესთან, ფლექსის კონტეინერში ბოლო ხაზის ჯვარედინი კიდე მოთავსებულია ჯვარედინი კონტეინერთან. მოქნილი კონტეინერის ბოლო შიგთავსის კიდე და მოქნილი კონტეინერში დარჩენილი ხაზები ნაწილდება ისე, რომ მანძილი ნებისმიერ ორ მიმდებარე ხაზს შორის ერთნაირი იყოს. სივრცის ირგვლივ ხაზები თანაბრად ნაწილდება მოქნილ კონტეინერში, ორივე ბოლოზე ნახევარი ზომის სივრცეებით. თუ დარჩენილი თავისუფალი ადგილი უარყოფითია, ეს მნიშვნელობა ცენტრის იდენტურია. წინააღმდეგ შემთხვევაში, მოქნილი კონტეინერში ხაზები ნაწილდება ისე, რომ მანძილი ნებისმიერ ორ მიმდებარე ხაზს შორის არის იგივე, ხოლო მანძილი პირველ/ბოლო ხაზებსა და მოქნილი კონტეინერის კიდეებს შორის არის სიდიდის ნახევარი მანძილი მოქნილ ხაზებს შორის. სივრცე თანაბრად ხაზები თანაბრად ნაწილდება მოქნილ კონტეინერში. თუ დარჩენილი თავისუფალი ადგილი უარყოფითია, ეს მნიშვნელობა ცენტრის იდენტურია. წინააღმდეგ შემთხვევაში, მოქნილი კონტეინერში ხაზები გადანაწილებულია ისე, რომ მანძილი ყველა მოქნილ ხაზს შორის იყოს იგივე. მონაკვეთის ხაზები იჭიმება დარჩენილი სივრცის დასაკავებლად. თუ დარჩენილი თავისუფალი ადგილი უარყოფითია, ეს მნიშვნელობა იდენტურია flex-start-ისა. წინააღმდეგ შემთხვევაში, თავისუფალი სივრცე თანაბრად იყოფა ყველა ხაზს შორის, იზრდება მათი ჯვრის ზომა.
css flexbox (მოქნილი ყუთის განლაგების მოდული)- მოქნილი კონტეინერის განლაგების მოდული - არის ელემენტების მოწყობის გზა, რომელიც დაფუძნებულია ღერძის იდეაზე.
Flexbox გროვდება მოქნილი კონტეინერიі მოქნილი ელემენტები (მოქნილი ელემენტები). Gnuchki ელემენტები შეიძლება vibudovuvatisya ზედიზედ ან stovpchik, და თავისუფალი სივრცე შეიძლება გაფართოვდეს მათ შორის სხვადასხვა გზით.
flexbox მოდული საშუალებას გაძლევთ შეცვალოთ შემდეგი დავალება:
- დაატრიალეთ ელემენტები ოთხი სწორი ხაზიდან ერთ-ერთში: გაბრაზებული მარჯვნივ, მარჯვნივ მარჯვნივ, მხეცი ქვემოთ ან ბორცვის ქვემოთ.
- შეცვალეთ ელემენტების ჩვენების თანმიმდევრობა.
- ავტომატურად მიუთითეთ ელემენტები ისე, რომ სუნი მოერგოს ხელმისაწვდომ სივრცეს.
- მოაგვარეთ პრობლემა ჰორიზონტალური და ვერტიკალური ცენტრით.
- შეფუთეთ ელემენტები კონტეინერის შუაში ყოველგვარი გადახურვის გარეშე.
- შექმენით იმავე სიმაღლის სვეტები.
- დააჭირეთ გვერდის ბოლოში.
Flexbox ავითარებს კონკრეტულ ამოცანებს - ერთგანზომილებიანი განლაგების შექმნას, მაგალითად, ნავიგაციის პანელებს, რათა მოქნილი ელემენტები მხოლოდ ერთ-ერთი ღერძის გასწვრივ განთავსდეს.
თქვენ შეგიძლიათ წაიკითხოთ მოდულის ძაფების პრობლემების სია და მათზე ბრაუზერის გადაწყვეტილებები ფილიპ უოლტონის სტატიაში.
რა არის flexbox
მხარდაჭერა ბრაუზერების მიერ
IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -მოზ-
Chrome: 29.0, 21.0 -ვებ ნაკრები-
Safari: 6.1 -ვებ ნაკრები-
ოპერა: 12.1 -ვებ ნაკრები-
iOS Safari: 7.0 -ვებ ნაკრები-
Opera Mini: 8
Android ბრაუზერი: 4.4, 4.1 -ვებ ნაკრები-
Chrome Android-ისთვის: 44
1. ძირითადი ცნებები
მალ. 1. flexbox მოდელი Flexbox მოდულის აღწერისთვის არის ტერმინების ერთი ნაკრები. Flex-flow და ჩაწერის რეჟიმის მნიშვნელობები განსაზღვრავს ამ ტერმინების სიგანეს ფიზიკური მიმართულებების მიხედვით: ზედა / მარჯვნივ / ქვედა / მარცხნივ, ღერძები: ვერტიკალური / ჰორიზონტალური და ზომები: სიგანე / სიმაღლე.
მთავარი ღერძი- ყველა, უზდოვჟ, როგორ არის ასახული flex-ელემენტები. ვონი გადაჭიმულია მთავარ სამყაროში.
მთავარი დასაწყისი და მთავარი დასასრული- ხაზები, რომლებიც განსაზღვრავენ მოქნილი კონტეინერის ზედა და ქვედა გვერდებს, სადაც განლაგებულია მოქნილი ელემენტები (დაწყებული ძირითადი დასაწყისიდან და პირდაპირ მთავარ ბოლომდე).
ძირითადი ზომა (ძირითადი ზომა) - flex-container ან flex-element-ის სიგანე ან სიმაღლე, იმ თვალსაზრისით, რომ ისინი გვხვდება მთავარ ფანჯარაში, განსაზღვრავს flex-container ან flex-element-ის ძირითად ზომას.
ჯვარი ღერძი- ყველა, მთავარი ღერძის პერპენდიკულარულად. ვონი გადაჭიმულია განივი vimіrі.
ჯვარედინი დასაწყისი და ჯვარი დასასრული- ხაზები, რომლებიც გამოიყენება კუბის და განივი ღერძის ბოლო მხარის აღსანიშნავად, სადაც მოქნილი ელემენტებია განლაგებული.
ჯვრის ზომა (ჯვრის ზომა)- მოქნილი კონტეინერის ან ფლექს-ელემენტების სიგანე ან სიმაღლე, განივი განზომილებაში მყოფი ფაქტის დაცემისას є їх განივი განზომილებაში.
მალ. 2. მწკრივის და სვეტის რეჟიმი 2. Flex კონტეინერი
მოქნილი კონტეინერი ათავსებს იოგას ახალ მოქნილ ფორმატირების კონტექსტს. Flex კონტეინერი არ არის ბლოკის კონტეინერი, ამიტომ ბავშვის ელემენტებს არ აქვთ იგივე CSS ავტორიტეტი, როგორც float, წმინდა, ვერტიკალური გასწორება. ასევე, flex-container-ზე არ უნდა დაზარალდეს სვეტი-* ავტორიტეტი, რომელიც ქმნის სვეტებს ტექსტში და ფსევდოელემენტებს :: პირველი ხაზი და :: პირველი ასო.
flexbox- განლაგების მოდელი დაკავშირებულია მშობელი html ელემენტის CSS-დომინანტური დისპლეის პირველად მნიშვნელობებთან, რომელიც შურისძიებას იღებს მის შვილობილ ბლოკებზე. დამატებითი მოდელის ელემენტების გასაკონტროლებლად აუცილებელია ეკრანის სიმძლავრის დაყენება შემდეგი თანმიმდევრობით:
Flex-container (/ * ქმნის ხაზის დონის flex კონტეინერს * / ჩვენება: -webkit-flex; ჩვენება: flex;) .flex-container (/ * ქმნის ხაზის დონის flex კონტეინერს * / ჩვენება: -webkit-inline- flex; ჩვენება: inline-flex;)
კანის სიმძლავრის მოცემული მნიშვნელობის დაყენების შემდეგ, ბავშვის ელემენტი ავტომატურად იქცევა მოქნილ ელემენტად, რომელიც ტრიალებს ერთ რიგში (მთავარი ღერძი). ნებისმიერი ბლოკის და პატარა ბავშვის ელემენტების შემთხვევაში, იგივე უნდა გაკეთდეს ისე, რომ ბლოკების სიგანე ტოლი იყოს მათი სიგანეზე, ელემენტის შიდა ველებისა და ჩარჩოების გაუმჯობესების ნაცვლად.
მალ. 3. ელემენტების რედაქტირება flexbox მოდელში როგორც batkivsky ბლოკი ტექსტის ან გამოსახულების გარეშე შურისძიების მიზნით, სუნი იქცევა ანონიმურ მოქნილ ელემენტებად. ტექსტი გასწორებულია კონტეინერის ბლოკის ზედა კიდეზე და გამოსახულების სიმაღლე ხდება ბლოკის სიმაღლის ტოლი, ამიტომ იგი დეფორმირდება.
3. მოქნილი ელემენტები
Flex-ელემენტები - ბლოკები, რომლებიც წარმოადგენენ ფლექს-კონტეინერის ნაცვლად ქვაბში. Flex კონტეინერი აყალიბებს ახალ ფორმატირების კონტექსტს საკუთარი გამოყენებისთვის, რომელიც მოიცავს შემდეგ მახასიათებლებს:
- მოქნილი ელემენტებისთვის, მათი ეკრანის სიმძლავრის მნიშვნელობები დაბლოკილია. ჩვენების მნიშვნელობა: inline-block; i ჩვენება: ცხრილის უჯრედი; ჩამოთვლილია ჩვენებაზე: ბლოკი; .
- ელემენტებს შორის ცარიელი სივრცე ცნობილია, რადგან არაფერი ხდება საკუთარი მოქნილობის ელემენტი, უბრალოდ გადაიყვანეთ დამწვარი ელემენტთაშორისი ტექსტი ანონიმურ მოქნილ ელემენტად. ანონიმური flex ელემენტის ნაცვლად, შეუძლებელია მორგებული სტილის დაყენება, წინააღმდეგ შემთხვევაში ის მემკვიდრეობით მიიღებს (მაგალითად, შრიფტის პარამეტრებს) flex კონტეინერის ტიპს.
- აბსოლუტურად განლაგებული მოქნილი ელემენტი არ მონაწილეობს მოქნილი განლაგების განლაგებაში.
- ცალკეული მოქნილი ელემენტების მინდვრები არ იშლება.
- მარჟა და ბალიშის პროცენტები გამოითვლება მათი ბლოკის შიდა ზომის მიხედვით.
- ზღვარი: ავტო; გაფართოება, მოპირკეთება dotkovy სივრცეში vіdpovіdny vimіrі. Їx შეიძლება გადაუგრიხეს summіzhnyh flex-ელემენტების ჩვენების ან დახატვისთვის.
- მოქნილი ელემენტების ავტომატური მინიმალური ზომა ჩაკეტვის შემდეგ და იოგას მინიმალური ზომა ადგილზე, ამიტომ მინ-სიგანე: ავტო; . გადახვევის მქონე კონტეინერებისთვის, ავტომატური მინიმალური გაფართოება უნდა ჟღერდეს ნულამდე.
4. ფლექს-ელემენტების ჩვენების რიგი და ორიენტაცია
მოქნილი კონტეინერის ნაცვლად, შეგიძლიათ განათავსოთ იგი ნებისმიერი მიმართულებით და ნებისმიერი თანმიმდევრობით (კონტეინერის შუაში მოქნილი ელემენტების ხელახალი დალაგება მხოლოდ ვიზუალურ რენდერს ამატებს).
4.1. თავის ღერძი სწორი: მოქნილი მიმართულება
უფლებამოსილება ენიჭება ფლექს-კონტეინერს. უშუალოდ მართავს მთავარ ღერძს, რომელიც მოქნილი ელემენტების დაწყობის საშუალებას იძლევა ნაკადის ჩაწერის რეჟიმის შესაბამისად. ჩი არ იკლებს.
| მოქნილი მიმართულება | |
|---|---|
| ღირებულება: | |
| რიგი | მნიშვნელობა ჩაკეტვისთვის, zlіva მარჯვნივ (in rtl მარჯვნივ nіvo). Flex-ელემენტები მოთავსებულია ზედიზედ. სათავე ღერძის კუბი (მთავარი-დასაწყისი) და ბოლო (მთავარი-ბოლო) მიმართულია მწკრივის ღერძის ღერძის (შიდა ღერძის) კუბამდე (inline-start) და ბოლოს (inline-end). |
| რიგის უკან | პირდაპირ მარჯვნივ (რტლ-ში მარჯვნივ). Flex-ელემენტები ზედიზედ განლაგებულია კონტეინერის მარჯვენა კიდის მიხედვით (რტლ - მარცხნივ). |
| სვეტი | პირდაპირ ურჩხულისკენ. Flex ელემენტები მოთავსებულია სვეტში. |
| სვეტის საპირისპირო | სვეტი ელემენტებით საპირისპირო თანმიმდევრობით, ქვემოდან ზემოდან. |
| საწყისი | |
| მემკვიდრეობით | |
მალ. 4. მოქნილობის მიმართულების ძალა მარცხნიდან მარჯვნივ გადაადგილებისთვის სინტაქსი
Flex-container (ჩვენება: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse;)
4.2. Flex wrapper wrapper კონტროლი: flex-wrap
სიმძლავრე განსაზღვრავს, ფლექს-კონტეინერი იქნება ერთ რიგიანი თუ მრავალმწკრივი და ასევე პირდაპირ ადგენს განივი ღერძს ისე, რომ პირდაპირ მოქცეული კონტეინერის ახალი ხაზები დაიდება.
საკეტების უკან მოქნილი ელემენტები ჯდება ერთ რიგში, მთავარ ღერძზე. ხელახლა შეფუთვისას, სუნი გასცდება მოქნილი კონტეინერის საზღვრებს. ძალა არ იკლებს.
მალ. 5. ბაგატორიუმის მართვა LTR-მოძრაობებისთვის მოქნილი გადახვევის დამატებითი სიმძლავრისთვის სინტაქსი
Flex-container (ჩვენება: -webkit-flex; -webkit-flex-wrap: wrap; ჩვენება: flex; flex-wrap: wrap;)
4.3. სწორი ხაზის მოკლე აღნიშვნა და ბაგატორული მწკრივი: flex-flow
სიმძლავრე საშუალებას გაძლევთ დანიშნოთ თავისა და განივი ღერძების განლაგება, აგრეთვე მოქნილი ელემენტების გადატანის შესაძლებლობა, საჭიროების შემთხვევაში, სპრატ რიგებში. ეს არის სტენოგრაფიული ჩანაწერი მოქნილობის მიმართულების და მოქნილი გადახვევის ძალის შესახებ. ღირებულება flex-flow: row nowrap; . ძალა არ იკლებს.
სინტაქსი
Flex-container (ჩვენება: -webkit-flex; -webkit-flex-flow: row wrap; ჩვენება: flex; flex-flow: row wrap;)
4.4. მოქნილი ელემენტების ჩვენების თანმიმდევრობაა: შეკვეთა
სიმძლავრე განსაზღვრავს ფლექსის ელემენტების ჩვენების და დალაგების თანმიმდევრობას ფლექსი კონტეინერის შუაში. Zastosovuetsya to flex-ელემენტები. ძალა არ იკლებს.
უკანა მხარეს, ყველა flex ნივთის შეკვეთა შესაძლებელია: 0; . მითითებისას vіd -1-ის მნიშვნელობა vіn ელემენტისთვის გადადის ტერმინის cob-ზე, მნიშვნელობა 1 - ბოლომდე. თუ რამდენიმე flex-ელემენტს შეიძლება ჰქონდეს იგივე შეკვეთის მნიშვნელობა, ისინი დალაგდება იმავე თანმიმდევრობით.
სინტაქსი
Flex-container (ჩვენება: -webkit-flex; ჩვენება: flex;) .flex-item (-webkit-order: 1; order: 1;) 
მალ. 6. ფლექს-ელემენტების ჩვენების რიგი
5. მოქნილობა მოქნილი ნივთები
მოქნილი განლაგების პირველადი ასპექტია მოქნილი ელემენტის „დაკეცვა“ მისი სიგანე/სიმაღლის შეცვლა (დამოკიდებულია იმაზე, თუ რომელი ზომაა მთავარ ღერძზე), რათა შეინახოს მთელი მეხსიერება, რომელიც ხელმისაწვდომია მთავარ სამყაროში. Tse ბრძოლა დამატებითი ძალა მოქნილი. მოქნილი კონტეინერი აფართოებს სივრცეს თავის შვილობილ ელემენტებს შორის (მოქნილი ზრდის ფაქტორის პროპორციულად) კონტეინერის შესავსებად, ან იკუმშება მათ (მოქნილობის შემცირების ფაქტორის პროპორციულად) ხელახალი გადინების თავიდან ასაცილებლად.
მოქნილი ელემენტი კვლავ იქნება "რბილი", ასე რომ, როგორც flex-grow, ასევე flex-shrink მნიშვნელობები დაყენებულია ნულზე, ხოლო "ბუნდოვანი" წინააღმდეგ შემთხვევაში.
5.1. ველური ვარდების ლიდერი ერთ ძალაშია: მოქნილი
დომინირება არის სტენოგრაფიული ჩანაწერი flex-grow, flex-shrink და flex-basis დომინირების შესახებ. დაბლოკვის მნიშვნელობები: flex: 0 1 ავტო; . შეიძლება ითქვას, როგორც ერთი, ასე რომ, ავტორიტეტის სამივე მნიშვნელობა. ძალა არ იკლებს.
სინტაქსი
Flex-container (ჩვენება: -webkit-flex; ეკრანი: flex;) .flex-item (-webkit-flex 3 1 100px; -ms-flex 3 1 100px; flex 3 1 100px;)
5.2. ზრდის კოეფიციენტი: flex-grow
სიმძლავრე განსაზღვრავს ერთი ფლექს-ელემენტის ზრდის კოეფიციენტს სხვა ფლექს-ელემენტებთან ერთად მოქნილ კონტეინერში დადებითი თავისუფალი სივრცის გავრცელებისას. თუ ზედიზედ flex-grow flex ელემენტების ჯამი 1-ზე ნაკლებია, სუნი იკავებს თავისუფალი სივრცის 100%-ზე ნაკლებს. ძალა არ იკლებს.
მალ. 7. ნავიგაციის პანელში თავისუფალი სივრცის მართვა flex-grow-ის დახმარებით სინტაქსი
Flex-container (ჩვენება: -webkit-flex; ჩვენება: flex;) .flex-item (-webkit-flex-grow: 3; flex-grow: 3;)
5.3. შემცირების ფაქტორი: მოქნილობა-შეკუმშვა
სიმძლავრე მიუთითებს მოქნილი ელემენტის შეკუმშვის კოეფიციენტზე, როგორც სხვა მოქნილი ელემენტები, უარყოფითი თავისუფალი სივრცის გავრცელებისას. გაამრავლეთ ბაზის გაფართოების flex-ბაზისით. ნეგატიური სივრცე ფართოვდება იმის პროპორციულად, თუ რამდენად მცირეა ელემენტის შეკუმშვა, ასე რომ, მაგალითად, პატარა მოქნილი ელემენტი არ იცვლება ნულამდე, სანამ არ შეიცვლება უფრო დიდი ზომის მოქნილი ელემენტი. ძალა არ იკლებს.
მალ. 8. ჟღერადობის მოქნილი ელემენტები ზედიზედ სინტაქსი
Flex-container (ჩვენება: -webkit-flex; ჩვენება: flex;) .flex-item (-webkit-flex-shrink: 3; flex-shrink: 3;)
5.4. ძირითადი ზომა: flex-based
სიმძლავრე ადგენს მოქნილი ელემენტის კობის ძირითად გაფართოებას თავისუფალი სივრცის დაყოფამდე, მოქნილობის კოეფიციენტებამდე. ყველა მნიშვნელობისთვის, ავტო და შინაარსის გარდა, საბაზისო მოქნილი ზომა დაყენებულია ისევე, როგორც სიგანე ჰორიზონტალური ჩაწერის რეჟიმებში. პროცენტული მნიშვნელობები დაყენებულია flex-container-ის ზომის მიხედვით და თუ არა ამოცანების ზომა, Flex-basis-ის მნიშვნელობები დაყენებულია იმავე ზომაზე. ჩი არ იკლებს.
სინტაქსი
Flex-container (დისპლეი: -webkit-flex; ეკრანი: flex;) .flex-item (-webkit-flex-basis: 100px; flex-basis: 100px;)
6. აღდგომა
6.1. დათვალიერება მთავარ ღერძზე: დასაბუთება-შინაარსი
ფლექს-ელემენტების ჩვენების ძალა მოქნილი კონტეინერის მთავარი ღერძის გასწვრივ, თავისუფალი სივრცის მოწყობა, რომელიც არ არის დაკავებული ფლექს-ელემენტებით. როდესაც ელემენტი გარდაიქმნება flex კონტეინერში, flex ელემენტები ჯგუფდება ერთდროულად (რადგან მათ არ აქვთ მათთვის დაყენებული ზღვრის ველი). ზრდა ემატება მარჟის და flex-grow ღირებულების გაფართოების შემდეგ. შესაძლებელია ელემენტები იყოს null for flex-grow ან margin: auto; , დენის გაჟონვა არ მოხდება. ძალა არ იკლებს.
| ღირებულება: | |
| მოქნილი დაწყება | მნიშვნელობა zamovchuvannyam. Flex-ელემენტები მოთავსებულია სწორ ხაზში, სადაც ისინი მიდიან ფლექს-კონტეინერის კობის ხაზში. |
| მოქნილი დასასრული | Flex-ელემენტები მოთავსებულია სწორ ხაზზე, სადაც ისინი მიდიან ფლექს-კონტეინერის ბოლო ხაზში. |
| ცენტრი | Flex ელემენტები გასწორებულია flex კონტეინერის ცენტრში. |
| შორის სივრცე | Flex-ელემენტები თანაბრად ნაწილდება ხაზის გასწვრივ. პირველი მოქნილი ელემენტი მოთავსებულია კუბის ხაზის კიდესთან, დარჩენილი მოქნილი ელემენტი ბოლო ხაზის კიდესთან, ხოლო ფლექს-ელემენტის ხაზები ვარდების ხაზზე იკეცება ისე, რომ თქვენ შეგიძლიათ დადგეს ჩვენ ორს შორის. ეს არის უარყოფითი სივრცე, ან არის ზედიზედ მხოლოდ ერთი flex-ელემენტი, მნიშვნელობა იდენტურია flex-start პარამეტრის. |
| სივრცე გარშემო | Flex-ელემენტები ხაზზე იყოფა ისე, რომ სხვაობა ორ მთლიან ფლექს-ელემენტს შორის იყო იგივე, ხოლო სხვაობა პირველ / დარჩენილ მოქნილობის ელემენტებსა და ფლექს-კონტეინერის კიდეებს შორის გახდა სხვაობის ნახევარი ფლექსის შორის. - ელემენტები. |
| საწყისი | დააყენეთ ძალაუფლების მნიშვნელობა ციხის მნიშვნელობაზე. |
| მემკვიდრეობით | ძალაუფლების მნიშვნელობის დაცემა ბატკივის ელემენტში. |
მალ. 9. Virіvnyuvannya elementіv და rozpodіl volnogo ექსპანსი ძალაუფლების დასახმარებლად დასაბუთება-შიგთავსი სინტაქსი
Flex-container (ჩვენება: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start;)
6.2. გასწორება განივი ღერძის გასწვრივ: გასწორება-პუნქტები და გასწორება-თვითონ
Flex-ელემენტების ნახვა შესაძლებელია Flex-კონტეინერის ნაკადის რიგის განივი ღერძის გასწვრივ. align-item ადგენს გასწორებას ყველა ელემენტისთვის flex კონტეინერში, მათ შორის ანონიმური flex ელემენტებისთვის. align-self საშუალებას გაძლევთ გაასწოროთ გასწორება მოქნილი ელემენტებისთვის. მიუხედავად იმისა, რომ მოქნილი ელემენტის ჯვარედინი მინდვრები არ შეიძლება დაყენდეს ავტომატურზე, თვით გასწორება ვერაფერს ვერ გააკეთებს.
6.2.1. ნივთების გასწორება
სიმძლავრე აჭარბებს მოქნილობის ელემენტებს, მათ შორის ანონიმურ მოქნილობის ელემენტებს განივი ღერძის გასწვრივ. ჩი არ იკლებს.
| ღირებულება: | |
| მოქნილი დაწყება | |
| მოქნილი დასასრული | |
| ცენტრი | |
| საბაზისო | ყველა მოქნილი ელემენტის ძირითადი ხაზები, რომლებიც მონაწილეობენ განვითარებაში, თავიდან აცილებულია. |
| გაჭიმვა | |
| საწყისი | დააყენეთ ძალაუფლების მნიშვნელობა ციხის მნიშვნელობაზე. |
| მემკვიდრეობით | ძალაუფლების მნიშვნელობის დაცემა ბატკივის ელემენტში. |
მალ. 10. ელემენტების დათვალიერება კონტეინერებში ვერტიკალურად სინტაქსი
Flex-container (ჩვენება: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start;)
6.2.2. გასწორება-თვითონ
სიმძლავრე მოცემულია მოცემული ფლექს-ელემენტის გადასაღებად ფლექს-კონტეინერის სიმაღლის მიხედვით. გასწორება-პუნქტების ამოცანების გასწორება. ჩი არ იკლებს.
| ღირებულება: | |
| ავტო | მნიშვნელობა zamovchuvannyam. flex ელემენტს აქვს align-item-ის მნიშვნელობა, რომელიც მინიჭებულია flex-ის კონტეინერის align-item ძალაზე. |
| მოქნილი დაწყება | ფლექს-ელემენტის ზედა კიდე უნდა განთავსდეს ფლექს-ხაზთან ახლოს ჩარჩოს საზღვარიელემენტი) განივი ღერძის ყურის გავლით. |
| მოქნილი დასასრული | ფლექს-ელემენტის ქვედა კიდე უნდა განთავსდეს მოქნილობის ხაზთან ახლოს (წინააღმდეგ შემთხვევაში, ზევით, ზღვრისა და სასაზღვრო ელემენტის ჩარჩოების მოცემული ველების რეგულირებით), რომელიც უნდა გაიაროს ბოლოში. განივი ღერძი. |
| ცენტრი | მოქნილი ელემენტის ველები ორიენტირებულია განივი ღერძის გასწვრივ მოქნილობის ხაზის საზღვრებში. |
| საბაზისო | Flex ელემენტი ნაჩვენებია საბაზისო ხაზის გასწვრივ. |
| გაჭიმვა | თუ მოქნილი ელემენტის სიგანე გამოითვლება როგორც ავტო და ხანდახან ზღვრის სიგანე არ არის ავტოს ტოლი, ელემენტი გაფართოვდება. მნიშვნელობა zamovchuvannyam. |
| საწყისი | დააყენეთ ძალაუფლების მნიშვნელობა ციხის მნიშვნელობაზე. |
| მემკვიდრეობით | ძალაუფლების მნიშვნელობის დაცემა ბატკივის ელემენტში. |
მალ. 11. შემდეგი მოქნილი ელემენტების შესწავლა სინტაქსი
Flex-container (ჩვენება: -webkit-flex; ჩვენება: flex;) .flex-item (-webkit-align-self: ცენტრი; align-self: ცენტრში;)
6.3. რიგების გასწორება flex კონტეინერში: align-content
ვიბრაციული რიგების ძალა მოქნილ კონტეინერში დამატებითი სივრცის არსებობით განივი ღერძზე, ისევე როგორც მთავარ ღერძზე ოთხი ელემენტის ჩვენება დასაბუთებული შინაარსის დამატებითი სიმძლავრისთვის. სიმძლავრე არ მიედინება ერთ რიგიან მოქნილ კონტეინერში. ჩი არ იკლებს.
| ღირებულება: | |
| მოქნილი დაწყება | რიგები დაწყობილია პირდაპირ ფლექსის კონტეინერის კუბამდე. პირველი რიგის კიდე მოთავსებულია უკან ფლექს-კონტეინერის კიდეზე, კანი არის საფეხური - უკან წინა რიგისკენ. |
| მოქნილი დასასრული | რიგები დაწყობილია პირდაპირ ფლექს-კონტეინერის ბოლომდე. დარჩენილი რიგის კიდე მოთავსებულია ფლექს-კონტეინერის კიდესთან, კანი წინ - ყველაზე შორეულ მწკრივთან ახლოს. |
| ცენტრი | რიგები დაწყობილია პირდაპირ მოქნილი კონტეინერის ცენტრში. შეკერვის რიგები vpritul ერთიდან ერთზე და გასწორებულია მოქნილი კონტეინერის ცენტრში სწორი ხაზით კობის კიდეს შორის მოქნილი კონტეინერის ადგილზე და პირველ რიგს შორის და ბოლო კიდეს შორის მოქნილი კონტეინერის ადგილზე და დარჩენილი რიგი. |
| შორის სივრცე | რიგები თანაბრად არის განლაგებული მოქნილი კონტეინერში. მიუხედავად იმისა, რომ სივრცე უარყოფითია, წინააღმდეგ შემთხვევაში flex კონტეინერში არის მხოლოდ ერთი flex ხაზი, მნიშვნელობა იდენტურია flex-start-ისა. მეორე მიმართულებით, პირველი რიგის კიდე მოთავსებულია კობის კიდესთან ახლოს ფლექსის კონტეინერის ადგილას, დარჩენილი რიგის კიდე მოთავსებულია ბოლო კიდესთან ახლოს ფლექსის კონტეინერის ადგილზე. რეშთა რიგები ისე გაიყო, რომ ორ სასამართლო რიგს შორის დავდგეთ. |
| სივრცე გარშემო | რიგები თანაბრად არის განლაგებული მოქნილ კონტეინერში, ორივე ბოლოზე ნახევრად გადაკვეთით. მიუხედავად იმისა, რომ სივრცე უარყოფითია, მნიშვნელობა ცენტის ცენტრის იდენტურია. სხვაგვარად, რიგები იყოფა ისე, რომ თუ ორი მწკრივი ერთნაირი იყო, რიგები პირველ/დარჩენილ რიგებსა და კიდეებს შორის მოქნილი კონტეინერის ნაცვლად ხდება რიგების ნახევარი. |
| გაჭიმვა | მნიშვნელობა zamovchuvannyam. მოქნილი ელემენტების რიგები თანაბრად არის გადაჭიმული და ფარავს მთელ ხელმისაწვდომ ადგილს. რადგან flex-start უარყოფითია, მნიშვნელობა იდენტურია flex-start-ისა. სხვა მიმართულებით, თავისუფალი სივრცე ჩვენ შორის თანაბრად გაიყოფა რიგებად, უფრო დიდი ვიდრე განივი სივრცე. |
| საწყისი | დააყენეთ ძალაუფლების მნიშვნელობა ციხის მნიშვნელობაზე. |
| მემკვიდრეობით | ძალაუფლების მნიშვნელობის დაცემა ბატკივის ელემენტში. |
მალ. 12. მოქნილი ელემენტების ვარიანტული ვარიაცია სინტაქსი
მოქნილი კონტეინერი (ჩვენება: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end სიმაღლე: 100px;)