diff --git a/README.md b/README.md index fff617a..20ea36f 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ My gratitude to these contributors for localizing Flexbox Froggy. This is what o * Turkish by [Uğur Korfalı](https://github.com/kel-sakal-biyik) * Ukrainian by [sHa](https://github.com/shadoll) * Vietnamese by [Kingsten Banh](https://github.com/kingstenbanh) +* Nepali by [Kamal Ale Magar](https://github.com/KamalAle12) Don't see your language on the list? Contribute a translation! Fork the [repo](https://github.com/thomaspark/flexboxfroggy/), add your translations, and submit a pull request. diff --git a/index.html b/index.html index 335caa5..f029e5d 100644 --- a/index.html +++ b/index.html @@ -142,6 +142,7 @@
Хөндлөн тэнхлэгт нэмэлт зай байгаа үед flexbox-н мөрүүдийг дураараа байрлуулна.
flex-start
flex-end
center
space-between
space-around
space-evenly
stretch (default)
',
'sk': 'Zarovná riadky kontajnera flex v rámci kontajnera flex, ak je na priečnej osi extra priestor.
flex-start
flex-end
center
space-between
space-around
space-evenly
stretch (default)
',
'si': 'හරස් අක්ෂයේ අමතර ඉඩ ඇති විට flex කන්ටේනරය තුළ පේළි ඇසිරීම තීරණය කරයි.
flex-start
flex-end
center
space-between
space-around
space-evenly
stretch (default)
',
+ 'np': 'फ्लेक्स कन्टेनरमा थप ठाउँ हुँदा फ्लेक्स कन्टेनरको रेखाहरूलाई क्रस-एक्सिसमा मिलाउनको लागि प्रयोग गरिन्छ।
flex-start
flex-end
center
space-between
space-around
space-evenly
stretch (default)
',
},
'align-items': {
'en': 'Aligns flex items along the cross axis.
flex-start
flex-end
center
baseline
stretch (default)
',
@@ -102,6 +103,7 @@ var docs = {
'mn': 'Хөндлөн тэнхлэгийн дагуу flex items-г байрлуулна.
flex-start
flex-end
center
baseline
stretch (default)
',
'sk': 'Zarovná ohybné prvky pozdĺž priečnej osi.
flex-start
flex-end
center
baseline
stretch (default)
',
'si': 'හරස් අක්ෂය දිගේ flex අයිතම පෙළගස්වයි.
flex-start
flex-end
center
baseline
stretch (default)
',
+ 'np': 'फ्लेक्स आइटमहरूलाई क्रस-एक्सिसमा मिलाउँछ।
flex-start
flex-end
center
baseline
stretch (default)
',
},
'align-self': {
'en': 'Aligns a flex item along the cross axis, overriding the align-items
value.
flex-start
flex-end
center
baseline
stretch
',
@@ -154,6 +156,7 @@ var docs = {
'mn': 'align-items
утгыг дарж, flex item-г хөндлөн тэнхлэгийн дагуу байрлуулна.
flex-start
flex-end
center
baseline
stretch
',
'sk': 'Zarovná prvok flex pozdĺž krížovej osi, pričom nahradí hodnotu align-items
.
flex-start
flex-end
center
baseline
stretch
',
'si': 'align-items
හි අගය නොසලකා හැර හරස් අක්ෂය දිගේ flex අයිතමය පෙළගස්වයි.
flex-start
flex-end
center
baseline
stretch
',
+ 'np': 'फ्लेक्स आइटमलाई क्रस-एक्सिसमा मिलाउँछ, align-items
को मानलाई ओभरराइड गर्दै।
flex-start
flex-end
center
baseline
stretch
',
},
'flex-direction': {
'en': 'Defines the direction of the main axis.
row (default)
row-reverse
column
column-reverse
',
@@ -206,6 +209,7 @@ var docs = {
'mn': 'Үндсэн тэнхлэгийн чиглэлийг тодорхойлно.
row (default)
row-reverse
column
column-reverse
',
'sk': 'Určuje smer hlavnej osi.
row (default)
row-reverse
column
column-reverse
',
'si': 'ප්රධාන අක්ෂයේ දිශාව තීරණය කරයි.
row (default)
row-reverse
column
column-reverse
',
+ 'np': 'मुख्य अक्षको दिशा परिभाषित गर्छ।
row (default)
row-reverse
column
column-reverse
',
},
'flex-flow': {
'en': 'Shorthand property for flex-direction
and flex-wrap
.
<flex-direction> <flex-wrap>
',
@@ -258,6 +262,7 @@ var docs = {
'mn': 'flex-direction
болон flex-wrap
-д зориулсан товчилсон проперти.
<flex-direction> <flex-wrap>
',
'sk': 'Skrátená vlastnosť pre flex-direction
a flex-wrap
.
<flex-direction> <flex-wrap>
',
'si': 'flex-direction
සහ flex-wrap
සඳහා වන තනි ගුණාංගයකි.
<flex-direction> <flex-wrap>
',
+ 'np': 'flex-direction
र flex-wrap
को लागि शॉर्टह्यान्ड प्रोपर्टी।
<flex-direction> <flex-wrap>
',
},
'flex-wrap': {
'en': 'Specifies whether flex items are forced on a single line or can be wrapped on multiple lines.
nowrap (default)
wrap
wrap-reverse
',
@@ -310,6 +315,7 @@ var docs = {
'mn': 'Flex items-г нэг мөрөнд шахах эсвэл олон мөрөнд тарааж байрлуулах уу гэдгийг заана.
nowrap (default)
wrap
wrap-reverse
',
'sk': 'Určuje, či sa položky flex musia nachádzať na jednom riadku alebo môžu byť zabalené do viacerých riadkov.
nowrap (default)
wrap
wrap-reverse
',
'si': 'flex අයිතම තනි පේළියකට හෝ පේළි කිහිපයකට ඇසිරීම තීරණය කරයි.
nowrap (default)
wrap
wrap-reverse
',
+ 'np': 'फ्लेक्स आइटमहरूलाई एउटै लाइनमा बाध्य पार्ने वा धेरै लाइनहरूमा र्याप गर्न मिल्ने हो वा होइन भनेर निर्दिष्ट गर्दछ।
nowrap (default)
wrap
wrap-reverse
',
},
'justify-content': {
'en': 'Aligns flex items along the main axis.
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
',
@@ -362,6 +368,7 @@ var docs = {
'mn': 'Үндсэн тэнхлэгийн дагуу flex item-ийг байрлуулна.
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
',
'sk': 'Zarovnanie prvkov flex pozdĺž hlavnej osi.
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
',
'si': 'ප්රධාන අක්ෂය දිගේ flex අයිතම පෙළගස්වයි.
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
',
+ 'np': 'फ्लेक्स आइटमहरूलाई मुख्य अक्षमा मिलाउँछ।
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
',
},
'order': {
'en': 'Specifies the order of the flex item.
<integer> (... -1, 0 (default), 1, ...)
',
@@ -414,5 +421,6 @@ var docs = {
'mn': 'Flex item-н байрлах дарааллыг заана.
<integer> (... -1, 0 (default), 1, ...)
',
'sk': 'Určuje poradie položky flex.
<integer> (... -1, 0 (default), 1, ...)
',
'si': 'flex අයිතමයේ අනුපිළිවෙල තීරණය කරයි.
<integer> (... -1, 0 (default), 1, ...)
',
+ 'np': 'फ्लेक्स आइटमको क्रम निर्दिष्ट गर्दछ।
<integer> (... -1, 0 (default), 1, ...)
',
}
};
diff --git a/js/levels.js b/js/levels.js
index 7f2c525..2617c8f 100644
--- a/js/levels.js
+++ b/js/levels.js
@@ -52,9 +52,10 @@ var levels = [
'mn': 'Бяцхан мэлхий болон түүний найзуудад CSS код бичиж тусалдаг Flexbox Froggy тоглоомонд та тавтай морил! justify-content
гэх items-г хэвтээ тэнхлэгийн дагуу байрлуулах пропертийг ашиглан энэ мэлхийг баруун талд байгаа сараана цэцэг рүү хөтөлнө үү, дараах утгуудыг хүлээн авна:
flex-start
: items-г контейнерын зүүн талд байрлуулна.flex-end
: items-г контейнерын баруун талд байрлуулна.center
: items-г контейнерын төвд байрлуулна.space-between
: items-г хоорондоо нь ижил зайтай байхаар байрлуулна.space-around
: items-г эргэн тойрон нь ижил зайтай байхаар байрлуулна.Жишээлбэл, justify-content: flex-end;
нь мэлхийг баруун тийш шилжүүлэх болно.
Vitajte v hre Flexbox Froggy, v ktorej pomáhate Froggymu a jeho priateľom písaním kódu CSS! Nasmerujte túto žabku na lilipad vpravo pomocou vlastnosti justify-content
, ktorá zarovnáva položky horizontálne a akceptuje nasledujúce hodnoty:
flex-start
: Položky sa zarovnajú na ľavú stranu kontajnera.flex-end
: Položky sa zarovnajú na pravú stranu kontajnera.center
: Položky sa zarovnajú na stred kontajnera.space-between
: Položky sa zobrazujú s rovnakým odstupom.space-around
: Položky sa zobrazujú s rovnakým odstupom okolo nich.Napríklad justify-content: flex-end;
posunie žabku doprava.
Flexbox මැඬියා වෙත සාදරයෙන් පිළිගනිමු, මෙය ඔබ CSS code ලිවීමෙන්, මැඩියා සහ මිතුරන්ට උදව් කරන ක්රීඩාවක්! මෙම මැඩියා දකුණු පස ඇති නෙළුම් කොළය වෙත යොමු කිරීමට justify-content
ගුණාංගය භාවිතා කරන්න, එය අයිතම තිරස් අතට පෙළගස්වන අතර පහත අගයන් පිළිගනී:
flex-start
: අයිතම කන්ටේනරයේ වම් පැත්තට පෙළගස්වයි.flex-end
: අයිතම කන්ටේනරයේ දකුණු පැත්තට පෙළගස්වයි.center
: අයිතම කන්ටේනරයේ මැදට පෙළගස්වයි.space-between
: අයිතම ඒවා අතර සමාන පරතරයක් සහිතව පෙළගස්වයි.space-around
: අයිතම ඒවා වටා සමාන පරතරයක් සහිතව පෙළගස්වයි.උදාහරණ වශයෙන්, justify-content: flex-end;
මැඩියා දකුණු පැත්තට ගෙන යනු ඇත.
हजुरहरुलाई Flexbox Froggy मा स्वागत छ, जहाँ तपाई Froggy र उसका साथीहरूलाई CSS कोड लेखेर मद्दत गर्न सक्नुहुन्छ! यस भ्यागुतोलाई दायाँतिर रहेको लिलीप्याडमा पुर्याउन justify-content
प्रोपर्टी प्रयोग गर्नुहोस्, जसले वस्तुहरूलाई तेर्सो रूपमा राख्ने गर्दछ र तल उल्लेखित मानहरू स्वीकार गर्दछ:
flex-start
: वस्तुहरू कन्टेनरको बायाँतर्फ राख्न।flex-end
: वस्तुहरू कन्टेनरको दायाँतर्फ राख्न।center
: वस्तुहरू कन्टेनरको बीचमा राख्न।space-between
: वस्तुहरू बीचमा समान दूरी राख्न।space-around
: वस्तुहरूको चारैतिर समान दूरी राख्न।उदाहरणका लागि, justify-content: flex-end;
ले भ्यागुतोलाई दायाँतिर सार्छ।
Эдгээр мэлхийнүүдийг сараана цэцэг рүүгээ очиход нь туслахын тулд justify-content
-г дахин ашиглаарай. Энэ CSS проперти нь items-г хэвтээ тэнхлэгийн дагуу байрлуулах ба дараах утгуудыг хүлээн зөвшөөрдөг гэдгийг санаарай:
flex-start
: items-г контейнерын зүүн талд байрлуулна.flex-end
: items-г контейнерын баруун талд байрлуулна.center
: items-г контейнерын төвд байрлуулна.space-between
: items-г хоорондоо нь ижил зайтай байхаар байрлуулна.space-around
: items-г эргэн тойрон нь ижил зайтай байхаар байрлуулна.Znovu použite justify-content
, aby ste týmto žabám pomohli dostať sa k ich lilipadom. Nezabudnite, že táto vlastnosť CSS zarovnáva položky horizontálne a akceptuje nasledujúce hodnoty:
flex-start
: Položky sa zarovnajú na ľavú stranu kontajnera.flex-end
: Položky sa zarovnajú na pravú stranu kontajnera.center
: Položky sa zarovnajú na stred kontajnera.space-between
: Položky sa zobrazujú s rovnakým odstupom.space-around
: Položky sa zobrazujú s rovnakým odstupom okolo nich.මෙම මැඬියන්ට නැවත ඔවුන්ගේ නෙළුම් කොළ වෙත යාමට උපකාර කිරීමට justify-content
භාවිතා කරන්න. මෙම CSS ගුණාංගය අයිතම තිරස් අතට පෙළගස්වන අතර පහත අගයන් පිළිගන්නා බව මතක තබා ගන්න:
flex-start
: අයිතම කන්ටේනරයේ වම් පැත්තට පෙළගස්වයි.flex-end
: අයිතම කන්ටේනරයේ දකුණු පැත්තට පෙළගස්වයි.center
: අයිතම කන්ටේනරයේ මැදට පෙළගස්වයි.space-between
: අයිතම ඒවා අතර සමාන පරතරයක් සහිතව පෙළගස්වයි.space-around
: අයිතම ඒවා වටා සමාන පරතරයක් සහිතව පෙළගස්වයි.यी भ्यागुतोलाई तिनका लिलीप्याडसम्म पुर्याउन फेरि justify-content
प्रयोग गर्नुहोस्। सम्झनुहोस्, यो CSS प्रोपर्टीले वस्तुहरूलाई तेर्सो रूपमा राख्ने गर्छ र तलका मानहरू स्वीकार गर्दछ:
flex-start
: वस्तुहरू कन्टेनरको बायाँतर्फ राख्न ।flex-end
: वस्तुहरू कन्टेनरको दायाँतर्फ राख्न ।center
: वस्तुहरू कन्टेनरको बीचमा राख्न ।space-between
: वस्तुहरू बीचमा समान दूरी राख्न ।space-around
: वस्तुहरूको चारैतिर समान दूरी राख्न ।ત્રણ દેડકાઓને justify-content
ની મદદથી લીલા પાંદડાઓ સુધી પહોંચાડો. અત્યારે લીલીના તરતા પાંદડાની ચારે તરફ ગણી જગ્યા છે.
જો તમે કોઈ પ્રોપર્ટીનું મહત્વ ભુલી ગયા છો તો તેના પાર હોવર કરીને જાણી શકાય છે. justify-content
ની ઉપર હોવર કરવાનો પ્રયત્ન કરો .
Помози да све три жабице нађу своје локвање користећи само justify-content
. Овог пута локвањи имају много простора око себе.
Ако си заборавио/ла могуће вредности за својство, можеш прећи курсором преко назива својства да би их видео. Пробај да пређеш курсором преко justify-content
.
Pomozi da sve tri žabice nađu svoje listove koristeći samo justify-content
. Ovog puta listovi imaju mnogo prostora oko sebe.
Ako si zaboravio/la moguće vrijednosti za svojstvo, možeš preći kursorom preko naziva svojstva da bi ih video. Probaj da pređeš kursorom preko justify-content
.
Pomozi da sve tri žabice nađu svoje listove koristeći samo justify-content
. Ovog puta listovi imaju mnogo prostora oko sebe.
Ako si zaboravio/la moguće vrijednosti za svojstvo, možeš prijeći kursorom preko naziva svojstva da bi ih vidio. Probaj prijeći kursorom preko justify-content
.
Pomozi da sve tri žabice nađu svoje listove koristeći samo justify-content
. Ovog puta listovi imaju mnogo prostora oko sebe.
Ako si zaboravio/la moguće vrijednosti za svojstvo, možeš prijeći kursorom preko naziva svojstva da bi ih vidio. Probaj prijeći kursorom preko justify-content
.
Help alle drie kikkers naar hun lelieblaadjes door gebruik te maken van justify-content
. Deze keer is er veel plaats rond de lelieblaadjes.
Indien je de mogelijke waarden vergeten bent kun je altijd je cursor over de naam van de eigenschap houden. Probeer je cursor over justify-content
te houden.
justify-content
பயன்படுத்தி, தவளை அதற்கான இலையினை அடைய உதவவும். இந்த முறை இலையினை சுற்றி நிறைய வெற்றிடம் இருக்கின்றது.
நீங்கள் ஒரு வேளை சாத்தியமான மதிப்புகளை மறந்து இருந்தால், பண்பின் பெயர் மீது hover செய்தால் அதன் மதிப்புகளை பார்க்கலாம். இப்போது justify-content
மீது hover செய்து முயற்சிக்கவும்.
మూడు కప్పల కోసంjustify-content
ను ఉపయోగించడం ద్వారా వారి లిల్లీప్యాడ్లను కనుగొనడంలో సహాయపడండి. ఈ సమయంలో, లిల్లీప్యాడ్లు వాటి చుట్టూ చాలా స్థలాన్ని కలిగి ఉన్నాయి.
దీనికి సాధ్యమయ్యే విలువలను మీరు మరచిపోతున్నట్లు అనిపిస్తే, మీరు వాటిని చూడటానికి అంశాల పేరు మీద హోవర్ చేయవచ్చు. ఒక సారి మౌస్ పాయింటర్ ని justify-content
మీద ఉంచి ప్రయత్నించండి.
Гурван мэлхийд зөвхөн justify-content
ашиглан сараана цэцэгээ олоход нь туслаарай. Энэ удаад сараана цэцэгсийн эргэн тойронд их зайтай байна.
Хэрэв ямар нэг пропертигийн авч болох утгыг санахгүй байвал тухайн пропертигийн нэр дээр дарж үзэх боломжтой. justify-content
Дарж үзнэ үү.
Pomôžte všetkým trom žabkám nájsť ich liliputány len pomocou justify-content
. Tentoraz majú lilipady okolo seba veľa priestoru.
Ak zabudnete na možné hodnoty vlastnosti, môžete ich zobraziť kliknutím na názov vlastnosti. Skúste kliknúť na justify-content
.
justify-content
භාවිතා කිරීමෙන් මැඬියන් තිදෙනාටම ඔවුන්ගේ නෙළුම් කොළ සොයා ගැනීමට උදව් කරන්න. මේ වතාවේ, නෙළුම් කොළ වටා විශාල ඉඩක් ඇත.
ගුණාංගයක් සඳහා විය හැකි අගයන් ඔබට අමතක වී ඇත්නම්, ඒවා බැලීමට ගුණාංගයේ නම මත ක්ලික් කළ හැකිය. justify-content
මත ක්ලික් කරන්න.
सिर्फ justify-content
प्रयोग गरेर सबै तीन भ्यागुतोलाई तिनका लिलीप्याडसम्म पुर्याउन मद्दत गर्नुहोस्। यस पटक, लिलीप्याडहरूको चारैतिर धेरै खाली ठाउँ छ।
यदि तपाईंलाई कुनै प्रोपर्टीको सम्भावित मानहरू बिर्सिएको महसुस हुन्छ भने, प्रोपर्टीको नाममा क्लिक गरेर ती मानहरू हेर्न सक्नुहुन्छ। justify-content
मा क्लिक गरेर प्रयास गर्नुहोस्।
Захад байсан сараана цэцэгc одоо эрэг рүү урсаж, хоорондын зайгаа ихэсгэсэн байна. justify-content
-г ашиглана уу. Энэ удаад сараана цэцэгсийн хоорондох зай тэнцүү байна.
Teraz sa liliovníky na okrajoch posunuli k brehu, čím sa zväčšil priestor medzi nimi. Použite justify-content
. Tentoraz majú lilipady medzi sebou rovnaké rozostupy.
දැන් අයිනේ ඇති නෙළුම් කොළ ඉවුරට ගසාගෙන ගොස් ඒවා අතර ඉඩ වැඩි වී ඇත. justify-content
භාවිතා කරන්න. මේ වතාවේ, නෙළුම් කොළ අතර සමාන පරතරයක් ඇත.
अब छेउका लिलीप्याडहरू किनारामा बगेर गएका छन्, जसले तिनको बीचमा थप ठाउँ बनाएको छ। justify-content
प्रयोग गर्नुहोस्। यस पटक, लिलीप्याडहरूको बीचमा समान दूरी छ।
હવે align-items
ની મદદ થી દેડકાઓને તળાવ ની તળિયે સુધી પહોંચાડો. આ CSS પ્રોપર્ટી આઇટમ્સને ઊભી રીતે ગોઠવે છે અને નીચેના મૂલ્યોને સ્વીકારે છે:
flex-start
: આ itemsને કન્ટેનર ની ટોચ પાર ગોઠવે છે. flex-end
: આ itemsને કન્ટેનર ના તળિયે ગોઠવે છે. center
: આ items ને કન્ટેનર ની મધ્ય માં ગોઠવે છે.baseline
: આ items ને કન્ટેનર ની બેસલાઈન પાર ગોઠવે છે.stretch
: આ items ને કન્ટેનર માં ફિટ કરવા માટે ફેલાવી દે છે .Сада користи align-items
да помогнеш жабицама да дођу до дна барице. Ово CSS својство поравњава елементе вертикално и прихвата следеће вредности:
flex-start
: Поравњава елементе у горњи део контејнера.flex-end
: Поравњава елементе у доњи део контејнера.center
: Поравњава елементе у вертикални центар контејнера.baseline
: Елементи су приказани у линији са baseline (линијом текста) контејнера.stretch
: Елементи су развучени да попуне контејнер.Sada koristi align-items
da pomogneš žabicama da dođu do dna barice. Ovo CSS svojstvo poravnava elemente vertikalno i prihvata sledeće vrijednosti:
flex-start
: Poravnava elemente u gornji deo kontejnera.flex-end
: Poravnava elemente u donji deo kontejnera.center
: Poravnava elemente u vertikalni centar kontejnera.baseline
: Elementi su prikazani u liniji sa baseline (linijom teksta) kontejnera.stretch
: Elementi su razvučeni da popune kontejner.Sada koristi align-items
da pomogneš žabicama da dođu do dna barice. Ovo CSS svojstvo poravnava elemente vertikalno i prihvaća sljedeće vrijednosti:
flex-start
: Poravnava elemente u gornji dio kontejnera.flex-end
: Poravnava elemente u donji dio kontejnera.center
: Poravnava elemente u vertikalni centar kontejnera.baseline
: Elementi su prikazani u liniji sa baseline (linijom teksta) kontejnera.stretch
: Elementi su razvučeni da popune kontejner.Sada koristi align-items
da pomogneš žabicama da dođu do dna barice. Ovo CSS svojstvo poravnava elemente vertikalno i prihvaća sljedeće vrijednosti:
flex-start
: Poravnava elemente u gornji dio kontejnera.flex-end
: Poravnava elemente u donji dio kontejnera.center
: Poravnava elemente u vertikalni centar kontejnera.baseline
: Elementi su prikazani u liniji sa baseline (linijom teksta) kontejnera.stretch
: Elementi su razvučeni da popune kontejner.Maak nu gebruik van align-items
om de kikkers naar de onderkant van de vijver te helpen. Deze CSS eigenschap lijnt elementen verticaal uit, en aanvaard de volgende waarden:
flex-start
: Elementen worden uitgelijnd naar de bovenkant van de container.flex-end
: Elementen worden uitgelijnd naar de onderkant van de container.center
: Elementen worden uitgelijnd op het verticaal middelpunt van de container.baseline
: Elementen worden uitgelijnd op de basislijn van de container.stretch
: Elementen worden uitgerokken om binnen de container te passen.இப்பொழுது align-items
உபயோகித்து, தவளைகள் குளத்தின் கீழ் பகுதிக்கு செல்ல உதவி செய்யவும். இந்த CSS property செங்குத்தாக பொருட்களை உபகரணங்களை சீரமைக்கும் மற்றும் பின்வரும் மதிப்புகளை ஏற்றுக்கொள்கிறது:
flex-start
: Items மேற்புறமாக சீரமைக்கப்படும்.flex-end
: Items கீழ்புறமாக சீரமைக்கப்படும்.center
: Items செங்குத்து மத்தியத்தில் சீரமைக்கப்படும்.baseline
: Items, baseline பகுதியில் சீரமைக்கப்படும்.stretch
: Items, container-ல் பொருந்தும் வண்ணம் நீட்டி சீரமைக்கப்படும்.ఇప్పుడు కప్పలు చెరువు దిగువకు రావడానికి align-items
ని ఉపయోగించండి. ఈ CSS ఆస్తి అంశాలను నిలువుగా సమలేఖనం చేస్తుంది మరియు ఈ క్రింది విలువలను అంగీకరిస్తుంది:
flex-start
: వస్తువులు కంటైనర్ పైభాగానికి సమలేఖనం చేయబడతాయి. flex-end
: వస్తువులు కంటైనర్ దిగువకు సమలేఖనం చేయబడతాయి. center
: వస్తువులు కంటైనర్ యొక్క నిలువు మధ్యలో సమలేఖనం చేయబడతాయి.baseline
: వస్తువులు కంటైనర్ యొక్క బేస్లైన్ వద్ద ప్రదర్శించబడతాయి.stretch
: కంటైనర్కు సరిపోయేలా, వస్తువులు విస్తరిస్తాయి. Одоо align-items
-г ашиглан мэлхий цөөрмийн ёроолд хүрэхэд нь туслаарай. Энэ CSS проперти нь items-г босоо тэнхлэгийн дагуу байрлуулах ба дараах утгуудыг хүлээн зөвшөөрдөг:
flex-start
: items-г контейнерын дээд талд байрлуулна.center
: items-г контейнерын босоо төвд байрлуулна.baseline
: items-г контейнерын суурь дээр харуулна.stretch
: items-г контейнерт тааруулж сунгана.Teraz použite align-items
, aby ste pomohli žabám dostať sa na dno rybníka. Táto vlastnosť CSS zarovnáva položky vertikálne a akceptuje nasledujúce hodnoty:
flex-start
: Položky zarovnajte do hornej časti kontajnera..flex-end
: Položky sa zarovnajú na spodok kontajnera.center
: Položky sa zarovnajú na vertikálny stred kontajnera.baseline
: Položky sa zobrazujú na základnej osi kontajnera.stretch
: Položky sú roztiahnuté tak, aby sa zmestili do kontajnera.දැන් align-items
භාවිතා කර මැඬියන්ට පොකුණේ පහළට එන්න උදව් කරන්න. මෙම CSS ගුණාංගය අයිතම සිරස් අතට පෙළගස්වන අතර පහත අගයන් පිළිගනී:
flex-start
: අයිතම කන්ටේනරයේ උඩට පෙළගස්වයි.flex-end
: අයිතම කන්ටේනරයේ යටට පෙළගස්වයි.center
: අයිතම කන්ටේනරයේ සිරස් මැදට පෙළගස්වයි.baseline
: අයිතම කන්ටේනරයේ baseline එකේ දිස්වේ.stretch
: කන්ටේනරයට ගැලපෙන පරිදි අයිතම විශාල වෙයි.align-items
प्रयोग गर्नुहोस्। यो CSS प्रोपर्टीले वस्तुहरूलाई ठाडो रूपमा राख्दछ र तलका मानहरू स्वीकार गर्दछ: flex-start
: वस्तुहरू कन्टेनरको माथि राख्न।flex-end
: वस्तुहरू कन्टेनरको तल राख्न।center
: वस्तुहरू कन्टेनरको ठाडो केन्द्रमा राख्न।baseline
: वस्तुहरू कन्टेनरको बेसलाइनमा राख्न।stretch
: वस्तुहरू कन्टेनरमा फिट हुन तन्काउन।Мэлхийг justify-content
болон align-items
-н хослолыг ашиглан цөөрмийн төв рүү хөтлөөрэй.
Priveďte žabu do stredu rybníka pomocou kombinácie justify-content
a align-items
.
justify-content
සහ align-items
හි සංයෝජනයක් භාවිතා කර මැඬියා පොකුණ මැදට ගෙන යන්න.
justify-content
र align-items
को संयोजन प्रयोग गरेर भ्यागुतोलाई पोखरीको केन्द्रमा पुर्याउनुहोस्।
Мэлхийнүүд энэ удаад эргэн тойрондоо хангалттай зайтай сараана цэцэгсийн төлөө дахин цөөрмийг гатлах хэрэгтэй. justify-content
болон align-items
-н хослолыг ашиглана уу.
Žabky musia opäť prejsť cez rybník, tentoraz za ľaliovkami, okolo ktorých je dostatok priestoru. Použite kombináciu justify-content
a align-items
.
මැඬියන්ට නැවත පොකුණ තරණය කිරීමට අවශ්ය වේ. මෙවර නෙළුම් කොළ වටා ඕනෑ තරම් ඉඩ ඇත. justify-content
සහ align-items
හි සංයෝජනයක් භාවිතා කරන්න.
भ्यागुतोलाई फेरि पोखरी पार गर्न आवश्यक छ, यस पटक लिलीप्याडको चारैतिर धेरै ठाँउ छ। justify-content
र align-items
को संयोजन प्रयोग गर्नुहोस्।
flex-direction
की मदद से मेंढकों को लिली के पत्तों को समान क्रम में लाइए। यह CSS प्रॉपर्टी कंटेनर के अन्दर किसी वस्तु की दिशा निर्धारित करती है, एवं निम्न मान स्वीकार करती है:
row
: वस्तुएं पाठ दिशा के अनुरूप हो जाती है।row-reverse
: वस्तुएं पाठ दिशा के अनुरूप हो जाती हैं।column
: वस्तुएं लम्ब रूप में उपर से नीचे की ओर हो जाती हैं।column-reverse
: वस्तुएं लम्ब रूप में नीचे से उपर की ओर हो जाती हैं।flex-direction
ની મદદથી દેડકાઓને લીલીના પાંદડાઓના સમાન ક્ર્મમ ગોઠવો. આ CSS પ્રોપર્ટી કન્ટેનરની અંદર itemની દિશા નક્કી કરે છે. તેમજ નીચેના મૂલ્યો ને સ્વીકારે છે.:
row
: items ને ટેક્સ્ટની દિશાની જેમ જ મૂકવામાં આવે છે. row-reverse
: items ને ટેક્સ્ટની વિરુદ્ધ દિશાની જેમ મૂકવામાં આવે છે. column
: items ને ઉપર થી નીચે સુધી ગોઠવવું છે.column-reverse
: items ને નીચેથી ઉપર સુધી ગોઠવવું છે. Поређај жабице као што је редослед локвања користећи flex-direction
. Ово CSS својство одређује смер у коме су елементи распоређени у контејнеру и прихвата следеће вредности:
row
: Елементи су распоређени у смеру текста.row-reverse
: Елементи су распоређени супротно од смера текста.column
: Елементи су распоређени одозго према доле.column-reverse
: Елементи су распоређени одоздо према горе.Poredaj žabice kao što je redoslijed lokvanja koristeći flex-direction
. Ovo CSS svojstvo određuje smjer u kojem su elementi raspoređeni u kontejneru i prihvata sljedeće vrijednosti:
row
: Elementi su raspoređeni u smjeru teksta.row-reverse
: Elementi su raspoređeni suprotno od smjera teksta.column
: Elementi su raspoređeni odozgo prema dole.column-reverse
: Elementi su raspoređeni odozdo prema gore.Poredaj žabice kao što je redoslijed lokvanja koristeći flex-direction
. Ovo CSS svojstvo određuje smjer u kojem su elementi raspoređeni u kontejneru i prihvata sljedeće vrijednosti:
row
: Elementi su raspoređeni u smjeru teksta.row-reverse
: Elementi su raspoređeni suprotno od smjera teksta.column
: Elementi su raspoređeni odozgo prema dole.column-reverse
: Elementi su raspoređeni odozdo prema gore.Poredaj žabice kao što je redoslijed lopoča koristeći flex-direction
. Ovo CSS svojstvo određuje smjer u kojem su elementi raspoređeni u kontejneru i prihvaća sljedeće vrijednosti:
row
: Elementi su raspoređeni u smjeru teksta.row-reverse
: Elementi su raspoređeni suprotno od smjera teksta.column
: Elementi su raspoređeni odozgo prema dolje.column-reverse
: Elementi su raspoređeni odozdo prema gore.De kikkers moeten in dezelfde volgorde als hun lelieblaadjes terecht komen, maak hiervoor gebruik van flex-direction
. Deze CSS eigenschap bepaald de richting in dewelke de elementen in hun container geplaatst worden, en aanvaard de volgende waarden:
row
: Elementen worden geplaatst in dezelfde richting als deze van de tekst.row-reverse
: Elementen worden geplaatst in de tegenovergestelde richting van de tekst.column
: Elementen worden onder elkaar geplaatst.column-reverse
: Elementen worden boven elkaar geplaatst.flex-direction
பயன்படுத்தி தவளைகள் தங்கள் இலைகளை அதே வரிசையில் பெற வேண்டும்.இந்த CSS property எந்த திசையில் பொருட்கள் வைக்கப்படுகின்றன என வரையறுக்கிறது, மற்றும் பின்வரும் மதிப்புகளை ஏற்றுக்கொள்கிறது:
row
: பொருட்கள் (Text)உரை உள்ள அதே திசையில் வைக்கப்படும்.row-reverse
: பொருட்கள் (Text)உரைக்கு எதிர் திசையில் வைக்கப்படும்.column
: பொருட்கள் மேலிருந்து கீழாக வைக்கப்படும்.column-reverse
: பொருட்கள் கீழிருந்து மேலாக வைக்கப்படும்.Мэлхийнүүдийг байгаа дарааллаар нь flex-direction
-г ашиглан сараана цэцэгс дээр нь хөтлөөрэй. Энэ CSS проперти нь items-г контейнерт байрлуулах чиглэлийг тодорхойлохдоо дараах утгуудыг хүлээн зөвшөөрнө:
row
: items-г текстийн чиглэлтэй адил байрлуулна. li>row-reverse
: items-г текстийн чиглэлийн эсрэг чиглэлд байрлуулна.column
: itemcийг дээрээс доош байрлуулна. li>column-reverse
: itemcийг доороос дээш байрлуулна.Žaby sa musia dostať do rovnakého poradia ako ich lienky pomocou flex-direction
. Táto vlastnosť CSS definuje smer, ktorým sú položky umiestnené v kontajneri, a akceptuje nasledujúce hodnoty:
row
: Položky sú umiestnené rovnako ako smer textu.row-reverse
: Položky sú umiestnené v opačnom smere, ako je smer textu.column
: Položky sú umiestnené zhora nadol.column-reverse
: Položky sú umiestnené zdola nahor.flex-direction
භාවිතා කරමින් මැඬියන්ට ඔවුන්ගේ නෙළුම් කොළ වලට අනුපිළිවෙලට යෑමට අවශයයි. මෙම CSS ගුණාංගය කන්ටේනරය තුළ අයිතම තබා ඇති දිශාව තීරණය කරන අතර පහත අගයන් පිළිගනී:
row
: text වල දිශාවට සමානව අයිතම තබා ඇත.row-reverse
: text වල දිශාවට ප්රතිවිරුද්ධව අයිතම තබා ඇත.column
: අයිතම උඩ සිට යටට තබා ඇත.column-reverse
: අයිතම යට සිට උඩට තබා ඇත.भ्यागुतोलाई तिनका लिलीप्याडसँग उस्तै क्रममा राख्न flex-direction
प्रयोग गर्नुहोस्। यो CSS प्रोपर्टीले वस्तुहरूलाई कन्टेनरभित्र कसरी राख्ने भन्ने दिशा निर्धारण गर्दछ र तलका मानहरू स्वीकार गर्दछ:
row
: वस्तुहरू text को दिशासँग मिलेर बस्छन्।row-reverse
: वस्तुहरू text को दिशा विपरीत राख्छ।column
: वस्तुहरूलाई माथिदेखि तलतिर राख्छ।column-reverse
: वस्तुहरूलाई तलदेखि माथितिर राख्छ।flex-direction
-г ашиглан мэлхийнүүдэд сараана цэцэгсийн баганийг олоход нь туслаарай. Энэ CSS проперти нь items контейнерт хэрхэн байрлах чиглэлийг тодорхойлохдоо дараах утгуудыг хүлээн авна:
row
: items-г текстийн чиглэлтэй адил байрлуулна. li>row-reverse
: items-г текстийн чиглэлийн эсрэг чиглэлд байрлуулна.column
: itemcийг дээрээс доош байрлуулна. li>column-reverse
: itemcийг доороос дээш байрлуулна.Pomôžte žabkám nájsť ich stĺpik ľalioviek pomocou flex-direction
. Táto vlastnosť CSS definuje smer, ktorým sú položky umiestnené v kontajneri, a akceptuje nasledujúce hodnoty:
row
: Položky sú umiestnené rovnako ako smer textu.row-reverse
: Položky sú umiestnené v opačnom smere, ako je smer textu.column
: Položky sú umiestnené zhora nadol.column-reverse
: Položky sú umiestnené zdola nahor.flex-direction
භාවිතා කර මැඬියන්ට ඔවුන්ගේ නෙළුම් කොළ තීරුව සොයා ගැනීමට උදව් කරන්න. මෙම CSS ගුණාංගය කන්ටේනරය තුළ අයිතම තබා ඇති දිශාව තීරණය කරන අතර පහත අගයන් පිළිගනී:
row
: text වල දිශාවට සමානව අයිතම තබා ඇත.row-reverse
: text වල දිශාවට ප්රතිවිරුද්ධව අයිතම තබා ඇත.column
: අයිතම උඩ සිට යටට තබා ඇත.column-reverse
: අයිතම යට සිට උඩට තබා ඇත.भ्यागुतोलाई तिनको लिलीप्याडको स्तम्भमा पुर्याउन flex-direction
प्रयोग गर्नुहोस्। यो CSS प्रोपर्टीले कन्टेनरमा वस्तुहरू राख्ने दिशा निर्धारण गर्दछ र तलका मानहरू स्वीकार गर्दछ:
row
: वस्तुहरू लेखन दिशासँग मिलेर राखिन्छन्।row-reverse
: वस्तुहरू लेखन दिशाको विपरीत राखिन्छन्।column
: वस्तुहरू माथिदेखि तलतिर राखिन्छन्।column-reverse
: वस्तुहरू तलदेखि माथितिर राखिन्छन्।Мэлхийнүүдийг өөрсөдтэй нь ижил өнгийн сараана цэцэгст хүрэхэд нь туслаарай. Тэгэхийн тулд flex-direction
болон justify-content
хоёуланг нь ашиглах шаардагатай болно.
Урвуу байрлалтай мөр эсвэл баганын чиглэлийг тохируулах үед эхлэл ба төгсгөл нь мөн урвуу болно гэдгийг анхаарна уу.
', 'sk': 'Pomôžte žabkám dostať sa k ich vlastným liliám. Hoci sa zdajú byť blízko, bude potrebné, aby sa tam dostali pomocouflex-direction
aj justify-content
.Všimnite si, že keď nastavíte smer na obrátený riadok alebo stĺpec, začiatok a koniec sa tiež obráti.
', 'si': 'මැඬියන්ට ඔවුන්ගේම නෙළුම් කොළ වෙත යාමට උදව් කරන්න. ඔවුන් සමීප බව පෙනුනද, ඔවුන්ව එහි ගෙන යාමට flex-direction
සහ justify-content
යන දෙකම අවශ්ය වනු ඇත.
ඔබ පේළියක හෝ තීරුවක දිශාව reverse කළ විට, මුල සහ අගද reverse වන බව සලකන්න.
', + 'np': 'भ्यागुतोलाई तिनका आफ्ना लिलीप्याडमा पुर्याउन मद्दत गर्नुहोस्। यद्यपि तिनीहरू नजिक देखिन्छन्, तर तिनीहरूलाई पुर्याउन flex-direction
र justify-content
दुबैको प्रयोग आवश्यक हुनेछ।
ध्यान दिनुहोस् कि जब तपाईं दिशा उल्टो पंक्ति वा स्तम्भमा सेट गर्नुहुन्छ, तब सुरु र अन्त्य पनि उल्टिन्छ।
Мэлхийнүүдэдflex-direction
болон justify-content
-г ашиглан сараана цэцэгсээ олоход нь туслаарай.flex-direction проперти column байх үед justify-content
босоо чиглэлд, align-items
хэвтээ чиглэлд өөрчлөгдөнө гэдгийг анхаарна уу.
Pomôžte žabkám nájsť ich lienky pomocou flex-direction
a justify-content
.
Všimnite si, že keď je smer flex stĺpec, justify-content
sa zmení na vertikálny a align-items
na horizontálny.
මැඬියන්ට ඔවුන්ගේ නෙළුම් කොළ වෙත යාමට උදව් කිරීමට flex-direction
සහ justify-content
භාවිතා කරන්න.
flex direction එක column වන විට, justify-content
සිරස් අතට වෙනස් වන අතර align-items
තිරස් වේ.
भ्यागुतोलाई flex-direction
र justify-content
प्रयोग गरेर तिनका लिलीप्याडहरूमा पुर्याउन मद्दत गर्नुहोस्।
ध्यान दिनुहोस् कि जब flex direction स्तम्भमा हुन्छ, justify-content
ठाडो दिशामा परिवर्तन हुन्छ र align-items
तेर्सो दिशामा सर्छ।
Мэлхийнүүдэд flex-direction
болон justify-content
-г ашиглан сараана цэцгээ олоход нь туслаарай.
Pomôžte žabkám nájsť ich lienky pomocou flex-direction
a justify-content
.
මැඬියන්ට ඔවුන්ගේ නෙළුම් කොළ වෙත යාමට උදව් කිරීමට flex-direction
සහ justify-content
භාවිතා කරන්න.
भ्यागुतोलाई flex-direction
र justify-content
प्रयोग गरेर तिनका लिलीप्याडमा पुर्याउन मद्दत गर्नुहोस्।
Мэлхийнүүдэд flex-direction
, justify-content
, align-items
-г ашиглан сараана цэцэгээ олоход нь туслаарай.
Pomôžte žabkám nájsť ich lienky pomocou flex-direction
a justify-content
.
මැඬියන්ට ඔවුන්ගේ නෙළුම් කොළ වෙත යාමට උදව් කිරීමට flex-direction
, justify-content
සහ align-items
භාවිතා කරන්න.
भ्यागुतोलाई flex-direction
, justify-content
, र align-items
प्रयोग गरेर तिनका लिलीप्याडमा पुर्याउन मद्दत गर्नुहोस्।
Заримдаа контейнерийн мөр, баганын дарааллыг өөрчлөх нь хангалтгүй байдаг. Эдгээр тохиолдлуудад бид order
пропертийг item бүрт тус тусад нь хэрэглэж болно. Анхны өгөгдмөлөөр items 0 гэсэн утгатай байдагч бид items-д эерэг эсвэл сөрөг (-2, -1, 0, 1, 2) гэх мэт утга оноож ашиглаж болно.
order
пропертийг ашиглан мэлхийнүүдийг сараана цэцэгт нь тохируулан дахин эрэмбэлээрэй.
Niekedy nestačí zmeniť poradie riadkov alebo stĺpcov kontajnera. V týchto prípadoch môžeme na jednotlivé položky použiť vlastnosť order
. V predvolenom nastavení majú položky hodnotu 0, ale pomocou tejto vlastnosti ju môžeme nastaviť aj na kladnú alebo zápornú hodnotu celého čísla (-2, -1, 0, 1, 2).
Pomocou vlastnosti order
môžete zmeniť poradie žiab podľa ich lilipadov.
සමහර අවස්ථාවලදී කන්ටේනරයේ පේළියක හෝ තීරුවක අනුපිළිවෙල reverse කිරීම ප්රමාණවත් නොවේ. මෙම අවස්ථා වලදී, අපට තනි අයිතම සඳහා order
ගුණාංගය යෙදිය හැකිය. අයිතමවල මෙහි මූලික අගය 0 වන නමුත් අපට එය ධන හෝ සෘණ පූර්ණ සංඛ්යා අගයකට (-2, -1, 0, 1, 2) සැකසීමට මෙම ගුණාංගය භාවිතා කළ හැක.
මැඬියන් ඔවුන්ගේ නෙළුම් කොළ වලට අනුව නැවත පිළිවෙල වෙනස් කිරීමට order
ගුණාංගය භාවිතා කරන්න.
कहिलेकाहीँ कन्टेनरको पंक्ति वा स्तम्भको क्रम उल्टाउनु मात्र पर्याप्त हुँदैन। यस्ता अवस्थामा, हामी order
प्रोपर्टीलाई व्यक्तिगत वस्तुहरूमा लागू गर्न सक्छौं। साधारणतया, वस्तुहरूको मान 0 हुन्छ, तर हामी यसलाई सकारात्मक वा नकारात्मक पूर्णांक मान (-2, -1, 0, 1, 2) मा सेट गर्न सक्छौं।
भ्यागुतोलाई तिनका लिलीप्याडको अनुसार पुनः क्रमबद्ध गर्न order
प्रोपर्टी प्रयोग गर्नुहोस्।
Улаан мэлхийг сараана цэцэг рүү илгээхийн тулд order
пропертийг ашиглана уу.
Pomocou vlastnosti order
pošlite červenú žabu na jej lilipad.
රතු මැඬියා ඔහුගේ නෙළුම් කොළය වෙත යැවීමට order
ගුණාංගය භාවිතා කරන්න.
रातो भ्यागुतोलाई उसको लिलीप्याडमा पठाउन order
प्रोपर्टी प्रयोग गर्नुहोस्।
એક બીજી પ્રોપર્ટી align-self
જેને આપણે દરેક item પાર અલગ અલગ રીતે લગાડી શકીએ છીએ .આ પ્રોપર્ટી align-items
ના મૂલ્યને સ્વીકારે છે પરંતુ કોઈ ખાસ item માટે જ .
Још једно својство које можеш применити на појединачним елементима је align-self
. Ово својство прихвата исте вредности као align-items
и примењује их на конкретном елементу.
Još jedno svojstvo koje možeš primjeniti na pojedinačnim elementima jealign-self
. Ovo svojstvo prihvata iste vrijednosti kao align-items
i primenjuje ih na konkretnom elementu.
Još jedno svojstvo koje možeš primijeniti na pojedinačnim elementima jealign-self
. Ovo svojstvo prihvaća iste vrijednosti kao align-items
i primjenjuje ih na konkretnom elementu.
Još jedno svojstvo koje možeš primijeniti na pojedinačnim elementima jealign-self
. Ovo svojstvo prihvaća iste vrijednosti kao align-items
i primjenjuje ih na konkretnom elementu.
Een andere eigenschap die je kan toepassen op individuele elementen is align-self
. Deze eigenschap aanvaard dezelfde waarden als align-items
maar wordt gebruikt om de waarde op individueel niveau te overschrijven.
align-self
என்ற மற்றொருproperty பயன்படுத்தி தனிப்பட்ட உருப்படிகளை சீரமைக்கலாம். இந்த property, align-items
மதிப்புகளை அப்படியே ஏற்றுக்கொள்ளும்.
మీరు వ్యక్తిగత వస్తువులకు వర్తించే మరొక ఆస్తి align-self
. ఈ ఆస్తి align-items
వలె అదే విలువలను మరియు నిర్దిష్ట వస్తువు కోసం దాని విలువను అంగీకరిస్తుంది.
Та тусдаа item-д хэрэглэж болох өөр нэг проперти бол align-self
юм. Энэ проперти нь align-items
-тай ижил утгуудыг болон тодорхой item-н утгыг хүлээн авдаг.
Ďalšou vlastnosťou, ktorú môžete použiť na jednotlivé položky, je align-self
. Táto vlastnosť prijíma rovnaké hodnoty ako align-items
a jej hodnota pre konkrétnu položku.
ඔබට තනි අයිතම සඳහා යෙදිය හැකි තවත් ගුණාංගයක් වන්නේ align-self
. මෙම ගුණාංගය align-items
හි අගයන් පිළිගන්නා අතර මෙහි අගය තනි නිශ්චිත අයිතමය සදහා වේ.
व्यक्तिगत वस्तुहरूमा तपाईंले प्रयोग गर्न सक्ने अर्को प्रोपर्टी align-self
हो। यस प्रोपर्टीले align-items
जस्तै मानहरू स्वीकार गर्दछ र विशेष वस्तुको लागि प्रयोग गर्न सकिन्छ।
Мэлхийнүүдийг зорьсон газарт нь хүргэхийн тулд order
-г align-self
-тэй хослуулаарай.
Kombináciou order
s align-self
pomôžete žabkám dostať sa na miesto určenia.
මැඬියන්ට ඔවුන්ගේ ගමනාන්තයට යෑමට උපකාර කිරීමට order
සමඟ align-self
සංයෝජනය කරන්න.
भ्यागुतोलाई तिनका गन्तव्यमा पुर्याउन order
लाई align-self
सँग मिलाएर प्रयोग गर्नुहोस्।
Өө үгүй ээ! Мэлхийнүүд бүгд ганцхан эгнээн дэх сараана цэцэгс дээр шахагдсан байна. Дараах утгуудыг хүлээн авах flex-wrap
пропертийг ашиглан тэдгээрийг тараагаарай:
nowrap
: Бүх items-г нэг мөрөнд багтаах. wrap
: Зарим items-г нэмэлт мөрүүд рүү илгээх.wrap-reverse
: Зарим items-г урвуу дараалалаар нэмэлт мөрүүд рүү илгээх. Ale nie! Všetky žaby sú natlačené v jednom rade lilií. Rozložte ich pomocou vlastnosti flex-wrap
, ktorá akceptuje nasledujúce hodnoty:
nowrap
: Každá položka sa zmestí do jedného riadku.wrap
: Položky sa obtáčajú do ďalších riadkov.wrap-reverse
: Položky sa obtáčajú do ďalších riadkov v opačnom poradí.මාර වැඩේනේ! ඔක්කොම මැඬියො ටික තනි නෙළුම් කොළ පේළියකට තද වෙලා. ඔවුන්ව පැතිරවීමට flex-wrap
ගුණාංගය භාවිතා කරන්න, එය පහත අගයන් පිළිගනී:
nowrap
: අයිතම ඔක්කොම තනි පේළියකට හැදෙනවා.wrap
: අයිතම පේළි කිහිපයකට හැදෙනවා.wrap-reverse
: අයිතම පේළි කිහිපයකට reverse එකට හැදෙනවා.ओहो! सबै भ्यागुताहरू एउटै पंक्तिको लिलीप्याडमा अटाएका छन्। तिनीहरूलाई flex-wrap
प्रोपर्टी प्रयोग गरेर फैलाउनुहोस्, जसले तलका मानहरू स्वीकार गर्दछ:
nowrap
: हरेक वस्तु एउटै लाइनमा अट्छ।wrap
: वस्तुहरू थप लाइनहरूमा फैलिन्छन्।wrap-reverse
: वस्तुहरू उल्टो दिशामा थप लाइनहरूमा फैलिन्छन्।Энэ мэлхийн армид flex-direction
болон flex-wrap
-н хослолыг ашиглан эмх цэгцтэй гурван багана үүсгэхэд тусална уу.
Pomôžte tejto armáde žiab vytvoriť tri usporiadané stĺpy pomocou kombinácie flex-direction
a flex-wrap
.
මෙම මැඬියන් සමූහයට පිළිවෙලට තීරු තුනක් සෑදීමට උදව් කිරීමට flex-direction
සහ flex-wrap
හි සංයෝජනයක් භාවිතා කරන්න.
भ्यागुताको यो समूहलाई flex-direction
र flex-wrap
को संयोजन प्रयोग गरी तीन व्यवस्थित स्तम्भहरूमा बनाउँन मद्दत गर्नुहोस्।
flex-direction
болон flex-wrap
гэх хоёр проперти маш олон удаа хамтдаа ашиглагддаг тул энэ хоёрийг нэгтгэн товчилсон пропертиflex-flow
бүтээгдсэн байна. Энэхүү проперти нь нөгөө хоёр пропертийн хоосон зайгаар тусгаарлагдсан хоёр утгыг хүлээн авдаг.
Жишээ нь, та flex-flow: row wrap
-г ашиглан мөрүүдийг тохируулж болно.
Өмнөх түвшинг давтахын тулд flex-flow
ашиглана уу.
Dve vlastnosti flex-direction
a flex-wrap
sa spolu používajú tak často, že na ich spojenie bola vytvorená skrátená vlastnosť flex-flow
. Táto skrátená vlastnosť akceptuje hodnotu dvoch vlastností oddelených medzerou.
Môžete napríklad použiť flex-flow: row wrap
na nastavenie riadkov a ich zabalenie.
Pokúste sa pomocou flex-flow
zopakovať predchádzajúcu úroveň.
flex-direction
and flex-wrap
යන ගුණාංග දෙක බොහෝ විට එකට භාවිතා වන අතර එම නිසා ඒවා එක් කර flex-flow
ලෙස තනි ගුණාංගයක් නිර්මාණය විය. මෙම නව ගුණාංගය, පෙර ගුණාංග දෙකේ අගයන් space එකකින් වෙන්කර පිළිගනී.
උදාහරණ වශයෙන්, අයිතම තිරස් පේළි කිහිපයකට සාදා ගැනීමට flex-flow: row wrap
භාවිතා කරන්න.
පෙර අභ්යාසය නැවත flex-flow
භාවිතායෙන් උත්සාහ කරන්න.
flex-direction
र flex-wrap
यी दुई प्रोपर्टीहरू प्रायः सँगै प्रयोग गरिन्छन्, त्यसैले यी दुईलाई संयोजन गर्न छोटकरी प्रोपर्टी flex-flow
बनाइएको हो। यस छोटकरी प्रोपर्टीले यी दुई प्रोपर्टीहरूको मानलाई स्पेसले अलग गरेर स्वीकार गर्दछ।
उदाहरणका लागि, पंक्ति बनाउँन र त्यसलाई फैलाउन flex-flow: row wrap
प्रयोग गर्न सक्नुहुन्छ।
पछिल्लो तह दोहोर्याउन flex-flow
प्रयोग गरेर प्रयास गर्नुहोस्।
Мэлхийнүүд цөөрмийн бүх хэсэгт тархсан боловч сараана цэцэгс контейнерийн дээд талд бөөгнөрсөн байна. Та align-content
-г ашиглан олон мөрүүд бие биенээсээ ямар зайтай байрлахыг тохируулж болно. Энэ проперти нь дараах утгуудыг авна:
flex-start
: Мөрүүдийг контейнерын дээд талд байрлуулах. flex-end
: Мөрүүдийг контейнерын ёроолд байрлуулах.center
: Мөрүүдийг контейнерын босоо төвд байрлуулах. space-between
: Мөрүүдийг хоорондоо ижил зайтай байхаар байрлуулах.space-around
: Мөрүүдийн эргэн тойрон нь ижил зайтай байхаар байрлуулах. stretch
: Контейнерт тохируулан мөрүүдийг сунган байрлуулах. Ойлгомжгүй байж магадгүй ч align-content
нь мөрүүдийн хоорондын зайг тодорхойлдог. Харин align-items
нь бүх items контейнертэйгээ харьцангуй хэрхэн байрлахыг тодорхойлдог. Зөвхөн нэг мөр байвал align-content
ямар ч нөлөө үзүүлэхгүй.
Žaby sú roztrúsené po celom jazierku, ale ľaliovníky sú zoskupené na jeho vrchole. Pomocou funkcie align-content
môžete nastaviť, ako budú viaceré riadky od seba vzdialené. Táto vlastnosť nadobúda nasledujúce hodnoty:
flex-start
: Čiary sú zabalené v hornej časti nádoby.flex-end
: Čiary sú zabalené v spodnej časti kontajnera.center
: Čiary sú zabalené vo vertikálnom strede nádoby.space-between
: Čiary sa zobrazujú s rovnakými rozstupmi medzi sebou.space-around
: Čiary sa zobrazujú s rovnakými rozstupmi okolo nich.stretch
: Čiary sú roztiahnuté tak, aby sa zmestili do kontajnera.Môže to byť mätúce, ale align-content
určuje medzery medzi riadkami, zatiaľ čo align-items
určuje, ako sú položky ako celok zarovnané v kontajneri. Ak je len jeden riadok, align-content
nemá žiadny účinok.
මැඬියන් පොකුණ පුරා පැතිරී ඇත, නමුත් නෙළුම් කොළ උඩට එකතු වෙලා. පේළි කිහිපයක් එකිනෙකින් වෙන් වී ඇති ආකාරය සැකසීමට align-content
භාවිතා කළ හැකිය. මෙම ගුණාංගය පහත අගයන් පිළිගනී:
flex-start
: කන්ටේනරයේ උඩට පේළි එකතු වෙනවා.flex-end
: කන්ටේනරයේ යටට පේළි එකතු වෙනවා.center
: කන්ටේනරයේ සිරස් මැදට පේළි එකතු වෙනවා.space-between
: පේළි අතර සමාන පරතරයක් සහිතව පෙන්වයි.space-around
: පේළි වටා සමාන පරතරයක් සහිතව පෙන්වයි.stretch
: කන්ටේනරයට ගැලපෙන පරිදි පේළි විශාල වෙයි.මෙය අවුල් සහගත විය හැක, නමුත් align-content
පේළි අතර පරතරය තීරණය කරන අතර, align-items
සමස්තයක් ලෙස අයිතම කන්ටේනරය තුළ පෙළගස්වන ආකාරය තීරණය කරයි. එක් පේළියක් පමණක් ඇති විට, align-content
හි බලපෑමක් නැත.
भ्यागुताहरू पोखरीभरि फैलिएका छन्, तर लिलीप्याडहरू माथि नै थुप्रिएका छन्। तपाईं align-content
प्रयोग गरेर धेरै पंक्तिहरू एक-अर्काबाट कति टाढा राख्ने भनेर सेट गर्न सक्नुहुन्छ। यस प्रोपर्टीले तलका मानहरू स्वीकार गर्दछ:
flex-start
: पंक्तिहरू कन्टेनरको माथि थुप्रिन्छन्।flex-end
: पंक्तिहरू कन्टेनरको तल थुप्रिन्छन्।center
: पंक्तिहरू कन्टेनरको ठ्याक्कै बीचमा थुप्रिन्छन्।space-between
: पंक्तिहरू बीचमा समान दूरीमा देखिन्छन्।space-around
: पंक्तिहरू चारैतिर समान दूरीमा देखिन्छन्।stretch
: पंक्तिहरू कन्टेनरमा फिट हुन फैलिन्छन्।यो अलि जटिल हुन सक्छ, तर align-content
ले पंक्तिहरूबीचको दूरी निर्धारण गर्दछ, जबकि align-items
ले कन्टेनरभित्र वस्तुहरूको समग्र रूपमा संरेखण निर्धारण गर्दछ। जब केवल एउटा पंक्ति हुन्छ, align-content
को कुनै प्रभाव हुँदैन।
ตอนนี้สายน้ำได้พาใบบัวไปรวมกันอยู่ด้านล่าง ใช้คำสั่ง align-content
เพื่อนำเจ้ากบไปที่นั่น
Одоо цөөрмийн урсгал нь сараана цэцэгсийг доод талд бөөгнөрүүлсэн байна. Мэлхийнүүдийг тийш чиглүүлэхийн тулд align-content
-г ашиглана уу.
Teraz prúd zviazal lilipady na dne. Použite align-content
, aby ste tam žaby nasmerovali.
अब धाराले लिलीप्याडहरू तल थुप्रिएका छन्। भ्यागुताहरूसँग जानका लागि align-content
प्रयोग गर्नुहोस्।
flex-direction
болон align-content
-н хослолыг ашиглан мэлхийнүүдийг сараана цэцэг рүү нь хүргэнэ үү.',
'sk': 'Žabky sa zabávali, ale je čas ísť domov. Použite kombináciu flex-direction
a align-content
, aby ste ich dostali na ich lilipady.
මැඬියො ටික සෙල්ලම් කළා , නමුත් දැන් ගෙදර යන්න වෙලාව හරි. මැඬියන්ට ඔවුන්ගේ නෙළුම් කොළ වෙත යාමට flex-direction
සහ align-content
හි සංයෝජනයක් භාවිතා කරන්න.
भ्यागुताहरूले पार्टी गरिसकेका छन्, तर अब घर जानु पर्ने समय आएको छ। उनीहरूलाई लिलीप्याडसम्म पुर्याउन flex-direction
र align-content
को संयोजन प्रयोग गर्नुहोस्।
Сүүлчийн удаа өөрийн сурсан CSS пропертинуудыг ашиглан мэлхийнүүдийг гэрт нь аваачина уу:
justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content
Vyveďte žaby domov naposledy pomocou vlastností CSS, ktoré ste sa naučili:
justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content
ඔබ ඉගෙන ගත් CSS ගුණාංග භාවිතයෙන් අවසන් වරට මැඬියන්ට ඔවුන්ගේ ස්ථානය සොයා ගැනීමට උදව් කරන්න:
justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content
अब भ्यागुताहरूलाई अन्तिम पटक घर ल्याउनका लागि तपाईंले सिकेका CSS सम्पत्तिहरू प्रयोग गर्नुहोस्:
justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content
Та яллаа! Flexbox-г сайн эзэмшсэнийхээ ачаар та бүх мэлхийнүүдийг сараана цэцэгтэй болгоход нь тусалж чадлаа. Тэд ямар их баяртай байгааг хараарай!
Хэрвээ энэ тоглоом таньд хөгжилтэй санагдсан бол Grid Garden-д зочлоорой. CSS layout-н өөр нэг хүчирхэг онцлогын талаар мэдэхийг хүсвэл Codepip-с бусад кодчилолын тоглоомуудыг олж тоглох боломжтой. Мөн Flexbox Froggy-г найзуудтайгаа хуваалцахаа мартуузай!
', 'sk': 'Vyhrali ste! Vďaka tvojmu majstrovstvu v ovládaní flexboxu si dokázal pomôcť všetkým žabkám k ich liliputánom. Len sa pozrite, ako skáču!
Ak sa vám tento článok páčil, určite navštívte stránku Grid Garden, kde sa dozviete o ďalšej novej výkonnej funkcii rozvrhnutia CSS. Ďalšie kódovacie hry nájdete aj na stránke Codepip. A nezabudnite sa podeliť o Flexbox Froggy so svojimi priateľmi!
', 'si': 'ඔබ දිනුම්! flexbox පිළිබඳ ඔබේ දැනුම නිසා, සියලුම මැඬියන්ට ඔවුන්ගේ නෙළුම් කොළ වෙත යාමට උදව් කිරීමට ඔබට හැකි විය. පොඩ්ඩක් බලන්න මෙයාලා කොච්චර සතුටින්ද කියලා!
ඔබ මෙය හොඳයි කියා හිතනවනම්, CSS layout හි තවත් වැදගත් දෙයක් ගැන දැන ගැනීමට Grid Garden වෙත පැමිණෙන්න. ඔබට coding ඉගෙන ගන්න පුළුවන් වෙනත් games Codepip තුල සොයා ගත හැකිය. Flexbox මැඬියා ඔබේ මිතුරන් සමඟ බෙදා ගැනීමට අමතක කරන්න එපා!
', + 'np': 'तपाईं जित्नुभयो! तपाईंको फ्लेक्सबक्समा माहिरता कारण, तपाईं सबै भ्यागुताहरूलाई तिनीहरूको लिलीप्याडसम्म मद्दत गर्न सफल हुनु भयो। तिनीहरूको हर्ष कस्तो देखिन्थ्यो भने!
यदि तपाईंले यो रमाइलो अनुभव गर्नुभयो भने, Grid Garden भ्रमण गर्नुहोस् र CSS लेआउटको अर्को शक्तिशाली नयाँ सुविधा सिक्नुस्। तपाईं अन्य कोडिङ खेलहरू पनि Codepip मा पाउन सक्नुहुन्छ। र, फ्लेक्सबक्स फ्रोग्गीलाई तपाईंका साथीहरूसँग सेयर गर्न नबिर्सनुहोस्!
', }, board: 'gyrgyrgyrgyrgyrgyrgyrgyrg', - classes: {'#pond, #background': 'wrap'}, + classes: { '#pond, #background': 'wrap' }, style: {}, before: "#pond {\n display: flex;\n", after: "}" diff --git a/js/messages.js b/js/messages.js index 3c76ef8..86d8619 100644 --- a/js/messages.js +++ b/js/messages.js @@ -30,7 +30,7 @@ var messages = { 'sv': 'Svenska', 'uk': 'Українська', 'hi': 'हिंदी', - 'gj' : 'ગુજરાતી', + 'gj': 'ગુજરાતી', 'nl': 'Nederlands', 'ta': 'தமிழ்', 'te': 'తెలుగు', @@ -50,6 +50,7 @@ var messages = { 'sk': 'Slovenčina', 'si': 'සිංහල', 'bn': 'বাংলা', + 'np': 'नेपाली', }, next: { 'en': 'Next', @@ -102,6 +103,7 @@ var messages = { 'sk': 'Pokračovať', 'si': 'ඊළඟ', 'bn': 'পরবর্তী', + 'np': 'अर्को', }, labelFooter: { 'en': 'Flexbox Froggy is created by', @@ -154,6 +156,7 @@ var messages = { 'sk': 'Flexbox Froggy vytvoril', 'si': 'Flexbox මැඬියා නිර්මාණය කළේ', 'bn': 'Flexbox Froggy তৈরি করেছে', + 'np': 'Flexbox Froggy को निर्माता', }, labelLevel: { 'en': 'Level', @@ -206,6 +209,7 @@ var messages = { 'sk': 'Úroveň', 'si': 'අභ්යාසය', 'bn': 'লেভেল', + 'np': 'स्तर', }, labelOf: { 'en': 'of', @@ -255,9 +259,10 @@ var messages = { 'gl': 'de', 'th': '/', 'mn': '/', - 'sk':'z', + 'sk': 'z', 'si': '/', 'bn': '/', + 'np': '/', }, title: { 'en': 'Flexbox Froggy - A game for learning CSS flexbox', @@ -310,6 +315,7 @@ var messages = { 'sk': 'Flexbox Froggy - Hra na učenie CSS flexbox', 'si': 'Flexbox මැඬියා - CSS flexbox ඉගෙනීමේ ක්රීඩාවක්', 'bn': 'Flexbox Froggy - CSS flexbox শেখার একটি গেইম', + 'np': 'Flexbox Froggy - CSS Flexbox सिक्नको लागि एउटा खेल', }, labelReset: { 'en': 'Reset', @@ -362,6 +368,7 @@ var messages = { 'sk': 'Reštart', 'si': 'නැවත මුල සිට', 'bn': 'রিসেট', + 'np': 'रीसेट', }, warningReset: { 'en': 'Are you sure you want to reset the game?\n\nYour saved progress will be lost and you\'ll be sent to the start of the game.', @@ -414,11 +421,12 @@ var messages = { 'sk': 'Určite chcete resetovať hru?\n\nVáš uložený postup sa stratí a budete poslaní na začiatok hry.', 'si': 'ඔබට ක්රීඩාව නැවත මුල සිට කිරීමට අවශ්ය බව විශ්වාසද?\n\nඔබගේ සුරැකි ප්රගතිය නැති වී ඔබව ක්රීඩාවේ ආරම්භයට යවනු ඇත.', 'bn': 'আপনি কি নিশ্চিত গেইমটি রিসেট করার ব্যপারে?\n\nআপনার সেইভ করা অংশ হারিয়ে যাবে এবং আপনাকে গেইমের একদম শুরুতে পাঠানো হবে।', + 'np': 'के तपाईं पक्का हुनुहुन्छ कि तपाईं खेल रिसेट गर्न चाहनुहुन्छ?\n\nतपाईंको बचत गरिएको प्रगति हराउनेछ र तपाईंलाई खेलको सुरुआतमा पठाइनेछ।', }, gridGarden: { 'en': 'Want to learn more CSS? Play', 'af': 'Wil jy CSS grid leer? Speel', - 'gj':'શું તમે CSS Grid શીખવા ઈચ્છો છો ? ચાલો રમવા..!', + 'gj': 'શું તમે CSS Grid શીખવા ઈચ્છો છો ? ચાલો રમવા..!', 'he': 'רוצה ללמוד CSS grid? שחק', 'bs': 'Želiš naučiti CSS grid? Igraj', 'hr': 'Želiš li naučiti CSS grid? Igraj', @@ -450,6 +458,7 @@ var messages = { 'sk': 'Chcete sa naučiť mriežku CSS? Zahrajte si', 'si': 'CSS grid ඉගෙන ගැනීමට අවශ්යද? මෙතනින් යන්න', 'bn': 'CSS grid শিখতে চান?তাহলে খেলুন', + 'np': 'अझ बढी CSS सिक्न चाहनुहुन्छ? खेल्नुहोस्', }, labelLanguage: { 'en': 'Language', @@ -480,7 +489,8 @@ var messages = { 'th': 'ภาษา', 'mn': 'Хэл', 'sk': 'Jazyk', - 'bn': 'ভাষা' + 'bn': 'ভাষা', + 'np': 'भाषा', }, labelSettings: { 'en': 'Settings', @@ -509,7 +519,8 @@ var messages = { 'th': 'การตั้งค่า', 'mn': 'Тохиргоо', 'sk': 'Nastavenia', - 'bn': 'সেটিংস' + 'bn': 'সেটিংস', + 'np': 'सेटिङ', }, labelDifficulty: { 'en': 'Difficulty', @@ -539,7 +550,8 @@ var messages = { 'th': 'ความยาก', 'mn': 'Хүндрэл', 'sk': 'Obtiažnosť', - 'bn': 'কঠিনতা' + 'bn': 'কঠিনতা', + 'np': 'कठिनाई', }, labelColorblind: { 'en': 'Colorblind Mode', @@ -567,7 +579,8 @@ var messages = { 'th': 'โหมดตาบอดสี', 'mn': 'Colorblind Mode', 'sk': 'Režim pre farboslepých', - 'bn': 'কালারব্লাইন্ড মোড' + 'bn': 'কালারব্লাইন্ড মোড', + 'np': 'रङ्ग अन्धता मोड', }, labelColorblindOff: { 'en': 'Off', @@ -594,7 +607,8 @@ var messages = { 'th': 'ปิด', 'mn': 'Унтраах', 'sk': 'Vypnutie', - 'bn': 'বন্ধ' + 'bn': 'বন্ধ', + 'np': 'बन्द', }, labelColorblindOn: { 'en': 'On', @@ -621,7 +635,8 @@ var messages = { 'th': 'เปิด', 'mn': 'Асаах', 'sk': 'Zapnutie', - 'bn': 'চালু' + 'bn': 'চালু', + 'np': 'चालु', }, labelDifficultyEasy: { 'en': 'Beginner', @@ -651,7 +666,8 @@ var messages = { 'th': 'มือใหม่', 'mn': 'Амархан', 'sk': 'Začiatočník', - 'bn': 'বিগিনার' + 'bn': 'বিগিনার', + 'np': 'सुरुआतकर्ता', }, labelDifficultyMedium: { 'en': 'Intermediate - No Directions', @@ -681,12 +697,13 @@ var messages = { 'th': 'ระดับกลาง - ไม่มีคำใบ้', 'mn': 'Дунд - No Directions', 'sk': 'Stredne pokročilý - bez pokynov', - 'bn': 'মাঝারি স্তর - কোন দিক নির্দেশনা নেই' + 'bn': 'মাঝারি স্তর - কোন দিক নির্দেশনা নেই', + 'np': 'मध्यम स्तर - कुनै निर्देशन छैन', }, labelDifficultyHard: { 'en': 'Expert - No Directions & Random Levels', 'af': 'Kenner - Geen direksies & willekeurige vlakke', - 'gj':'મુશ્કેલ - કોઈ દિશા વિના અને રેન્ડમ', + 'gj': 'મુશ્કેલ - કોઈ દિશા વિના અને રેન્ડમ', 'he': 'קשה - בלי הכוונה ובשלבים רנדומלים', 'bs': 'Expert - Bez pomoći i nasumični nivoi', 'hr': 'Expert - Bez pomoći i nasumični nivoi', @@ -711,6 +728,7 @@ var messages = { 'th': 'เชี่ยวชาญ - ไม่มีคำใบ้ & สุ่มเลเวล', 'mn': 'Хэцүү - No Directions & Дурын үеүүд', 'sk': 'Expert - žiadne pokyny a náhodné úrovne', - 'bn': 'অভিজ্ঞ - কোন দিক নির্দেশনা নেই এবং স্তর গুলো হবে এলোমেলো' + 'bn': 'অভিজ্ঞ - কোন দিক নির্দেশনা নেই এবং স্তর গুলো হবে এলোমেলো', + 'np': 'विशेषज्ञ - कुनै निर्देशन छैन र यादृच्छिक स्तरहरू', } };