Flexbox გენერატორი
შექმენით flex კონტეინერი და მისი ელემენტები ვიზუალური მართვის საშუალებით, დააკვირდით ცვლილებებს რეალურ დროში და დააკოპირეთ CSS ერთი დაწკაპუნებით.
თქვენი განლაგება იქმნება პირდაპირ თქვენს ბრაუზერში. თქვენ მიერ მითითებული მონაცემები BroBroGo-ზე არ იტვირთება.
ხშირად დასმული კითხვები
რა განსხვავებაა justify-content-სა და align-items-ს შორის?
Justify-content ანაწილებს ელემენტებს მთავარი ღერძის გასწვრივ — იმ მიმართულებით, საითაც მიედინება სტრიქონი ან სვეტი — ხოლო align-items განათავსებს მათ მეორეხარისხოვანი ღერძის გასწვრივ. თუ მიმართულებას სტრიქონიდან სვეტზე გადართავთ, ეს ორი ღერძი ადგილს შეიცვლის, ამიტომ justify-content დაიწყებს მუშაობას ზემოდან ქვემოთ, ხოლო align-items — მარცხნიდან მარჯვნივ.
როგორ მუშაობს ინდივიდუალური ელემენტების მართვა?
აირჩიეთ ელემენტი მისი ნომრის მიხედვით, შემდეგ მიუთითეთ, რამდენად გაიზარდოს იგი თავისუფალი სივრცის შესავსებად (grow), რამდენად შემცირდეს სივრცის სიმცირისას (shrink), მისი საწყისი ზომა (basis) და მისი საკუთარი გასწორება მეორეხარისხოვან ღერძზე. Order თვისება ელემენტს ეკრანზე წინ ან უკან გადააადგილებს HTML კოდის შეცვლის გარეშე. CSS-ში საკუთარ წესს მიიღებს მხოლოდ ის ელემენტები, რომლებსაც რეალურად შეცვლით.
როდის არის მნიშვნელოვანი wrap და align-content?
გადატანის (wrap) გარეშე, ყველა ელემენტი იძულებით თავსდება ერთ ხაზზე და შეიძლება დავიწროვდეს. მისი ჩართვისას კი ელემენტები, რომლებიც ვეღარ ეტევიან, გადადიან შემდეგ ხაზზე — სწორედ ამ დროს ერთვება საქმეში align-content, რომელიც ანაწილებს სივრცეს ხაზებს შორის. Gap განსაზღვრავს მანძილს ელემენტებსა და ხაზებს შორის, margin-ების გამოყენების გარეშე.