შექმენით იდეალური Flexbox განლაგებები

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

კონტეინერის თვისებები

ნივთის თვისებები

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
გენერირებული CSS კოდი

პოპულარული Flexbox-ის წინასწარ დაყენებული პარამეტრები

ჰორიზონტალურად და ვერტიკალურად ცენტრირება

Content

იდეალურია ლოგოს, ღილაკის ან ნებისმიერი ელემენტის ცენტრირებისთვის, როგორც ჰორიზონტალურად, ასევე ვერტიკალურად.

თანაბარი ინტერვალი

Item 1
Item 2
Item 3

ელემენტებს შორის თანაბარი დაშორება შექმენით შორის ან გარშემო არსებული სივრცით.

ვერტიკალური მენიუ

Home
About
Contact

შექმენით ვერტიკალური ნავიგაციის მენიუ თანმიმდევრული დაშორებითა და გასწორებით.

რეაგირებადი ბადე

Box 1
Box 2
Box 3
Box 4
Box 5

შექმენით რეაგირებადი ბადისებრი განლაგება, რომელიც ელემენტებს ხელმისაწვდომი სივრცის მიხედვით ახვევს.

გმირის ბანერი

მთავარი სათაური

გმირის განყოფილება მოქმედებისკენ მოწოდებით

შექმენით გმირის ბანერი სათაურით, ქვესათაურით და მოქმედებისკენ მოწოდების ღილაკით.

ქვედა კოლონტიტულის განლაგება

Company

About Us

Careers

Support

დახმარების ცენტრი

დაგვიკავშირდით

© 2023 Flexbox Generator

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

რეალური სამყაროს მაგალითები

ნავიგაციის ზოლი

Logo
Home
Products
About
Contact

ნავიგაციის ზოლის გავრცელებული განლაგება მარცხნივ ლოგოთი, ცენტრში მენიუს ელემენტებით და მარჯვნივ კალათის ხატულით.

Card Grid

ბარათის სათაური

ბარათის აღწერილობის ტექსტი აქ არის.

ბარათის სათაური

ბარათის აღწერილობის ტექსტი აქ არის.

ბარათის სათაური

ბარათის აღწერილობის ტექსტი აქ არის.

რეაგირებადი ბარათების ბადე, რომელიც ადაპტირდება სხვადასხვა ეკრანის ზომასთან flexbox თვისებების გამოყენებით.

სტატიის განლაგება

სტატიის სათაური

გამოქვეყნდა 2023 წლის 1 იანვარს · 5 წუთიანი კითხვა

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

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

დაფის განლაგება

Header
Sidebar
მთავარი შინაარსი
Footer

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

Flexbox-ის საფუძვლები

რა არის Flexbox?

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

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

ძირითადი ცნებები:Flexbox წარმოგიდგენთ ორ მთავარ კონცეფციას:მოქნილი კონტეინერი and the მოქნილი ნივთებიკონტეინერი მშობელი ელემენტია, ხოლო ელემენტები მისი პირდაპირი შვილები.

მთავარი ღერძი vs განივი ღერძი

Flexbox-ის განლაგება ორ ღერძზეა დაფუძნებული:main axis and the განივი ღერძი.

  • მთავარი ღერძი:ძირითადი ღერძი, რომლის გასწვრივაც განლაგებულია მოქნილი ელემენტები. განსაზღვრულია შემდეგნაირადflex-direction.
  • ჯვარედინი ღერძი:ღერძი პერპენდიკულარულია მთავარი ღერძის მიმართ. მისი მიმართულება დამოკიდებულია მთავარი ღერძის მიმართულებაზე.
მთავარი ღერძი →
← ჯვარედინი ღერძი
Start
Main
End

კონტეინერის თვისებები

Property Description
display განსაზღვრავს მოქნილ კონტეინერს; ხაზში ან ბლოკში, მოცემული მნიშვნელობიდან გამომდინარე.
flex-direction ადგენს მთავარ ღერძს, რითაც განსაზღვრავს მიმართულებას, რომლითაც მოქნილი ელემენტები განთავსდება მოქნილ კონტეინერში.
flex-wrap ნაგულისხმევად, მოქნილი ელემენტები ყველა ერთ ხაზზე ეცდება მოთავსდეს. ამ თვისების გამოყენებით შეგიძლიათ შეცვალოთ ეს და ელემენტებს საჭიროებისამებრ გადახვევის უფლება მისცეთ.
justify-content ახდენს მოქნილი ელემენტების გასწორებას მოქნილი კონტეინერის მიმდინარე ხაზის მთავარი ღერძის გასწვრივ.
align-items ახდენს მოქნილი ელემენტების გასწორებას მოქნილი კონტეინერის მიმდინარე ხაზის განივი ღერძის გასწვრივ.
align-content ჯვარედინი ღერძზე დამატებითი სივრცის არსებობის შემთხვევაში, მოქნილი კონტეინერის ხაზების გასწორება ხდება მის შიგნით.

ნივთის თვისებები

Property Description
order ნაგულისხმევად, მოქნილი ელემენტები განლაგებულია წყაროს მიხედვით. თუმცა,orderთვისება აკონტროლებს მათი გამოჩენის თანმიმდევრობას flex კონტეინერში.
flex-grow განსაზღვრავს მოქნილი ელემენტის საჭიროების შემთხვევაში გაზრდის უნარს. ის იღებს უერთეულო მნიშვნელობას, რომელიც პროპორციის ფუნქციას ასრულებს.
flex-shrink განსაზღვრავს მოქნილი ნივთის საჭიროების შემთხვევაში შეკუმშვის უნარს.
flex-basis განსაზღვრავს მოქნილი ელემენტის საწყის ზომას, სანამ ნებისმიერი ხელმისაწვდომი სივრცე განაწილდება მოქნილი ფაქტორების მიხედვით.
align-self ნაგულისხმევ გასწორებას (ან მიერ მითითებულს) უშვებსalign-items) უნდა გადაიხედოს ცალკეული მოქნილი ელემენტებისთვის.

Related Tools

სტილუსის CSS-ში გადამყვანი

გარდაქმენით თქვენი SCSS კოდი CSS-ად. სწრაფად, მარტივად და უსაფრთხოდ.

SCSS-დან CSS-მდე გადამყვანი

გარდაქმენით თქვენი SCSS კოდი CSS-ად. სწრაფად, მარტივად და უსაფრთხოდ.

Sass-დან CSS-მდე გადამყვანი

გარდაქმენით თქვენი Sass კოდი CSS-ად. სწრაფად, მარტივად და უსაფრთხოდ.

CMYK-დან PANTONE-მდე

ბეჭდვის დიზაინისთვის CMYK ფერის მნიშვნელობების გადაყვანა Pantone®-ის უახლოეს ეკვივალენტებად

ტექსტი ათწილადად

ტექსტის ათობით ფორმატში გადაყვანა უპრობლემოდ

ასაკის კალკულატორი

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