Flexbox Үүсгэгч хэрэгслийн тухай
Flexbox Үүсгэгч нь хэрэглэгчдэд flex контейнер болон түүний элементүүдийг харагдах удирдлагаар тохируулах боломжийг олгодог онлайн хэрэгсэл юм. Хэрэглэгч байршил, бүтцийг тодорхойлохын тулд удирдлагуудыг ашиглан өөрчлөх бөгөөд бүтцийн өөрчлөлтийг шууд харан, өөрийн загварт зориулсан CSS кодыг ганц товшилтоор хуулж авах боломжтой.
Энэхүү хэрэгсэл нь дараах зорилготой хүмүүст зориулагдсан болно:
- CSS flexbox бүтцийг нүдээр харж тохируулахыг хүссэн хэн бүхэн.
- Flex контейнер болон түүний элементүүдэд зориулсан CSS кодыг хурдан хугацаанд үүсгэх шаардлагатай байгаа хүмүүс.
- Янз бүрийн flexbox шинж чанарууд нь бүтцэд хэрхэн нөлөөлж байгааг ойлгохыг хүссэн хэрэглэгчид.
- Төвд байрлах элемент, цэсний мөр, давхарласан элементүүд, картууд эсвэл хажуугийн мөр зэрэг түгээмэл бүтцийг үүсгэж буй хүмүүс.
Контейнерийн тохиргоо болон оролтын утгууд
Хэрэглэгч flex контейнерийн ерөнхий бүтцийг тодорхойлохын тулд дараах үндсэн удирдлагуудыг ашиглана:
- Чиглэл: Мөр (Row), Урвуу мөр, Багана (Column), эсвэл Урвуу багана гэсэн сонголтуудаас сонгоно. Чиглэлийг мөрөөс багана руу шилжүүлэхэд үндсэн болон туслах тэнхлэгүүд солигддог бөгөөд энэ нь "Агуулгыг тэгшлэх (Justify content)" болон "Элементүүдийг зэрэгцүүлэх (Align items)" шинж чанарууд хэрхэн ажиллахад шууд нөлөөлдөг.
- Шилжилт (Wrap): Шилжилтгүй, Шилжилттэй, эсвэл Урвуу шилжилт гэсэн утгыг оноож болно. Шилжилтийг идэвхгүй болгосноор бүх элементүүдийг нэг мөрөнд багтахаар шахаж нарийсгадаг. Шилжилтийг идэвхжүүлсэн үед багтахгүй байгаа элементүүд дараагийн мөр рүү шилждэг.
- Агуулгыг тэгшлэх (Justify content): Элементүүдийг үндсэн тэнхлэгийн дагуу байрлуулах бөгөөд Эхэнд, Төгсгөлд, Төвд, Хооронд нь зай авах, Эргэн тойронд зай авах, Тэгш зай авах гэсэн утгуудыг сонгох боломжтой.
- Элементүүдийг зэрэгцүүлэх (Align items): Элементүүдийг туслах тэнхлэгийн дагуу зэрэгцүүлэх бөгөөд Эхэнд, Төгсгөлд, Төвд, Сунгах, Суурь шугам гэсэн утгуудаас сонгоно.
- Агуулгыг зэрэгцүүлэх (Align content): Олон мөр бүхий бүтцийн хувьд мөрүүдийг бүлгээр нь зэрэгцүүлэхэд ашиглагдана. Үүнд Эхэнд, Төгсгөлд, Төвд, Сунгах, Хооронд нь зай авах, Эргэн тойронд зай авах, Тэгш зай авах гэсэн сонголтууд орно. Энэ шинж чанар нь шилжилт (wrap) идэвхжсэн үед мөрүүдийг зэрэгцүүлэхэд чухал үүрэгтэй.
- Зай (Gap): Элементүүд болон мөрүүдийн хоорондох зайг тохируулах тоон утга юм.
Элементүүдийн тохиргоо
Контейнер доторх элемент бүрийг дугаараар нь сонгож, дараах шинж чанаруудыг тусгайлан тохируулж болно:
- Дараалал (Order): Элементийн байрших дарааллыг тодорхойлох тоон утга. Энэ нь HTML кодыг хөндөхгүйгээр элементийг дэлгэц дээр урагш эсвэл хойш хөдөлгөх боломжийг олгодог.
- Өсөлт (Grow): Сул зайг нөхөхийн тулд элемент хэр зэрэг өсөхийг заах тоон утга.
- Агшилт (Shrink): Зай давчуу үед элемент хэр зэрэг агшихыг заах тоон утга.
- Суурь хэмжээ (Basis): Элементийн эхлэх хэмжээг тодорхойлох тоон утга эсвэл "Автомат" (Auto) гэсэн сонголт.
- Өөрийгөө зэрэгцүүлэх (Align self) (Align self): Тухайн элементийн туслах тэнхлэг дэх өөрийн зэрэгцүүлэлтийг тусад нь тохируулах бөгөөд Автомат, Эхэнд, Төгсгөлд, Төвд, Сунгах, Суурь шугам гэсэн утгуудаас сонгоно.
Хэрэгсэл дээр "Элемент нэмэх" товчийг дарахад шинэ элемент (жишээ нь, "Элемент 5") нэмэгдэж харагдана. Зөвхөн шинж чанарыг нь өөрчилсөн элементүүдэд зориулж тусдаа CSS дүрэм үүсдэг.
Үр дүн болон CSS код авах
Хэрэглэгч тохиргоог хийх явцад дараах үр дүнгүүд шууд гарна:
- Шууд харагдах орчин: Flexbox бүтцийн өөрчлөлтийг цаг тухайд нь харуулах шууд харагдах орчин.
- CSS код: Flex контейнер болон түүний элементүүдэд зориулж үүсгэсэн CSS код.
Хэрэглэгч "CSS хуулах" товчийг дарахад тухайн товчны төлөв "Хуулсан" (Copied) болж өөрчлөгдөнө.
Нууцлал болон мэдээлэл боловсруулалт
Энэхүү хэрэгсэл нь хэрэглэгчийн нууцлалыг бүрэн хангаж ажилладаг. Таны үүсгэж буй бүтэц нь таны хөтөч дээр шууд үүсдэг. Таны тохируулсан ямар ч мэдээлэл, бүтцийг BroBroGo руу хуулж илгээхгүй.
Түгээмэл асуултууд (FAQ)
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 нь маржин ашиглахгүйгээр элементүүд болон мөрүүдийн хоорондох зайг тохируулдаг.