Სარჩევი:

როგორ შევქმნა ბადის განლაგება CSS-ში?
როგორ შევქმნა ბადის განლაგება CSS-ში?

ვიდეო: როგორ შევქმნა ბადის განლაგება CSS-ში?

ვიდეო: როგორ შევქმნა ბადის განლაგება CSS-ში?
ვიდეო: CSS Grid Layout Crash Course 2024, ნოემბერი
Anonim

მოდით შევაჯამოთ ოთხი ძირითადი ნაბიჯი:

  1. Შექმნა კონტეინერის ელემენტი და გამოაცხადეთ ის ჩვენება: ბადე ;.
  2. გამოიყენეთ იგივე კონტეინერი, რათა განისაზღვროს ბადე ტრეკები გამოყენებით ბადე - შაბლონი -სვეტები და ბადე - შაბლონი - რიგების თვისებები.
  3. მოათავსეთ საბავშვო ელემენტები კონტეინერში.
  4. მიუთითეთ ღრძილების ზომების გამოყენებით ბადე - უფსკრული თვისებები.

აქედან გამომდინარე, შემიძლია გამოვიყენო CSS ბადის განლაგება?

Internet Explorer-ის გარდა, CSS ბადის განლაგება არის უპრეფიქსი Safari, Chrome, Opera, Firefox და Edge. ყველა თვისებისა და მნიშვნელობების მხარდაჭერა, რომლებიც დეტალურად არის აღწერილი ამ სახელმძღვანელოებში, თავსებადია ბრაუზერებში. ეს ნიშნავს, რომ თუ დაწერთ ზოგიერთს ბადის განლაგება კოდი Firefox-ში, ის იგივენაირად უნდა მუშაობდეს Chrome-ში.

დამატებით, უნდა გამოვიყენო Flexbox თუ ბადე? ორივე flexbox და ბადე ამ კონცეფციას ეფუძნება. Flexbox საუკეთესოა ელემენტების ერთ მწკრივში ან ერთ სვეტში მოსაწყობად. ბადე საუკეთესოა ელემენტების მრავალ მწკრივში და სვეტში მოსაწყობად. justify-content თვისება განსაზღვრავს, თუ როგორ არის დამატებითი სივრცე მოქნილი - კონტეინერი ნაწილდება მოქნილი - ნივთები.

ანალოგიურად, რა არის 1fr?

1ფრ არის ერთი "ფრაქციული ერთეული", რომელიც არის "ელემენტში დარჩენილი სივრცის" თქმის საშუალება.

რა არის Flexbox ბადე?

Flexbox დამზადებულია ერთგანზომილებიანი განლაგებისთვის და ბადე დამზადებულია ორგანზომილებიანი განლაგებისთვის. ეს ნიშნავს, რომ თუ ნივთებს ერთი მიმართულებით ათავსებთ (მაგალითად სამი ღილაკი სათაურის შიგნით), მაშინ უნდა გამოიყენოთ Flexbox : ეს მოგცემთ უფრო მეტ მოქნილობას, ვიდრე CSS ბადე.

გირჩევთ: