Full Code of thomaspark/flexboxfroggy for AI

Repository: thomaspark/flexboxfroggy
Branch: main
Commit: 9a6feab850a5
Files: 14
Total size: 621.0 KB

Directory structure:
gitextract_bsrvqa1r/

├── .gitignore
├── .nojekyll
├── CNAME
├── LICENSE
├── README.md
├── _config.yml
├── ads.txt
├── css/
│   └── style.css
├── index.html
├── js/
│   ├── docs.js
│   ├── game.js
│   ├── levels.js
│   └── messages.js
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.idea/*


================================================
FILE: .nojekyll
================================================


================================================
FILE: CNAME
================================================
flexboxfroggy.com

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2015 Thomas Park

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



================================================
FILE: README.md
================================================
Flexbox Froggy
=======

Flexbox Froggy is a game for learning CSS flexbox. Check it out at [flexboxfroggy.com](https://flexboxfroggy.com).

Read [this blog post](https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/) for background on the project.

![FontCDN screenshot](./images/screenshot.png)

## Author

Thomas Park

* [Twitter](https://twitter.com/thomashpark)
* [Homepage](https://thomaspark.co)
* [GitHub](https://github.com/thomaspark)

## Translators

My gratitude to these contributors for localizing Flexbox Froggy. This is what open source is all about.

* Afrikaans by [Andrea Zonnekus](https://github.com/andreazonnekus)
* Arabic by [Mahmoud Al-Omoush](https://github.com/m7modg97)
* Azerbaijani by [jalalbmnf](https://github.com/jalalbmnf)
* Bengali by [Ayemun Hossain](https://github.com/AyemunHossain)
* Bosnian by [Haris Hamzić](https://github.com/hamzic2019)
* Bulgarian by [Mihail Gaberov](https://github.com/mihailgaberov)
* Burmese by [Si Thu Hlaing](https://github.com/sithulaing)
* Catalan by [Xavier Gaya](https://github.com/xavigaya)
* Chinese Simplified by [Tim Guo](https://github.com/timguoqk)
* Chinese Traditional by [sunsheeppoplar](https://github.com/sunsheeppoplar)
* Croatian by [diomed](https://github.com/diomed)
* Danish by [Frederik Jacobsen](https://github.com/fkj)
* Dutch by [Peter Vermeulen](https://github.com/peterver)
* Czech by [Ondřej Hruška](https://github.com/MightyPork)
* Esperanto by [Harvey Stroud](https://github.com/harveystroud)
* Estonian by [Sten Orasmäe](https://github.com/sten9911)
* Farsi by [Ali Haddad](https://github.com/alihaddadkar)
* Finnish by [Minna N.](https://github.com/minna-xD)
* French by [Karl Thibault](https://github.com/Notuom)
* Galician by [Pilar Mera](https://github.com/decrecementofeliz)
* German by [Thorsten Frommen](https://github.com/tfrommen)
* Greek by [lmintmate](https://github.com/lmintmate)
* Gujarati by [Harshhh](https://github.com/ozaharsh95)
* Hebrew by [Omri Attiya](https://github.com/omriattiya)
* Hindi by [Shubham Pandey](https://github.com/shubham9411)
* Hungarian by [Adam Graf](https://github.com/netgrafe)
* Indonesian by [gabesx](https://github.com/gabesx)
* Italian by [Matteo Bandiera](https://github.com/matteobandiera)
* Japanese by [Ginpei](https://github.com/ginpei)
* Korean by [Meen Chul Kim](https://github.com/liberaliscomputing)
* Latvian by [Arturs Kirtovskis](https://github.com/akirtovskis)
* Lithuanian by [Justas Maziliauskas](https://github.com/justutiz)
* Macedonian by [David Timovski](https://github.com/davidtimovski)
* Malayalam by [Agney Menon](https://github.com/BoyWithSilverWings)
* Mongolian by [Turuu](https://github.com/TuruuDo)
* Nepali by [Kamal Ale Magar](https://github.com/KamalAle12)
* Norwegian by [Melroy Dsouza](https://github.com/dsouzamelroy2007)
* Polish by [eLGi](https://github.com/eLGi)
* Portuguese by [Marcus Tenório](https://github.com/mvtenorio)
* Romanian by [Vlad](https://github.com/pckltr)
* Russian by [Artyom Vozhzhov](https://github.com/artem328)
* Serbian by [Danko Milutinovic](https://github.com/dankoknad)
* Sinhala by [Nirmal Chamika](https://github.com/NimaChamika)
* Slovak by [Joe Henthorn](https://github.com/jjhen99)
* Spanish by [Manuel González](https://github.com/manuelitox)
* Swedish by [Martin Ohlson](https://github.com/martinkrulltott)
* Tamil by [Galeel Bhasha](https://github.com/gbhasha)
* Telugu by [Sai Venkat Balabadruni](https://github.com/Thunderbolt2-o)
* Thai by [Anurat Chapanond](https://github.com/anurat)
* 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)
* Yoruba by [Oluwafisayomi Balogun](https://github.com/oluwafisayomi-balogun)

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.

## Copyright and License

Copyright 2015-2023 Thomas Park. Code released under [the MIT License](https://github.com/thomaspark/flexboxfroggy/blob/gh-pages/LICENSE). Images released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/legalcode.txt).


================================================
FILE: _config.yml
================================================
include: [".nojekyll", "node_modules"]


================================================
FILE: ads.txt
================================================
google.com, pub-9569380550956585, DIRECT, f08c47fec0942fa0

================================================
FILE: css/style.css
================================================
* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

html[lang="fa"] #docs,
html[lang="fa"] #instructions,
html[lang="fa"] #credits .translate,
a[href="#fa"],
html[lang="he"] #docs,
html[lang="he"] #instructions,
html[lang="he"] #credits .translate,
a[href="#he"],
html[lang="ar"] #docs,
html[lang="ar"] #instructions,
html[lang="ar"] #credits .translate,
a[href="#ar"] {
  direction: rtl;
}

html[lang="fa"] #docs,
html[lang="fa"] #instructions,
html[lang="fa"] #credits .translate,
a[href="#fa"] {
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

body {
  display: flex;
  min-width: 600px;
  margin: 0;
  background-color: #43A047;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'PT Sans', sans-serif;
}

#sidebar {
  width: 50%;
  min-width: 300px;
  padding: 2em;
  background-color: #43A047;
  font-size: 15px;
}

.header {
  display: flex;
  flex-wrap: wrap;
  margin-top: -0.5rem;
  justify-content: space-between;
}

.title {
  margin: 0.5rem 0 0;
  text-transform: uppercase;
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
}

pre {
  margin: 0;
}

code {
  padding: 0 2px;
  background-color: rgba(255, 255, 255, 0.2);
  font-family: 'Source Code Pro', monospace;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

li {
  line-height: 1.5;
}

a {
  color: rgba(255, 255, 255, 0.7);
}

a:hover {
  color: #fff;
}

.help {
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.tooltip {
  position: absolute;
  display: inline-block;
  max-width: 350px;
  padding: 1em 1em;
  background-color: #2c3e50;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  z-index: 60;
}

.tooltip:after {
  content: '';
  position: absolute;
  top: -12px;
  left: 12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #2c3e50;
}

#instructions .tooltip code {
  cursor: pointer;
}

#share {
  display: none;
  margin-bottom: 3em;
  text-align: center;
}

.fb-like {
  z-index: 20;
  vertical-align: top;
}

.games {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.games a {
  position: relative;
  display: inline-block;
  width: calc(50% - 0.25rem);
  border-radius: 6px;
  overflow:  hidden;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

.games a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top:  0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s;
}

.games a:hover::before {
  background-color: rgba(0, 0, 0, 0.1);
}

.games a::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  padding: 1rem;
  font-family: 'Fredoka One', cursive;
}

.games a img {
  width: 100%;
  height: 100%;
}

#instructions {
  padding-top: 1rem;
}

#instructions,
#instructions p,
#instructions ul {
	/* helps prevent the difficulty animation from jumping */
	margin: 0;
  padding-bottom: 1em;
}

#editor {
  position: relative;
}

#editor,
pre {
  font-family: 'Source Code Pro', monospace;
  font-size: 16px;
  line-height: 1.5;
  color: #777;
}

#css {
  height: 260px;
  position: relative;
  padding: 10px 10px 10px 40px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.line-numbers {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 10px 6px;
  text-align: right;
  background-color: #999;
  color: #D5D5D5;
}

#code {
  display: block;
  width: calc(100% - 16px);
  height: 24px;
  margin-left: 16px;
  border: none;
  font-family: 'Source Code Pro', monospace;
  font-size: 16px;
  outline: none;
  resize: none;
  overflow: auto;
}

#level-counter {
  position: relative;
  display: inline-block;
  height: 30px;
  margin-top: 0.5rem;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#levelsWrapper {
  display: none;
  top: 30px;
  right: 31px;
  max-width: 160px;
  padding: 1em 0.5em;
  margin-top: 12px;
  z-index: 80;
}

#levelsWrapper:after {
  left: calc(50% - 12px);
}

#levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.level-marker {
  float: left;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 2px;
  line-height: 26px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid transparent;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

.level-marker.current,
.level-marker:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.level-marker.solved {
  background-color: #228B24;
}

#level-indicator,
.arrow {
  float: left;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.2);
}

#level-indicator {
  display: inline-block;
  width: 160px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

#labelLevel {
  margin-left: 5px;
}

.caret {
  display: inline-block;
  margin-left: 2px;
}

#level-indicator:hover,
.arrow:not(.disabled):hover {
  background-color: rgba(255, 255, 255, 0.4);
}

#labelReset {
  margin-top: 1em;
  text-align: center;
  cursor: pointer;
}

.arrow {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.5em 0.2em;
  cursor: pointer;
}

.arrow.left {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px 0 0 4px;
}

.arrow.right {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 4px 4px 0;
}

.arrow.left:not(.disabled):hover,
.arrow.right:not(.disabled):hover {
  border-color: transparent;
}

.arrow.disabled {
  opacity: 0.5;
}

.triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.left .triangle {
  border-right: 11px solid rgba(255, 255, 255, 0.7);;
}

.right .triangle {
  border-left: 11px solid rgba(255, 255, 255, 0.7);;
}

button {
  display: inline-block;
  padding: 0.4em 0.8em;
  background-color: #D11606;
  border: none;
  border-radius: 4px;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

button:active {
  outline: none;
}

button:not(.disabled):hover {
  background-color: #F12D22;
}

#next {
  position: absolute;
  right: 1em;
  bottom: 1em;
  padding-top: 0.3em;
}

.animation {
  animation: tada 1s, pulse 2s infinite 2s;
}

#next.disabled {
  opacity: 0.5;
}

.credits {
  margin-top: 1.5em;
  line-height: 1.5em;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

#settings {
  position: relative;
}

.toggle {
  display: inline-block;
  padding: 1px 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  user-select: none;
}

#settings .tooltip {
  display: none;
  bottom: 30px;
  left: 0px;
  width: 275px;
  max-width: 275px;
  padding: 1em;
  text-align: left;
  z-index: 80;
}

#settings .tooltip:after {
  top: auto;
  bottom: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #2c3e50;
  border-bottom: none;
}

#settings section {
  margin: 0.5rem 0;
}

#settings h4 {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

#board {
  position: sticky;
  top: 0;
  width: 50vw;
  height: 50vw;
  min-width: 300px;
  min-height: 300px;
  max-width: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

#pond,
#background {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
}

#background {
  z-index: 10;
  border-radius: 0 0 0 10px;
  background-color: #1F5768;
}

#pond {
  z-index: 20;
}

.lilypad,
.frog {
  position: relative;
  width: 20%;
  height: 20%;
  overflow: hidden;
}

.frog:nth-child(1) {
  view-transition-name: --frog1;
}

.frog:nth-child(2) {
  view-transition-name: --frog2;
}

.frog:nth-child(3) {
  view-transition-name: --frog3;
}

.frog:nth-child(4) {
  view-transition-name: --frog4;
}

.frog:nth-child(5) {
  view-transition-name: --frog5;
}

.frog:nth-child(6) {
  view-transition-name: --frog6;
}

.frog:nth-child(7) {
  view-transition-name: --frog7;
}

.frog:nth-child(8) {
  view-transition-name: --frog8;
}

.frog:nth-child(9) {
  view-transition-name: --frog9;
}

.frog:nth-child(10) {
  view-transition-name: --frog10;
}

.frog:nth-child(11) {
  view-transition-name: --frog11;
}

.frog:nth-child(12) {
  view-transition-name: --frog12;
}

.frog:nth-child(13) {
  view-transition-name: --frog13;
}

.frog:nth-child(14) {
  view-transition-name: --frog14;
}

.frog:nth-child(15) {
  view-transition-name: --frog15;
}

::view-transition-old(--frog1),
::view-transition-new(--frog1),
::view-transition-old(--frog2),
::view-transition-new(--frog2),
::view-transition-old(--frog3),
::view-transition-new(--frog3),
::view-transition-old(--frog4),
::view-transition-new(--frog4),
::view-transition-old(--frog5),
::view-transition-new(--frog5),
::view-transition-old(--frog6),
::view-transition-new(--frog6),
::view-transition-old(--frog7),
::view-transition-new(--frog7),
::view-transition-old(--frog8),
::view-transition-new(--frog8),
::view-transition-old(--frog9),
::view-transition-new(--frog9),
::view-transition-old(--frog10),
::view-transition-new(--frog10),
::view-transition-old(--frog11),
::view-transition-new(--frog11),
::view-transition-old(--frog12),
::view-transition-new(--frog12),
::view-transition-old(--frog13),
::view-transition-new(--frog13),
::view-transition-old(--frog14),
::view-transition-new(--frog14),
::view-transition-old(--frog15),
::view-transition-new(--frog15), {
  height: 100%;
}

.frog.bounceOutUp {
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  -ms-animation-delay: .6s;
  animation-delay: .6s;
}

.frog .bg.bounce {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  animation-duration: 2s;
}

.frog.yellow .bg.bounce {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -ms-animation-delay: .3s;
  animation-delay: .3s;
}

.frog.red .bg.bounce {
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  -ms-animation-delay: .6s;
  animation-delay: .6s;
}

.lilypad .bg,
.frog .bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.frog .bg {
  background-size: 60% 60%;
}

.lilypad.green .bg {
  background-image: url("../images/lilypad-green.svg");
}

.lilypad.green.cb-friendly .bg {
  background-image: url("../images/lilypad-green-color-assist.svg");
}

.lilypad.red .bg {
  background-image: url("../images/lilypad-red.svg");
}

.lilypad.red.cb-friendly .bg {
  background-image: url("../images/lilypad-red-color-assist.svg");
}

.lilypad.yellow .bg {
  background-image: url("../images/lilypad-yellow.svg");
}
.lilypad.yellow.cb-friendly .bg {
  background-image: url("../images/lilypad-yellow-color-assist.svg");
}

.frog.green .bg {
  background-image: url("../images/frog-green.svg");
}

.frog.green.cb-friendly .bg {
  background-image: url("../images/frog-green-color-assist.svg");
}

.frog.red .bg {
  background-image: url("../images/frog-red.svg");
}

.frog.red.cb-friendly .bg {
  background-image: url("../images/frog-red-color-assist.svg");
}

.frog.yellow .bg {
  background-image: url("../images/frog-yellow.svg");
}

.frog.yellow.cb-friendly .bg {
  background-image: url("../images/frog-yellow-color-assist.svg");
}

.wrap {
  flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
  body {
    flex-direction: column-reverse;
    align-items: center;
    min-width: 100vw;
  }

  body,
  #sidebar {
    font-size: 13px;
  }

  #sidebar {
    width: 100%;
  }

  #background {
    border-radius: 0 0 10px 10px;
  }

  .header {
    justify-content: center;
  }

  .title {
    font-size: 26px;
  }

  #labelFooter {
    display: none;
  }
}

/* Native by BuySellAds */
.native-ad {
  display: block;
  padding: 10px 20px 8px;
  border-radius: 4px;
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .03) 5px, hsla(0, 0%, 0%, .03) 10px) hsla(0, 0%, 0%, .03);
  margin-top: 1.5em;
  font-size: 12px;
}

.native-ad a {
  text-decoration: none;
  display: block;
  line-height: 1.5;
}


.native-ad .sponsor {
  position: relative;
  top: -1px;
  padding: 3px 4px 2px;
  margin-right: 4px;
  border: solid 1px currentColor;
  border-radius: 2px;
  color: currentColor;
  content: "Sponsor";
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 600;
  line-height: 1;
}



================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flexbox Froggy - A game for learning CSS flexbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:url"           content="https://flexboxfroggy.com">
    <meta property="og:type"          content="website">
    <meta property="og:title"         content="Flexbox Froggy">
    <meta property="og:description"   content="A game for learning CSS flexbox">
    <meta property="og:image"         content="https://flexboxfroggy.com/images/screenshot.png">
    <meta property="fb:app_id"        content="916849395036923">
    <meta name="twitter:url"          content="https://flexboxfroggy.com">
    <meta name="twitter:title"        content="Flexbox Froggy">
    <meta name="twitter:description"  content="A game for learning CSS flexbox">
    <meta name="twitter:image"        content="https://flexboxfroggy.com/images/screenshot.png">
    <meta name="google-adsense-account" content="ca-pub-9569380550956585">
    <link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
    <link href='https://fonts.googleapis.com/css?family=PT+Sans|Fredoka+One|Source+Code+Pro' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <section id="sidebar">
      <div class="header">
        <div>
          <h1 class="title">Flexbox Froggy</h1>
        </div>
        <div id="level-counter">
          <span class="arrow left">
            <span class="triangle"></span>
          </span>
          <span id="level-indicator">
            <span id="labelLevel" class="translate">Level</span>
            <span class="current">1</span>
            <span id="labelOf" class="translate">of</span>
            <span class="total">1</span>
            <span class="caret">▾</span>
          </span>
          <span class="arrow right">
            <span class="triangle"></span>
          </span>
          <div id="levelsWrapper" class="tooltip">
            <div id="levels"></div>
            <div id="labelReset" class="translate">Reset</div>
          </div>
        </div>
      </div>
      <p id="instructions"></p>
      <div id="editor">
        <div id="css">
          <div class="line-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
          <pre id="before"></pre>
          <textarea id="code" autofocus autocapitalize="none" spellcheck="false"></textarea>
          <pre id="after"></pre>
        </div>
        <button id="next" class="translate">Next</button>
      </div>
      <div id="share">
        <div class="games">
          <a target="_blank" data-title="Grid Garden" href="https://codepip.com/games/grid-garden/">
            <img src="images/games/grid-garden.png" alt="Grid Garden">
          </a>
          <a target="_blank" data-title="Anchoreum" href="https://codepip.com/games/anchoreum/">
            <img src="images/games/anchoreum.png" alt="Anchoreum">
          </a>
          <a target="_blank" data-title="Disarray" href="https://codepip.com/games/disarray/">
            <img src="images/games/disarray.png" alt="Disarray">
          </a>
          <a target="_blank" data-title="CSS Scoops" href="https://codepip.com/games/css-scoops/">
            <img src="images/games/css-scoops.png" alt="CSS Scoops">
          </a>
        </div>
      </div>

      <div class="credits">
        <span id="labelFooter" class="translate">Flexbox Froggy is created by</span>
        <a href="https://codepip.com">Codepip</a> •
        <a href="https://youtube.com/codepip">YouTube</a> •
        <a href="https://twitter.com/playcodepip">Twitter</a> •
        <a href="https://github.com/thomaspark/flexboxfroggy/">GitHub</a> •
        <span id="settings">
          <span id="labelSettings" class="toggle translate">Settings</span>
          <span class="tooltip">
            <section>
              <h4 id="labelLanguage" class="translate">Language</h4>
              <select id="language">
                <option value="en">English</option>
                <option value="es">Español</option>
                <option value="fr">Français</option>
                <option value="de">Deutsch</option>
                <option value="nl">Nederlands</option>
                <option value="pt-br">Português</option>
                <option value="ca">Català</option>
                <option value="gl">Galego</option>
                <option value="it">Italiano</option>
                <option value="sv">Svenska</option>
                <option value="no">Norsk</option>
                <option value="fi">Suomi</option>
                <option value="da">Dansk</option>
                <option value="pl">Polski</option>
                <option value="cs">Česky</option>
                <option value="sk">Slovenčina</option>
                <option value="hu">Magyar</option>
                <option value="ro">Română</option>
                <option value="bg">Български</option>
                <option value="et">Eesti</option>
                <option value="lv">Latviešu</option>
                <option value="lt">Lietuvių</option>
                <option value="uk">Українська</option>
                <option value="ru">Русский</option>
                <option value="sr">Српски</option>
                <option value="bs">Bosanski</option>
                <option value="hr">Hrvatski</option>
                <option value="mk">Македонски</option>
                <option value="mn">Монгол хэл</option>
                <option value="el">Ελληνικά</option>
                <option value="tr">Türkçe</option>
                <option value="az">Azərbaycanca</option>
                <option value="he">עברית</option>
                <option value="ar">العربية</option>
                <option value="fa">فارسی</option>
                <option value="hi">हिंदी</option>
                <option value="bn">বাংলা</option>
                <option value="te">తెలుగు</option>
                <option value="ta">தமிழ்</option>
                <option value="gj">ગુજરાતી</option>
                <option value="si">සිංහල</option>
                <option value="ml">മലയാളം</option>
                <option value="np">नेपाली</option>
                <option value="zh-cn">简体中文</option>
                <option value="zh-tw">繁體中文</option>
                <option value="ja">日本語</option>
                <option value="ko">한국어</option>
                <option value="vi">Tiếng Việt</option>
                <option value="th">ภาษาไทย</option>
                <option value="my">မြန်မာ</option>
                <option value="id">Bahasa Indonesia</option>
                <option value="af">Afrikaans</option>
                <option value="yo">Yoruba</option>
                <option value="eo">Esperanto</option>
              </select>
            </section>
            <section>
              <h4 id="labelDifficulty" class="translate">Difficulty</h4>
              <form id="difficulty">
                <div>
                  <input type="radio" name="difficulty" id="difficultyEasy" value="easy" checked>
                  <label id="labelDifficultyEasy" for="difficultyEasy" class="translate">Beginner</label>
                </div>
                <div>
                  <input type="radio" name="difficulty" id="difficultyMedium" value="medium">
                  <label id="labelDifficultyMedium" for="difficultyMedium" class="translate">Intermediate - No Directions</label>
                </div>
                <div>
                  <input type="radio" name="difficulty" id="difficultyHard" value="hard">
                  <label id="labelDifficultyHard" for="difficultyHard" class="translate">Expert - No Directions &amp; Random Levels</label>
                </div>
              </form>
            </section>
            <section>
              <h4 id="labelColorblind" class="translate">Colorblind Mode</h4>
              <form id="colorblind">
                <div>
                  <div>
                    <input type="radio" name="colorblind" id="colorblindOff" value="false" checked>
                    <label id="labelColorblindOff" for="colorblindOff" class="translate">Off</label>
                  </div>
                  <div>
                    <input type="radio" name="colorblind" id="colorblindOn" value="true">
                    <label id="labelColorblindOn" for="colorblindOn" class="translate">On</label>
                  </div>
              </form>
            </section>
          </span>
        </span>
      </div>
      <div class="credits" style="margin-bottom: 1rem;">
        <span id="gridGarden" class="translate">Want to learn more CSS? Play</span> <a href="https://codepip.com/games/grid-garden/">Grid Garden</a> or <a href="https://codepip.com/games/anchoreum/">Anchoreum</a>.
      </div>
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9569380550956585" crossorigin="anonymous"></script>
      <!-- Flexbox Froggy Banner -->
      <ins class="adsbygoogle"
           style="display:inline-block;width:728px;height:90px;max-width:100%;margin-inline:auto"
           data-ad-client="ca-pub-9569380550956585"
           data-ad-slot="3755658935"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </section>
    <section id="view">
      <div id="board">
        <div id="pond">
        </div>
        <div id="background">
        </div>
      </div>
    </section>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="js/levels.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/messages.js"></script>
    <script src="js/game.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-23019901-13', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>



================================================
FILE: js/docs.js
================================================
var docs = {
  'align-content': {
    'en': '<p>Aligns a flex container\'s lines within the flex container when there is extra space on the cross-axis.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'bn': '<p>যদি cross-axis এ অতিরিক্ত যায়গা থাকে তাহলে flex container লাইন গুলোকে কে flex container এর ভিতরেই সারিবদ্ধ করে।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'af': '<p>Rig die flex houer se lyne binne die flex houer wanneer daar ekstra spasie is op die kruis-as. </p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (verstek)</code>',
    'he': '<p>יישור שורות בתוך ה-flex כשיש מקום מיותר בציר המשני.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ro': '<p>Aliniază liniile unui container flex cu containerul flex cand există spațiu în plus pe axa transversală.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'bg': '<p>Подравнява реводете на flex контейнера вътре в него ако има допълнително място по вртикалата.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'de': '<p>Richtet die Zeilen innerhalb eines flex-Containers aus, wenn auf der Querachse Platz ist.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'pt-br': '<p>Alinha as linhas dentro de um container flex quando há espaço sobrando no eixo cruzado.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'es': '<p>Alinea las líneas de un contenedor flex cuando exista más espacio en el eje transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'fr': '<p>Aligne les lignes d\'un conteneur flex à l\'intérieur du conteneur flex quand il y a de l\'espace superflu sur l\'axe transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ru': '<p>Выравнивает ряды flex-контейнера внутри него (работает только, если элементы расположены больше чем в один ряд).</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'fa': '<p>فرض کنید که ارتفاع flex-container بیشتر از فضایی است که flex-lineها گرفته اند و اصطلاحا مقداری فضای خالی در flex-container وجود دارد. به کمک خاصیت align-content شما می‌توانید محل قرارگیری این flex-line ها را مشخص کنید که از نظر محور عمودی در کجا قرار گیرند.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'zh-cn': '<p>当交叉轴有多余空间时，对齐容器内的轴线。</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'zh-tw': '<p>當交叉軸有多餘空間時，對齊容器內的軸線。</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'tr': '<p>Eğer cross-axis\'de fazladan alan varsa, flex container satırlarını flex container\'ın içinde hizalar.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'az': '<p>Əgər cross-axis\'də artıq sahə varsa, flex container sətirlərini flex container\'in içində nizamlayar.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'it': '<p>Allinea le linee all\'interno di un contenitore flex se c\'è spazio extra lungo l\'asse verticale </p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ko': '<p>세로선 상에 여분의 공간이 있는 경우 Flex 컨테이너 사이의 간격을 조절합니다.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'lt': '<p>Lygiuoja elastiško supančio elemento eilutes, kai kertančios ašies atžvilgiu yra laisvos vietos.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'vi': '<p>Sắp xếp các dòng trong hộp chứa khi có thêm không gian dọc theo trục ngang.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'pl': '<p>Wyrównuje wiersze wewnątrz kontenera z atrybutem flex w przypadku gdy na osiach poprzecznych jest dodatkowe miejsce.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'cs': '<p>Určuje zarovnání řádků ve směru vedlejší osy, pokud je v kontejneru přebytek místa.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ja': '<p>直行軸 (cross axis) に余裕がある場合、コンテナー内の行を配置します。</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'hu': '<p>A flex konténer sorvonalait igazítja a flex konténeren belül, amennyiben van szabad tér a másodlagos kereszttengely mentén.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'eo': '<p>Vicigas la liniojn de la fleksujo tie kie estas aldona spaco sur la transversakso.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'sv': '<p>Justerar en flex-containers rader inom flex-containern när det finns extra utrymme på motsata axeln.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'uk': '<p>Вирівнює рядки flex-контейнеру всередені самого flex-контейнеру, коли є додатковий простір на поперечній осі.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'hi': '<p>यह कंटेनर के भीतर रखी वस्तुओं के मध्य की जगह को संरेखित करता है।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'gj': '<p>જ્યારે flex કન્ટેનરમાં cross-axis પર વધારાની જગ્યા હોય ત્યારે flex કન્ટેનરની લાઈનોને ગોઠવે છે.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'sr': '<p>Поравњава редове у флекс контејнеру када постоји вишак простора дуж попречне осе.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'bs': '<p>Poravnava redove u fleks kontejneru kada postoji višak prostora duž poprečne ose.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'hr': '<p>Poravnava redove u fleks kontejneru kada postoji višak prostora duž poprečne osi.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'nl': '<p>Lijnt de lijnen van een flex container binnen de flex container uit waneer er extra plaats is op de dwarsas.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ta': '<p>குறுக்கு அச்சு மீது கூடுதல் இடம் இருக்கும் போது flex container-ல் வரிகளை சீரமைக்கும்.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'te': '<p>క్రాస్-యాక్సిస్‌లో అదనపు స్థలం ఉన్నప్పుడు ఫ్లెక్స్ కంటైనర్‌లోని పంక్తులను సమలేఖనం చేస్తుంది. </p><code>flex-start</code><code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ml': '<p>ക്രോസ്-അച്ചുതയിൽ അധിക സ്ഥലം ഉള്ളപ്പോൾ ഫ്ലെക്സസ് കണ്ടെയ്നറിലുള്ള നിരകൾ വിന്യസിക്കുന്നു. </p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'el': '<p>Ευθυγραμμίζει τις γραμμές ενός flex container μέσα στο πλαίσιο του flex container όταν υπάρχει επιπλέον χώρος στον εγκάρσιο άξονα.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'mk': '<p>Ги подредува линиите на flex контејнерот кога во него има дополнителнен простор по вертикалната оска.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'lv': '<p>Novieto flex-elementu robežas flex-konteinera iekšienē.(Darbojas tikai, ja ir pieejama papildus vieta uz šķērsojošās ass.)</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'id': '<p> Selaraskan garis flex di dalam wadah flex apabila ada ruang tambahan pada sumbu silang </p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ar': '<p>محاذاة سطور حاويات فكلس في داخل حاوية فلكس عندما يكون هناك مساحة اضافية على المحور الثانوي .</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'ca': '<p>Alinea les línees d\'un contenidor flex quan existeixi més espai en l\'eix transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'da': '<p>Justerer en flex-containers linjer inden i flex-containeren når der er plads til overs på den tværgående akse.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'et': '<p>Joondab flex konteineri jooned flex konteineriga kui on piisavalt ruumi ristteljel.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'fi': '<p>Kohdistaa rivit flex-säilössä, jos poikittaisakselilla on ylimääräistä tilaa.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (oletusarvo)</code>',
    'gl': '<p>Aliña as liñas dun contedor flex cando hai espazo extra no eixe transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>stretch</code>',
    'th': '<p>จัดเรียงบรรทัดภายใน flex container ในกรณีที่มีพื้นที่ว่างบนแกนขวาง</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'mn': '<p>Хөндлөн тэнхлэгт нэмэлт зай байгаа үед flexbox-н мөрүүдийг дураараа байрлуулна.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'sk': '<p>Zarovná riadky kontajnera flex v rámci kontajnera flex, ak je na priečnej osi extra priestor.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'si': '<p>හරස් අක්‍ෂයේ අමතර ඉඩ ඇති විට flex කන්ටේනරය තුළ පේළි ඇසිරීම තීරණය කරයි.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'np': '<p>फ्लेक्स कन्टेनरमा थप ठाउँ हुँदा फ्लेक्स कन्टेनरको रेखाहरूलाई क्रस-एक्सिसमा मिलाउनको लागि प्रयोग गरिन्छ।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'my': '<p>flex container ၏လိုင်းများကို cross-axis ပေါ်တွင် နေရာပိုရှိသောအခါ အတွင်း၌တန်းညီအောင်လုပ်သည်။</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'yo': '<p>Ṣe dẹ́édé ìlà àpòlo flex nínú àpòlo flex tí àyè púpọ̀ bá wà ní cross axis.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (default)</code>',
    'no': '<p>Justerer linjene til en fleksibel beholder innenfor fleksibel beholderen når det er ekstra plass på tverraksen.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code> <code>stretch (standard)</code>',
  },
  'align-items': {
    'en': '<p>Aligns flex items along the cross axis.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'bn': '<p>flex item গুলোকে cross axis বরাবর সারিবদ্ধ করে।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'af': '<p>Rig flex items op die kruis-as.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (verstek)</code>',
    'he': '<p>יישור פריטים ב-flex לאורך הציר המשני.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ro': '<p>Aliniază elementele flex de-a lungul axei transversale.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'bg': '<p>Подрежда flex елементите по дължината на осите.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'de': '<p>Richtet die flex-Elemente entlang der Querachse aus.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'pt-br': '<p>Alinha itens flex ao longo do eixo cruzado.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'es': '<p>Alinea elementos Flex a lo largo del eje transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'fr': '<p>Aligne les éléments flex selon l\'axe transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ru': '<p>Выравнивает flex-элементы вдоль пересекаемой оси.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'fa': '<p>این خاصیت نحوه چینش Flex itemها را در محور Cross مشخص می کند. این خاصیت مانند justify-content  است تنها تفاوت آنها در مقادیرشان است.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'zh-cn': '<p>在交叉轴上对齐多个元素</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'zh-tw': '<p>在交叉軸上對齊多個元素</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'tr': '<p>Flex öğelerini cross-axis boyunca hizalar.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'az': '<p>Flex elementlərini cross-axis boyunca nizamlayar.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'it': '<p>Allinea gli elementi flex lungo l\'asse verticale</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ko': '<p>Flex 요소를 세로선 상에서 정렬합니다.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'lt': '<p>Lygiuoja elastiškus elementus palei kertančią ašį.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'vi': '<p>Sắp xếp các hạng mục flex dọc theo trục ngang.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'pl': '<p>Wyrównuje elementy z atrybutem flex wzdłuż osi poprzecznych.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'cs': '<p>Určuje zarovnání všech prvků ve směru vedlejší osy.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ja': '<p>アイテムを直行軸 (cross axis) に沿って配置します。</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'hu': '<p>A másodlagos kereszt-tengely mentén igazítja a flex elemeket.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'eo': '<p>Vicigas transversakse fleksajn erojn.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'sv': '<p>Justerar flex-objekt längs med motsata axeln.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'uk': '<p>Вирівнює flex-елементи вздовж перетинної осі.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'hi': '<p>वस्तुओं को उर्ध्वाधर रूप से संरेखित करता है।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'gj': '<p>flex itemsને cross axisના સમાંતર ગોઠવે છે.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'sr': '<p>Поравњава флекс елементе дуж попречне осе.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'bs': '<p>Poravnava fleks elemente duž poprečne ose</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'hr': '<p>Poravnava fleks elemente duž poprečne osi</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'nl': '<p>Lijnt flex elementen uit over de dwarsas.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ta': '<p>குறுக்கு அச்சு வழியாக உருப்படிகளை ஒழுங்குபடுத்துகிறது.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'te': '<p> క్రాస్ యాక్సిస్ వెంట ఫ్లెక్స్ అంశాలను సమలేఖనం చేస్తుంది. </p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ml': '<p>ക്രോസ്സ് അക്ഷത്തിൽ വളവുതിരിവുകളുള്ള ഇനങ്ങൾ വിന്യസിക്കുന്നു. </p> <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'el': '<p>Ευθυγραμμίζει αντικείμενα flex κατά μήκος του εγκάρσιου άξονα.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'mk': '<p>Ги подредува flex елементите по вертикалната оска.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'lv': '<p>Novieto flex vienības attiecībā pret šķērsojošo asi.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'id': '<p> Sejajarkan item fleksibel di sepanjang sumbu silang. </p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ar': '<p>محاذاة عناصر فلكس على طول المحور الثانوي.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'ca': '<p>Alinea elements Flex al llarg de l\'eix transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'da': '<p>Justerer flex-elementer langs den tværgående akse.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'et': '<p>Joondab flex elemendid mööda risttelge.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'fi': '<p>Kohdistaa flex-elementit poikittaisakselin suuntaisesti.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (oletusarvo)</code>',
    'gl': '<p>Aliña os elementos flex no eixe transversal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'th': '<p>จัดเรียง flex items ตามแกนขวาง</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'mn': '<p>Хөндлөн тэнхлэгийн дагуу flex items-г байрлуулна.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'sk': '<p>Zarovná ohybné prvky pozdĺž priečnej osi.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'si': '<p>හරස් අක්ෂය දිගේ flex අයිතම පෙළගස්වයි.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'np': '<p>फ्लेक्स आइटमहरूलाई क्रस-एक्सिसमा मिलाउँछ।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'my': '<p>flex items များကို cross axis အတိုင်းတန်းညီအောင်လုပ်သည်။</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'yo': '<p>Se deede flex items po mo cross axis.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (default)</code>',
    'no': '<p>Justerer fleksible elementer langs tverraksen.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch (standard)</code>',
  },
  'align-self': {
    'en': '<p>Aligns a flex item along the cross axis, overriding the <code>align-items</code> value.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'bn': '<p><code>align-items</code> এর মান না মেনে cross axis বরাবর একটি flex item কে সারিবদ্ধ করে।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'af': '<p>Rig `n flex item op die kruis-as, en oorskryf die <code>align-items</code> waarde.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'he': '<p>יישור פריט flex ספציפי לאורך הציר המשני, דורס את ההגדרה של <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ro': '<p>Aliniază un element flex de-a lungul axei transversale, suprascriind valoarea proprietății <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'bg': '<p>Подрежда flex елемент по дължината на осите, презаписвайки <code>align-items</code> стойността.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'de': '<p>Richtet die flex-Elemente entlang der Querachse aus und überschreibt den Wert von <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'pt-br': '<p>Alinha um item flex ao longo do eixo cruzado, substituindo o valor de <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'es': '<p>Alinea un elemento flex a lo largo del eje transversal, anulando el valor de <code>align-items</code></p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'fr': '<p>Aligne un élément flex selon l\'axe transversal, outrepassant la valeur de <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ru': '<p>Выравнивает flex-элемент вдоль пересекаемой оси, перекрывая значения свойства <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'fa': '<p>با استفاده از این خاصیت می‌توانید نحوه قرار گرفتن عمودی هر flex item را مشخص کنید. مقادیر این خاصیت دقیقا همان مقادیر خاصیت align-items است. <code>align-items</code> value.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'zh-cn': '<p>在交叉轴上对齐一个元素，覆盖<code>align-items</code>所设定的值.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'zh-tw': '<p>在交叉軸上對齊一個元素，覆蓋<code>align-items</code>所设定的值.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'tr': '<p><code>align-items</code>\'ın değerini ezerek, sadece bu öğeyi cross-axis boyunca hizalar</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'az': '<p><code>align-items</code>\'ın dəyərini üstələyərək, sadəcə bu elementi cross-axis boyunca nizamlayar</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'it': '<p>Allinea un elemento flex lungo l\'asse verticale, sovrascrive il valore di <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ko': '<p>지정된 <code>align-items</code> 값을 무시하고 Flex 요소를 세로선 상에서 정렬합니다.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'lt': '<p>Lygiuoja elastišką elementą palei kertančią ašį nepaisant <code>align-items</code> reikšmės.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'vi': '<p>Sắp xếp một hạng mục flex dọc theo trục ngang, ghi đè lên giá trị của <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'pl': '<p>Wyrównuje element z atrybutem flex wzdłuż osi poprzecznych nadpisując wartość właściwości <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'cs': '<p>Určuje zarovnání prvku ve podle vedlejší osy, přebíjí hodnotu <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ja': '<p>アイテムを直行軸 (cross axis) に沿って配置します。<code>align-items</code>の値を上書きします。</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'hu': '<p>A másodlagos kereszttengely mentén igazít egy flex elemet, felülírva a <code>align-items</code>-ben megadott értéket.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'eo': '<p>Vicigas transversakse fleksajn elementojn, anstataŭigante la <code>align-items</code> valoron.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'sv': '<p>Justerar ett flex-objekt längs med motsata axeln, överskrider värdet från <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'uk': '<p>Вирівнює flex-елемент вздовж перетинної осі, перекриваючи значення властивості <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'hi': '<p>छैतिज रूप से किसी विशिष्ट वस्तु के लिए नियम प्रदान करता है, <code>align-items</code> के नियमों को न मानते हुए।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'gj': '<p>flex itemને  cross axisના સમાંતર ગોઠવે છે અને <code>align-items</code>ની valueને બદલી નાખે છે. .</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'sr': '<p>Поравњава појединачни флекс елемент дуж попречне осе надјачавајући вредност <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'bs': '<p>Poravnava pojedinačni fleks element duž poprečne ose nadjačavajući vrijednost</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'hr': '<p>Poravnava pojedinačni fleks element duž poprečne osi nadjačavajući vrijednost</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'nl': '<p>Lijnt een flex element uit over de dwarsas, en overschrijft de waarde van <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ta': '<p><code>align-items</code> மதிப்புகளை புறக்கணித்து, குறுக்கு அச்சு வழியாக உருப்படிகளை ஒழுங்குபடுத்துகிறது.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'te': '<p><code>align-item</code> విలువను అధిగమించి, క్రాస్ యాక్సిస్ వెంట ఒక ఫ్లెక్స్ ఐటెమ్‌ను సమలేఖనం చేస్తుంది. ముగింపు <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ml': '<p><code>align-items</code> ഇനെ അസാധു ആക്കി കൊണ്ട്, ക്രോസ്സ് അക്ഷത്തിൽ ഒരു ഫ്ലെക്സ് ഇനത്തെ വിന്യസിക്കുന്നു</p></p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'el': '<p>Ευθυγραμμίζει ένα αντικείμενο flex κατά μήκος του εγκάρσιου άξονα, παρακάμπτοντας την αξία του <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'mk': '<p>Подредува flex element по вертикалната оска, презапишувајќи ја <code>align-items</code> вредноста.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'lv': '<p>Novieto flex vienību attiecībā pret šķērsojošo asi, pārrakstot <code>align-items</code> vērtību.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'id': '<p> Sejajarkan item fleksibel di sepanjang sumbu silang yang menimpa objek <code>align-items</code> value.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ar': '<p>محاذاة عنصر فلكس على طول المحور الثانوي, متجاوزا قيمة <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'ca': '<p>Alinea un element flex al llarg de l\'eix transversal, anul·lant el valor de <code>align-items</code></p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'da': '<p>Justerer et flex-element langs den tværgående akse, og underkender værdien af <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'et': '<p>Joondab flex elemendi mööda risttelge, ja võtab üle <code>align-items</code> väärtuse.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'fi': '<p>Kohdistaa yksittäisen flex-elementin poikittaisakselin suuntaisesti ohittaen <code>align-items</code>-ominaisuudelle määritetyn arvon.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'gl': '<p>Aliña un elemento flex no eixe transversal, sobrescribindo o valor de <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'th': '<p>จัดเรียง flex item ตามแกนขวาง, โดยทับค่าของคำสั่ง <code>align-items</code></p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'mn': '<p><code>align-items</code> утгыг дарж, flex item-г хөндлөн тэнхлэгийн дагуу байрлуулна.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'sk': '<p>Zarovná prvok flex pozdĺž krížovej osi, pričom nahradí hodnotu <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'si': '<p><code>align-items</code> හි අගය නොසලකා හැර හරස් අක්ෂය දිගේ flex අයිතමය පෙළගස්වයි.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'np': '<p>फ्लेक्स आइटमलाई क्रस-एक्सिसमा मिलाउँछ, <code>align-items</code> को मानलाई ओभरराइड गर्दै।</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'my': '<p><code>align-items</code> တန်ဖိုးကို တစ်ခုခြားပြီး flex item တစ်ခုစီကို cross axis အတိုင်းတန်းညီစေသည်။</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'yo': '<p>Ṣe dẹ́édé flex item pọ̀ mọ́ cross axis láti bọ́rí iye. <code>align-items</code> </p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
    'no': '<p>Justerer et flekselement langs tverraksen, og overstyrer verdien <code>align-items</code>.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline</code> <code>stretch</code>',
  },   
  'flex-direction': {
    'en': '<p>Defines the direction of the main axis.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'bn': '<p>Main axis এর দিক নির্ধারন করে।</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'af': '<p>Bepaal die direksie van die hoof as.</p><code>row (verstek)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'he': '<p>מגדיר את הכיוון של הציר הראשי.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ro': '<p>Definește direcția axei principale.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'bg': '<p>Определя посоката на основната ос.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'de': '<p>Legt die Ausrichtung der Hauptachse fest.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'es': '<p>Define la dirección del eje principal.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'pt-br': '<p>Define a direção do eixo principal.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'fr': '<p>Définit la direction de l\'axe principal.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ru': '<p>Задает направление основной оси.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'fa': '<p>جهت آیتم ها را مشخص می کند.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'zh-cn': '<p>定义主轴的方向。</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'zh-tw': '<p>定義主軸的方向。</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'tr': '<p>main axis\'in yönünü belirler.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'az': '<p>Main axis\'in yönünü təyin edər.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'it': '<p>Definisce la direzione dell\'asse principale</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ko': '<p>정렬할 방향을 지정합니다.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'lt': '<p>Nustato pagrindinės ašies kryptį.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'vi': '<p>Xác định hướng của trục chính.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'pl': '<p>Określa kierunek głównej osi.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'cs': '<p>Určuje směr hlavní osy.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ja': '<p>主軸 (main axis) の方向を指定します。</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'hu': '<p>Definiálja az elsődleges főtengely irányát.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'eo': '<p>Difinas la direkton de la ĉefa akso.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'sv': '<p>Definierar huvudaxelns håll.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'uk': '<p>Визначає напрямок головної осі.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'hi': '<p>मुख्य धुरी की दिशा परिभाषित करता है।</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'gj': '<p>main axisની દિશા નક્કી કરે છે .</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'sr': '<p>Одређује правац главне осе.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'bs': '<p>Određuje pravac glavne ose.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'hr': '<p>Određuje pravac glavne osi.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'nl': '<p>Definieert de richting van de hoofdas.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ta': '<p>முக்கிய அச்சு திசையை வரையறுக்கிறது.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'te': '<p> ప్రధాన అక్షం యొక్క దిశను నిర్వచిస్తుంది. </p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ml': '<p>പ്രധാന അക്ഷത്തിന്റെ ദിശ നിർവ്വചിക്കുന്നു.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'el': '<p>Ορίζει την κατεύθυνση του κύριου άξονα.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'mk': '<p>Ја одредува насоката на хоризонталната оска.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'lv': '<p>Nodefinē galvenās ass virzienu.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'id': '<p> Tentukan arah sumbu utama.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ar': '<p>تحديد اتجاه المحور الرئيسي.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'ca': '<p>Defineix la direcció de l\'eix principal.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'da': '<p>Definerer hovedaksens retning.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'et': '<p>Määrab põhitelje suuna</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'fi': '<p>Määrittää pääakselin suunnan.</p><code>row (oletusarvo)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'gl': '<p>Define a dirección do eixe principal.</p><code>row</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'th': '<p>กำหนดทิศทางของแกนหลัก</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'mn': '<p>Үндсэн тэнхлэгийн чиглэлийг тодорхойлно.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'sk': '<p>Určuje smer hlavnej osi.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'si': '<p>ප්‍රධාන අක්‍ෂයේ දිශාව තීරණය කරයි.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'np': '<p>मुख्य अक्षको दिशा परिभाषित गर्छ।</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'my': '<p>main axis ၏ ဦးတည်ရာလမ်းကြောင်းကို သတ်မှတ်သည်။</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'yo': '<p>Sàlàyé ìtòsọ́nà main axis.</p><code>row (default)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
    'no': '<p>Definerer retningen til hovedaksen.</p><code>row (standard)</code> <code>row-reverse</code> <code>column</code> <code>column-reverse</code>',
  },
  'flex-flow': {
    'en': '<p>Shorthand property for <code>flex-direction</code> and <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'bn': '<p><code>flex-direction</code> এবং <code>flex-wrap</code> এর জন্য একটি Shorthand property।</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'af': '<p>Kortskrif eienskap vir <code>flex-direction</code> en <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'he': '<p>קיצור בשביל <code>flex-direction</code> ו-<code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'ro': '<p>Scurtătura pentru <code>flex-direction</code> și <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'bg': '<p>Съкратена версия на <code>flex-direction</code> and <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'de': '<p>Kurzschreibweise für <code>flex-direction</code> und <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'pt-br': '<p>Propriedade abreviada para <code>flex-direction</code> e <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'es': '<p>Abreviación de las propiedades de <code>flex-direction</code> and <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code></p>',
    'fr': '<p>Raccourci pour <code>flex-direction</code> et <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'ru': '<p>Свойство для быстрой записи <code>flex-direction</code> и <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'fa': '<p>اکنون به کمک flex-flow شما می‌توانید مقادیری که برای <code>flex-direction</code> و <code>flex-wrap</code> در نظر دارید را در یک خاصیت بنویسید.</p>',
    'zh-cn': '<p><code>flex-direction</code>和<code>flex-wrap</code>的缩写性质。</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'zh-tw': '<p><code>flex-direction</code>和<code>flex-wrap</code>的縮寫性質。</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'tr': '<p><code>flex-direction</code> ve <code>flex-wrap</code> için kısa yazım özelliği.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'az': '<p><code>flex-direction</code> və <code>flex-wrap</code> üçün qısa yazım özəlliyi.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'it': '<p>Scorciatoia per le proprietà <code>flex-direction</code> e <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'ko': '<p>다음의 속성들을 간략히 한 속성입니다: <code>flex-direction</code> and <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'lt': '<p>Sutrumpinta komanda atstojanti <code>flex-direction</code> ir <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'vi': '<p>Viết tắt cho từ <code>flex-direction</code> và từ <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'pl': '<p>Skrócona wersja <code>flex-direction</code> i <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'cs': '<p>Zkrácená verze vlastností <code>flex-direction</code> a <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'ja': '<p><code>flex-direction</code>と<code>flex-wrap</code>のショートハンドプロパティーです。</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'hu': '<p>Rövidítésként szolgáló összevonása a <code>flex-direction</code> és a <code>flex-wrap</code> tulajdonságoknak.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'eo': '<p>Mallongita trajto por <code>flex-direction</code> kaj <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'sv': '<p>Kort version av <code>flex-direction</code> och <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'uk': '<p>Скорочена властивість для <code>flex-direction</code> та <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'hi': '<p>शोर्ट हैंड प्रॉपर्टी <code>flex-direction</code> एवं <code>flex-wrap</code> के लिए।</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'gj': '<p><code>flex-direction</code> અને <code>flex-wrap</code>ની બદલે વાપરી શકાય છે..</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'sr': '<p>Скраћено својство за <code>flex-direction</code> и <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'bs': '<p>Skraćeno svojstvo za <code>flex-direction</code> i <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'hr': '<p>Skraćeno svojstvo za <code>flex-direction</code> i <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'nl': '<p>Een verkorte eigenschap voor een combinatie van <code>flex-direction</code> en <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'ta': '<p><code>flex-direction</code> and <code>flex-wrap</code> இரண்டின் சுருக்கெழுத்து.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'te': '<p> <code>flex-direction</code> మరియు <code>flex-wrap</code> కోసం సంక్షిప్తలిపి ఆస్తి.</p><code>&lt;flex-direction &gt; &lt;flex-wrap &gt;</code>',
    'ml': '<p><code>flex-direction</code> and <code>flex-wrap</code> ോർട്ട്ഹാൻഡ്.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'el': '<p>Συντομογραφική ιδιότητα για τα <code>flex-direction</code> και <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'mk': '<p>Скратена верзија на <code>flex-direction</code> и <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'lv': '<p><code>flex-direction</code> un <code>flex-wrap</code> saīsināsinātā versija.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'id': '<p> Properti singkatan untuk <code>flex-direction</code> and <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'ar': '<p>خاصية مختصرة لـ <code>flex-direction</code> و <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'ca': '<p>Abreujament de les propietats de <code>flex-direction</code> and <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code></p>',
    'da': '<p>Forkortelse for <code>flex-direction</code> og <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'et': '<p>Lühendatud omadus, mis ühendab <code>flex-direction</code> ja <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'fi': '<p>Ominaisuuksien <code>flex-direction</code> ja <code>flex-wrap</code> yhdistelmä.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'gl': '<p>Propiedade-atallo para <code>flex-direction</code> e <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'th': '<p>เป็นคำสั่งย่อของ <code>flex-direction</code> และ <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'mn': '<p><code>flex-direction</code> болон <code>flex-wrap</code>-д зориулсан товчилсон проперти.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'sk': '<p>Skrátená vlastnosť pre <code>flex-direction</code> a <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'si': '<p><code>flex-direction</code> සහ <code>flex-wrap</code> සඳහා වන තනි ගුණාංගයකි.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'np': '<p><code>flex-direction</code> र <code>flex-wrap</code> को लागि शॉर्टह्यान्ड प्रोपर्टी।</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'my': '<p><code>flex-direction</code> နှင့် flex-wrap ကို အတိုချုံးရေးသားနိုင်သော property ဖြစ်သည်။ <code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code></p>',
    'yo': '<p>Ohun ini olowo kukuru fun <code>flex-direction</code> ati <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
    'no': '<p>Shorthand-egenskap for <code>flex-direction</code> og <code>flex-wrap</code>.</p><code>&lt;flex-direction&gt; &lt;flex-wrap&gt;</code>',
  },
  'flex-wrap': {
    'en': '<p>Specifies whether flex items are forced on a single line or can be wrapped on multiple lines.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'bn': '<p>flex item গুলোকে কি একই লাইনে থাকতে বাধ্য করা হবে নাকি একাধিক লাইনে wrap করা যাবে তা নির্ধারন করে।</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'af': '<p>Spesifiseer of die flex items op `n enkele lyn geforseer is of oor meerdere lyne gevou word.</p><code>nowrap (verstek)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'he': '<p>מציין אם פריטי flex יהיו בשורה אחת או יכולים להתפרס ("להעטף" - wrap) בכמה שורות.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ro': '<p>Specifică daca elementele flex sunt forțate pe o singură linie sau pot fi impărțit pe mai multe linii.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'bg': '<p>Определя дали flex елементите са на един ред или могат да бъдат разпределени на много редове.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'de': '<p>Legt fest, ob die flex-Elemente in eine Zeile gezwängt werden oder auf mehrere Zeilen umgebrochen werden können.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'pt-br': '<p>Especifica se os itens flex são forçados em um linha única ou podem quebrar em múltiplas linhas.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'es': '<p>Especifica si los elementos flex son forzados a una sola línea o pueden ser envueltos en multiples líneas.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'fr': '<p>Spécifie si les éléments flex sont forcés à être sur une seule ligne ou peuvent être enveloppés sur plusieurs lignes.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ru': '<p>Указывает, нужно ли чтоб элементы принудительно находились в одном ряду или автоматически переносились.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'fa': '<p>در حالت عادی همه flex item ها در یک خط قرار می‌گیرند. به کمک خاصیت flex-wrap شما می‌توانید مشخص کنید که flex item ها در چندین خط قرار بگیرند.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'zh-cn': '<p>定义flex元素必须在单行或自动换行成多行。</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'zh-tw': '<p>定義flex元素必須在單行或自動換行成多行。</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'tr': '<p>Flex öğelerin tek satıra sığmasını ya da çoklu satırlara bölünmesini belirler.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'az': '<p>Flex elementlərin tək sətirə sığmasını və ya çoxlu sətirlərə bölünməsini təyin edər.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'it': '<p>Specifica se gli elementi flex vengono disposti forzatamente su una singola linea o se possono occupare più linee</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ko': '<p>Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'lt': '<p>Nusako ar elastiški elementai turi būti sutalpinti vienoje eilutėje, ar gali būti paskirstyti per kelias eilutes.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'vi': '<p>Xác định xem các hạng mục flex phải trên một dòng hoặc có thể quấn trên nhiều dòng.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'pl': '<p>Określa czy elementy z atrybutem flex muszą być ściśnięte w jednym wierszu czy mogą być rozproszone.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'cs': '<p>Určuje, zda budou prvky na jednom řádku, nebo se mohou rozdělit na více řádků.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ja': '<p>アイテムを強制的に一行に並べるか、複数行へ折り返すかを指定します。</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'hu': '<p>Meghatározza, hogy a flex elemek egy sorba vannak kényszerítve vagy megtörhetnek több sorba.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'eo': '<p>Indikas ĉu fleksaj elementoj devige estu sur nura linio aŭ faldkapeblas je pluraj linioj.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'sv': '<p>Specificerar on flex-objekt är låsta till en rad eller om dom får flöda över till flera rader.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'uk': '<p>Визначає, чи будуть елементи знаходитись в одному рядку, чи будуть перенесені до наступних рядків.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'hi': '<p>यह निर्दिष्ठ करता है की कोई वस्तु एक पंक्ति अथवा कई पंक्तियों में आएगी।</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'gj': '<p>તે નક્કી કરે છે કે flex items ને single line માં wrap કરવા કે  multiple linesમાં .</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'sr': '<p>Одређује да ли ће флекс елементи стајати у једном реду или ће прећи у нове редове.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'bs': '<p>Određuje da li će fleks elementi stajati u jednom redu ili će preći u nove redove.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'hr': '<p>Određuje da li će fleks elementi stajati u jednom redu ili će prijeći u nove redove.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'nl': '<p>Specifieert of de flex elementen op een enkele lijn geforceerd worden, of ze over meerdere lijnen gewikkeld worden.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ta': '<p>ஒரு ஒற்றை வரியில் பொருட்களை கட்டாயமாக்க வேண்டுமா அல்லது பல வரிகளில் மூடப்பட்டிருக்கலாம் என்பதைக் குறிப்பிடுகிறது.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'te': '<p>ఫ్లెక్స్ ఐటెమ్‌లు ఒకే పంక్తిలో బలవంతం చేయబడుతున్నాయా లేదా బహుళ పంక్తులలో చుట్టవచ్చా అని నిర్దేశిస్తుంది.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ml': '<p>ഫ്ലെക്സിങ് ഇനങ്ങളെ ഒരൊറ്റ വരിയിൽ നിർബന്ധിതരാണോ അല്ലെങ്കിൽ ഒന്നിലധികം വരികളിൽ പൊതിഞ്ഞ് വരാമോ എന്ന് നിർദേശിക്കുന്നു.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'el': '<p>Προσδιορίζει κατά πόσο τα αντικείμενα flex στριμώχνονται σε μία γραμμή ή μπορούν να τυλιχθούν σε πολλαπλές γραμμές.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'mk': '<p>Специфицира дали flex елементите се присилени во еден ред или можат да бидат распределени во повеќе редови.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'lv': '<p>Norāda to, vai flex vienības tiek novietotas vienā rindā vai var tik izvietotas vairākās rindās.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'id': '<p> Tentukan apakah flex objek dipaksa pada satu garis atau dapat dibungkus pada beberapa baris.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ar': '<p>تحديد اذا كانت عناصر فلكس يجب ان تكون في سطر واحد او ممكن ان تتمدد الى اكثر من سطر.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'ca': '<p>Especifica si els elements flex són forçats a una sola línia o poden ser encapçulats en multiples línies.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'da': '<p>Fastsætter om flex-elementer skal tvinges ind på en enkelt linje eller må fordeles over flere linjer.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'et': '<p>Täpsustab, kas flex elemendd on surutud on ühele reale või on nad pakitud mitmele reale.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'fi': '<p>Määrittää, pakotetaanko elementit yhdelle riville vai voivatko ne rivittyä useammalle riville.</p><code>nowrap (oletusarvo)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'gl': '<p>Determina se os elementos flex teñen que apertarse para coller nunha soa liña ou se se poden distribuír en múltiples liñas.</p><code>nowrap</code> <code>wrap</code> <code>wrap-reverse</code>',
    'th': '<p>กำหนดว่า flex items จะถูกบังคับให้อยู่ในบรรทัดเดียว หรือสามารถพับไปอยู่หลายบรรทัด</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'mn': '<p>Flex items-г нэг мөрөнд шахах эсвэл олон мөрөнд тарааж байрлуулах уу гэдгийг заана.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'sk': '<p>Určuje, či sa položky flex musia nachádzať na jednom riadku alebo môžu byť zabalené do viacerých riadkov.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'si': '<p>flex අයිතම තනි පේළියකට හෝ පේළි කිහිපයකට ඇසිරීම තීරණය කරයි.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'np': '<p>फ्लेक्स आइटमहरूलाई एउटै लाइनमा बाध्य पार्ने वा धेरै लाइनहरूमा र्‍याप गर्न मिल्ने हो वा होइन भनेर निर्दिष्ट गर्दछ।</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'my': '<p>flex items များကို တစ်ချက်တည်းတန်းစီစေမည်လား၊ များသောတန်းများအဖြစ် ပြန်ပက်စေမည်လား ဆိုသည်ကို သတ်မှတ်သည်။</p><code>nowrap (မူရင်း)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'yo': '<p>Ṣe pàtó bóyá flex items gbọ́dọ̀ dúró sí orí ìlà kan ṣoṣo tàbí pé wọ́n lè yípo lórí ọ̀pọ̀ ìlà.</p><code>nowrap (default)</code> <code>wrap</code> <code>wrap-reverse</code>',
    'no': '<p>Spesifiserer om fleksible elementer tvinges på én linje eller kan brytes på flere linjer.</p><code>nowrap (standard)</code> <code>wrap</code> <code>wrap-reverse</code>',
  },
  'justify-content': {
    'en': '<p>Aligns flex items along the main axis.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'bn': '<p>flex item গুলোকে main axis বরাবর সারিবদ্ধ করে।</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'af': '<p>Rig die flex items op die hoof as.</p><code>flex-start (verstek)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'he': '<p>יישור פריטי flex לאורך הציר הראשי.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ro': '<p>Aliniază elementele flex de-a lungul axei principale.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'bg': '<p>Подрежда flex елементи по дължината на основната ос.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'de': '<p>Richtet die flex-Elemente entlang der Hauptachse aus.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'pt-br': '<p>Alinha os itens flex ao longo do eixo principal.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'es': '<p>Alinea los elementos flex a lo largo del eje principal.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'fr': '<p>Aligne les éléments flex selon l\'axe principal.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ru': '<p>Выравнивает flex-элементы вдоль главной оси.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'fa': '<p>با استفاده از این خاصیت می‌توانید نحوه چیدمان آیتم‌ها بر روی محور اصلی را تعیین کنید (به یاد داشته باشید همانطور که گفتیم اگر خاصیت flex-direction برابر column یا column-reverse باشد، محور اصلی عمودی خواهد بود).</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'zh-cn': '<p>将flex元素和主轴对齐。</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'zh-tw': '<p>將flex元素和主軸對齊。</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'tr': '<p>Flex öğeleri main axis boyunca hizalar.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'az': '<p>Flex elementləri main axis boyunca nizamlayar.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'it': '<p>Allinea gli elementi flex lungo l\'asse principale.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ko': '<p>Flex 요소들을 가로선 상에서 정렬합니다.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'lt': '<p>Lygiuoja elastiškus elementus palei pagrindinę ašį.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'vi': '<p>Sắp xếp các hạng mục flex dọc theo trục chính.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'pl': '<p>Wyrównuje elementy z atrybutem flex wzdłuż głownej osi.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'cs': '<p>Zarovnává prvky ve směru hlavní osy.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ja': '<p>アイテムを主軸 (main axis) に沿って配置します。</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'hu': '<p>Az elsődleges főtengely mentén igazítja a flex elemeket.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'eo': '<p>Liniigas fleksajn elementojn laŭĉefakse.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'sv': '<p>Justerar flex-objekt längs med huvudaxeln.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'uk': '<p>Вирівнює flex-елементи вздовж головної осі.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'hi': '<p>वस्तुओं को छैतिज रूप से संरेखित करता है।</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'gj': '<p>flex itemsને main axisની સમાંતર ગોઠવે છે.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'sr': '<p>Поравњава флекс елементе дуж главне осе.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'bs': '<p>Poravnava fleks elemente duž glavne ose.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'hr': '<p>Poravnava fleks elemente duž glavne osi.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'nl': '<p>Lijnt de flex elementen uit langs de hoofdas.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ta': '<p>முக்கிய அச்சில் உருப்படிகளை சீரமைக்கும்.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'te': '<p>ప్రధాన అక్షంతో పాటు ఫ్లెక్స్ అంశాలను సమలేఖనం చేస్తుంది.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ml': '<p>ഫ്ലെക്സി ഇനങ്ങളെ മെയിൻ ആക്സിസിൽ വിന്യസിക്കുന്നു</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'el': '<p>Ευθυγραμμίζει αντικείμενα flex κατά μήκος του κύριου άξονα.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'mk': '<p>Подредува flex елементи по хоризонталната оска.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'lv': '<p>Novieto flex vienību attiecībā pret galveno asi.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'id': '<p> Sejajarkan flex objek pada sepanjang sumbu utama. </p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ar': '<p>محاذاة عناصر فلكس على طول المحور الرئيسي.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'ca': '<p>Alinea els elements flex al llarg de l\'eix principal.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'da': '<p>Justerer flex-elementer langs hovedaksen.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'et': '<p>Joondab flex elemendid mööda põhitelge.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'fi': '<p>Kohdistaa flex-elementit pääakselin suuntaisesti.</p><code>flex-start (oletusarvo)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'gl': '<p>Aliña os elementos flex no eixe principal.</p><code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code>',
    'th': '<p>จัดเรียง flex items ตามแกนหลัก</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'mn': '<p>Үндсэн тэнхлэгийн дагуу flex item-ийг байрлуулна.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'sk': '<p>Zarovnanie prvkov flex pozdĺž hlavnej osi.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'si': '<p>ප්‍රධාන අක්ෂය දිගේ flex අයිතම පෙළගස්වයි.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'np': '<p>फ्लेक्स आइटमहरूलाई मुख्य अक्षमा मिलाउँछ।</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'my': '<p>flex items များကို main axis အတိုင်း တန်းညီအောင်လုပ်သည်။</p><code>flex-start (မူရင်း)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'yo': '<p>Ṣe deede àwọn flex items pẹ̀lú main axis.</p><code>flex-start (default)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
    'no': '<p>Justerer fleksible elementer langs hovedaksen.</p><code>flex-start (standard)</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> <code>space-evenly</code>',
  },
  'order': {
    'en': '<p>Specifies the order of the flex item.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'bn': '<p>Flex item এর order (ক্রম) নির্ধারন করে।</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'af': '<p>Spesifiseer die orde van die flex item.</p><code>&lt;integer&gt; (... -1, 0 (verstek), 1, ...)</code>',
    'he': '<p>מציין את הסדר של פריט flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'ro': '<p>Specifică ordinea elementelor flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'bg': '<p>Определя реда на flex елемента.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'de': '<p>Legt die Reihenfolge der flex-Elemente fest.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'pt-br': '<p>Especifica a ordem de um item flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'es': '<p>Especifica el orden de los elementos flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'fr': '<p>Spécifie l\'ordre de l\'élément flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'ru': '<p>Указывает порядок flex-элемента.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'fa': '<p>به کمک خاصیت order شما می‌توانید ترتیب چینش Flex itemها را مشخص کنید. مقادیر این خاصیت اعداد می‌باشند و هرچه عدد کوچکتر باشد اولویت آیتم بالاتر خواهد بود..</p><code>(... -1, 0 (default), 1, ...) &lt;integer&gt;</code>',
    'zh-cn': '<p>决定flex元素的顺序。</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'zh-tw': '<p>決定flex元素的順序。</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'tr': '<p>Flex öğenin sırasını belirler.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'az': '<p>Flex elementinin sırasını təyin edər.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'it': '<p>Specifica l\'ordine degli elementi flex</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'ko': '<p>Flex 요소의 순서를 지정합니다.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'lt': '<p>Nusako elastiškų elementų eilės tvarką.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'vi': '<p>Chỉ rõ thứ tự của các hạng mục flex</p><code>&lt;itegeer&gt;(... -1, 0 (default), 1, ...) </code>',
    'pl': '<p>Określa kolejność elementów z atrybutem flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'cs': '<p>Určuje pořadí prvku v kontejneru.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'ja': '<p>アイテムの順序を指定します。</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'hu': '<p>Meghatározza a flex elem sorrendiségét.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'eo': '<p>Precizigas la ordon de la fleksa elemento.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'sv': '<p>Specificerar ordningen för flex-objekten.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'uk': '<p>Вказує порядок flex-елементу.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'hi': '<p>फ्लेक्स आइटम का क्रम निश्चित करता है।</p><code>&lt;पूर्णांक&gt; (... -1, 0 (default), 1, ...)</code>',
    'gj': '<p>flex itemનો ક્ર્મ નક્કી કરે છે.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'sr': '<p>Дефинише место појединачног флекс елемента.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'bs': '<p>Definira mjesto pojedinog fleks elementa.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'hr': '<p>Definira mjesto pojedinog fleks elementa.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'nl': '<p>Bepaalt de volgorde van de flex elementen.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'ta': '<p>உருப்படியின் வரிசையைக் குறிப்பிடுகிறது.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'te': '<p>ఫ్లెక్స్ ఐటెమ్ యొక్క క్రమాన్ని పేర్కొంటుంది. </p><code>&lt; పూర్ణాంకం&gt; (... -1, 0 (default), 1, ...)</code> ',
    'ml': '<p>ഫ്ളക്സ് ഇനങ്ങളുടെ ക്രമം വ്യക്തമാക്കുന്നു</p></p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'el': '<p>Προσδιορίζει την σειρά του αντικειμένου flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'mk': '<p>Го одредува редоследот на flex елементот.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'lv': '<p>Norāda flex vienības kārtas numuru.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'id': '<p> Tentukan urutan flex objek.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'ar': '<p>تحديد ترتيب عناصر فلكس.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'ca': '<p>Especifica l\'ordre dels elements flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'da': '<p>Fastsætter rækkefølgen af flex-elementet.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'et': '<p>Täpsustab flex elemendi järjekorda.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'fi': '<p>Määrittää yksittäisen flex-elementin järjestyksen.</p><code>&lt;integer&gt; (... -1, 0 (oletusarvo), 1, ...)</code>',
    'gl': '<p>Especifica a orde do elemento flex.</p><code>&lt;integer&gt; (... -1, 0, 1, ...)</code>',
    'th': '<p>กำหนดลำดับของ flex item</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'mn': '<p>Flex item-н байрлах дарааллыг заана.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'sk': '<p>Určuje poradie položky flex.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'si': '<p>flex අයිතමයේ අනුපිළිවෙල තීරණය කරයි.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'np': '<p>फ्लेक्स आइटमको क्रम निर्दिष्ट गर्दछ।</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'my': '<p>flex item ၏ အစဥ်အတိုင်းကို သတ်မှတ်ပေးသည်။</p><code>&lt;integer&gt; (... -1, 0 (မူရင်း), 1, ...)</code>',
    'yo': '<p>Ṣe pàtó ìbẹ̀rẹ̀ tàbí ìparí flex item.</p><code>&lt;integer&gt; (... -1, 0 (default), 1, ...)</code>',
    'no': '<p>Angir rekkefølgen på flekselementet.</p><code>&lt;integer&gt; (... -1, 0 (standard), 1, ...)</code>',
  }
};


================================================
FILE: js/game.js
================================================
var game = {
  colorblind: (localStorage.colorblind && JSON.parse(localStorage.colorblind)) || 'false',
  language: window.location.hash.substring(1) || 'en',
  difficulty: 'easy',
  level: parseInt(localStorage.level, 10) || 0,
  answers: (localStorage.answers && JSON.parse(localStorage.answers)) || {},
  solved: (localStorage.solved && JSON.parse(localStorage.solved)) || [],
  changed: false,
  clickedCode: null,

  start: function() {
    // navigator.language can include '-'
    // ref: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language
    var requestLang = window.navigator.language.split('-')[0];
    if (window.location.hash === '' && requestLang !== 'en' && messages.languageActive.hasOwnProperty(requestLang)) {
      game.language = requestLang;
      window.location.hash = requestLang;
    }

    game.translate();
    $('#level-counter .total').text(levels.length);
    $('#editor').show();
    $('#share').hide();
    $('#language').val(game.language);
    $('input[value="' + game.colorblind + '"]', '#colorblind').prop('checked', true);

    this.setHandlers();
    this.loadMenu();
    game.loadLevel(levels[game.level]);
  },

  setHandlers: function() {
    $('#next').on('click', function() {
      $('#code').focus();

      if ($(this).hasClass('disabled')) {
        if (!$('.frog').hasClass('animated')) {
          game.tryagain();
        }

        return;
      }

      $(this).removeClass('animated animation');
      $('.frog').addClass('animated bounceOutUp');
      $('.arrow, #next').addClass('disabled');

      setTimeout(function() {
        if (game.level >= levels.length - 1) {
          game.win();
        } else {
          game.next();
        }
      }, 2000);
    });

    $('#code').on('keydown', function(e) {
      if (e.keyCode === 13) {

        if (e.ctrlKey || e.metaKey) {
          e.preventDefault();
          game.check();
          $('#next').click();
          return;
        }

        var max = $(this).data('lines');
        var code = $(this).val();
        var trim = code.trim();
        var codeLength = code.split('\n').length;
        var trimLength = trim.split('\n').length;

        if (codeLength >= max) {

          if (codeLength === trimLength) {
            e.preventDefault();
            $('#next').click();
          } else {
            $('#code').focus().val('').val(trim);
          }
        }
      }
    }).on('input', game.debounce(game.check, 500))
    .on('input', function() {
      game.changed = true;
      $('#next').removeClass('animated animation').addClass('disabled');
    });

    $('#editor').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      $(this).removeClass();
    });

    $('#labelReset').on('click', function() {
      var warningReset = messages.warningReset[game.language] || messages.warningReset.en;
      var r = confirm(warningReset);

      if (r) {
        game.level = 0;
        game.answers = {};
        game.solved = [];
        game.loadLevel(levels[0]);

        $('.level-marker').removeClass('solved');
      }
    });

    $('#labelSettings').on('click', function() {
      $('#levelsWrapper').hide();
      $('#settings .tooltip').toggle();
      $('#instructions .tooltip').remove();
    })

    $('#language').on('change', function() {
      window.location.hash = $(this).val();
    });

    $('#difficulty').on('change', function() {
      game.difficulty = $('input:checked', '#difficulty').val();

      // setting height will prevent a slight jump when the animation starts
      var $instructions = $('#instructions');
      var height = $instructions.height();
      $instructions.css('height', height);

      var $markers = $('.level-marker');

      if (game.difficulty == 'hard' || game.difficulty == 'medium') {
        $instructions.slideUp();

        $markers.each(function() {
          var $marker = $(this);
          if ($marker[0].hasAttribute('title')) {
            $marker.attr('data-title', $marker.attr('title'));
            $marker.removeAttr('title');
          }
        });
      } else {
        $instructions.css('height', '').slideDown();

        $markers.each(function() {
          var $marker = $(this);
          if ($marker[0].hasAttribute('data-title')) {
            $marker.attr('title', $marker.attr('data-title'));
            $marker.removeAttr('data-title');
          }
        });
      }
    });

    $('#colorblind').on('change', function() {
      game.colorblind = $('input:checked', '#colorblind').val();

      if (game.colorblind == 'true') {
        $('.lilypad, .frog').addClass('cb-friendly');
      } else {
        $('.lilypad, .frog').removeClass('cb-friendly');
      }
    });

    $('body').on('click', function() {
      $('.tooltip').hide();
      clickedCode = null;
    });

    $('.tooltip, .toggle, #level-indicator').on('click', function(e) {
      e.stopPropagation();
    });

    $(window).on('beforeunload', function() {
      game.saveAnswer();
      localStorage.setItem('level', game.level);
      localStorage.setItem('answers', JSON.stringify(game.answers));
      localStorage.setItem('solved', JSON.stringify(game.solved));
      localStorage.setItem('colorblind', JSON.stringify(game.colorblind));
    }).on('hashchange', function() {
      game.language = window.location.hash.substring(1) || 'en';
      game.translate();

      $('#tweet iframe').remove();
      var html = '<a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="https://flexboxfroggy.com" data-via="thomashpark">Tweet</a> ' +
                 '<a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false">Follow @thomashpark</a>';
      $('#tweet').html(html);

      if (typeof twttr !== 'undefined') {
        twttr.widgets.load();
      }

      if (game.language === 'en') {
        history.replaceState({}, document.title, './');
      }
    });
  },

  prev: function() {
    this.level--;

    var levelData = levels[this.level];
    this.loadLevel(levelData);
  },

  next: function() {
    if (this.difficulty === "hard") {
      this.level = Math.floor(Math.random()* levels.length)
    } else {
      this.level++
    }

    var levelData = levels[this.level];
    this.loadLevel(levelData);
  },

  loadMenu: function() {
    levels.forEach(function(level, i) {
      var levelMarker = $('<span/>').addClass('level-marker').attr({'data-level': i, 'title': level.name}).text(i+1);

      if ($.inArray(level.name, game.solved) !== -1) {
        levelMarker.addClass('solved');
      }

      levelMarker.appendTo('#levels');
    });

    $('.level-marker').on('click', function() {
      game.saveAnswer();

      var level = $(this).attr('data-level');
      game.level = parseInt(level, 10);
      game.loadLevel(levels[level]);
    });

    $('#level-indicator').on('click', function() {
      $('#settings .tooltip').hide();
      $('#levelsWrapper').toggle();
      $('#instructions .tooltip').remove();
    });

    $('.arrow.left').on('click', function() {
      if ($(this).hasClass('disabled')) {
        return;
      }

      game.saveAnswer();
      game.prev();
    });

    $('.arrow.right').on('click', function() {
      if ($(this).hasClass('disabled')) {
        return;
      }

      game.saveAnswer();
      game.next();
    });
  },

  loadLevel: function(level) {
    $('#editor').show();
    $('#share').hide();
    $('#background, #pond').removeClass('wrap').attr('style', '').empty();
    $('#levelsWrapper').hide();
    $('.level-marker').removeClass('current').eq(this.level).addClass('current');
    $('#level-counter .current').text(this.level + 1);
    $('#before').text(level.before);
    $('#after').text(level.after);
    $('#next').removeClass('animated animation').addClass('disabled');

    var instructions = level.instructions[game.language] || level.instructions.en;
    $('#instructions').html(instructions);

    $('.arrow.disabled').removeClass('disabled');

    if (this.level === 0) {
      $('.arrow.left').addClass('disabled');
    }

    if (this.level === levels.length - 1) {
      $('.arrow.right').addClass('disabled');
    }

    var answer = game.answers[level.name];
    $('#code').val(answer).focus();

    this.loadDocs();

    var lines = Object.keys(level.style).length;
    $('#code').height(20 * lines).data("lines", lines);

    var string = level.board;
    var markup = '';
    var colors = {
      'g': 'green',
      'r': 'red',
      'y': 'yellow'
    };

    for (var i = 0; i < string.length; i++) {
      var c = string.charAt(i);
      var color = colors[c];

      var lilypad = $('<div/>').addClass('lilypad ' + color + (this.colorblind == 'true' ? ' cb-friendly' : '')).data('color', color);
      var frog = $('<div/>').addClass('frog ' + color + (this.colorblind == 'true' ? ' cb-friendly' : '')).data('color', color);

      $('<div/>').addClass('bg').css(game.transform()).appendTo(lilypad);
      $('<div/>').addClass('bg animated pulse infinite').appendTo(frog);

      $('#background').append(lilypad);
      $('#pond').append(frog);
    }

    var classes = level.classes;

    if (classes) {
      for (var rule in classes) {
        $(rule).addClass(classes[rule]);
      }
    }

    var selector = level.selector || '';
    $('#background ' + selector).css(level.style);

    game.changed = false;
    game.applyStyles();
    game.check();
  },

  loadDocs: function() {
    $('#instructions code').each(function() {
      var code = $(this);
      var text = code.text();

      if (text in docs) {
        code.addClass('help');
        code.on('click', function(e) {
          e.stopPropagation();

          // If click same code when tooltip already displayed, just remove current tooltip.
          if ($('#instructions .tooltip').length !== 0 && clickedCode === code){
            $('#instructions .tooltip').remove();
            return;
          }

          $('#levelsWrapper').hide();
          $('#settings .tooltip').hide();
          $('#instructions .tooltip').remove();
          var html = docs[text][game.language] || docs[text].en;
          var tooltipX = code.offset().left;
          var tooltipY = code.offset().top + code.height() + 13;
          $('<div class="tooltip"></div>').html(html).css({
            top: tooltipY,
            left: tooltipX
          }).appendTo($('#instructions'));

          var getDefaultPropVal = (pValue) => {
            if (pValue == '<integer>')
              return '0';
            else if (pValue == '<flex-direction>')
              return 'row nowrap';

            return pValue;
          };

          $('#instructions .tooltip code').on('click', function(event) {
            var pName = text;
            var pValue = event.target.textContent.split(' ')[0];
            pValue = getDefaultPropVal(pValue);
            game.writeCSS(pName, pValue);

            game.check();
          });
          clickedCode = code;
        });
      }
    });
  },

  applyStyles: function() {
    var level = levels[game.level];
    var code = $('#code').val();
    var selector = level.selector || '';
    $('#pond ' +  selector).attr('style', code);
    game.saveAnswer();
  },

  check: async function() {
    if (!document.startViewTransition) {
      game.applyStyles();
      game.compare();
      return;
    }

    const transition = document.startViewTransition(() => game.applyStyles());

    try {
      await transition.finished;
    } finally {
      game.compare();
    }
  },

  compare: function() {
    var level = levels[game.level];
    var lilypads = {};
    var frogs = {};
    var correct = true;

    $('.frog').each(function() {
      var position = $(this).position();
      position.top = Math.floor(position.top);
      position.left = Math.floor(position.left);

      var key = JSON.stringify(position);
      var val = $(this).data('color');
      frogs[key] = val;
    });

    $('.lilypad').each(function() {
      var position = $(this).position();
      position.top = Math.floor(position.top);
      position.left = Math.floor(position.left);

      var key = JSON.stringify(position);
      var val = $(this).data('color');

      if (!(key in frogs) || frogs[key] !== val) {
        correct = false;
      }
    });

    if (correct) {
      if ($.inArray(level.name, game.solved) === -1) {
        game.solved.push(level.name);
      }

      $('[data-level=' + game.level + ']').addClass('solved');
      $('#next').removeClass('disabled').addClass('animated animation');
    } else {
      game.changed = true;
      $('#next').removeClass('animated animation').addClass('disabled');
    }
  },

  saveAnswer: function() {
    var level = levels[this.level];
    game.answers[level.name] = $('#code').val();
  },

  tryagain: function() {
    $('#editor').addClass('animated shake');
  },

  win: function() {
    var solution = $('#code').val();

    this.loadLevel(levelWin);

    $('#editor').hide();
    $('#code').val(solution);
    $('#share').show();
    $('.frog .bg').removeClass('pulse').addClass('bounce');
  },

  transform: function() {
    var scale = 1 + ((Math.random() / 5) - 0.2);
    var rotate = 360 * Math.random();

    return {'transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)'};
  },

  translate: function() {
    document.title = messages.title[game.language] || messages.title.en;
    $('html').attr('lang', game.language);

    var level = $('#editor').is(':visible') ? levels[game.level] : levelWin;
    var instructions = level.instructions[game.language] || level.instructions.en;
    $('#instructions').html(instructions);
    game.loadDocs();

    $('.translate').each(function() {
      var label = $(this).attr('id');
      if (messages[label]) {
        var text = messages[label][game.language] || messages[label].en;
	  }

      $('#' + label).text(text);
    });
  },

  debounce: function(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  },

  writeCSS: function(pName, pValue){
    var tokens = $('#code').val().trim().split(/[\n:;]+/).filter(i => i);
    var keywords = Object.keys(docs);
    var content = '';
    var filled = false;

    // Do nothing when click property name inside Tooltip
    if (keywords.includes(pValue)) return;

    tokens.forEach(function (token, i){
      var trimmedToken = token.trim();
      if (!keywords.includes(trimmedToken)){
        return;
      }

      var append = content !== '' ? '\n' : '';
      if (trimmedToken === pName && !filled)
      {
        filled = true;
        append += trimmedToken + ': ' + pValue + ';';
      }
      else if (i + 1 < tokens.length){
        var val = !keywords.includes(tokens[i + 1].trim()) ? tokens[i + 1].trim() : ''; // TODO: Maybe prop value validiation required
        append += trimmedToken + ': ' + val + ';';
      }

      content += append;
    });

    if (!filled){
      content += content !== '' ? '\n' : '';
      content += pName + ': ' + pValue + ';';
    }

    $('#code').val(content);
    $('#code').focus();
  }
};

$(document).ready(function() {
  game.start();
});


================================================
FILE: js/levels.js
================================================
var levels = [
  {
    name: 'justify-content 1',
    instructions: {
      'en': '<p>Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the <code>justify-content</code> property, which aligns items horizontally and accepts the following values:</p><ul><li><code>flex-start</code>: Items align to the left side of the container.</li><li><code>flex-end</code>: Items align to the right side of the container.</li><li><code>center</code>: Items align at the center of the container.</li><li><code>space-between</code>: Items display with equal spacing between them.</li><li><code>space-around</code>: Items display with equal spacing around them.</li></ul><p>For example, <code>justify-content: flex-end;</code> will move the frog to the right.</p>',
      'bn': '<p>Flexbox Froggy তে আপনাকে স্বাগতম, একটি গেইম যেখানে আপনি Froggy (ফ্রগি) এবং তার বন্ধুদের সাহায্য করবেন CSS কোড লিখে! <code>justify-content</code> property ব্যবহার করে ব্যাঙটি কে ডান পাশের পদ্ম-পাতায় গাইড করুন (নিয়ে যান), যা item গুলোকে অনুভূমিকভাবে (horizontally) সারিবদ্ধ করে এবং নিচের মানগুলি গ্রহণ করেঃ</p><ul><li><code>flex-start</code>: Container এর বাম দিকে সারিবদ্ধ (align) করা item গুলো।</li><li><code>flex-end</code>: Container এর ডান দিকে সারিবদ্ধ (align) করা item গুলো।</li><li><code>center</code>: Container এর মাঝে সারিবদ্ধ (align) করা item গুলো।</li><li><code>space-between</code>: Item গুলোর মাঝে সমান যায়গা বিদ্যমান।</li><li><code>space-around</code>: Item গুলোর পাশে সমান যায়গা বিদ্যমান।</li></ul><p>উদাহরণস্বরূপ, <code>justify-content: flex-end;</code> ব্যাঙটিকে ডান দিকে সরিয়ে নিবে।</p>',
      'af': '<p>Welkom by Flexbox Froggy, `n spel waar jy Froggy en sy vriende help deur CSS te skryf! Ly die padda na die lelie met die <code>justify-content</code> eienskap, wat items horisontaal rig en die volgende waardes aanvaar:</p><ul><li><code>flex-start</code>: Rig items na die linker kant van die houer.</li><li><code>flex-end</code>: Rig items na die regter kant van die houer.</li><li><code>center</code>: Rig items na die middel van die houer.</li><li><code>space-between</code>: Items het eweredige spasie tussen-in.</li><li><code>space-around</code>: Items het eweredige spasie rondom.</li></ul><p>Byvoorbeeld, <code>justify-content: flex-end;</code>beweeg die padda na die regs.</p>',
      'he': '<p>ברוך הבא ל-Flexbox Froggy, משחק שבו אתם עוזרים ל-Froggy וחבריו על ידי כתיבת קוד CSS! שימו את הצפרדע על העלה בצד ימין בשימוש בתכונה <code>justify-content</code>, שגורמת ליישור הפריטים ב-flex על גבי הציר האופקי ומקבלת את הערכים הבאים:</p><p><ul><li><code>flex-start</code>: פריטים מיושרים לצד השמאלי של הקונטיינר.</li><li><code>flex-end</code>: פריטים מיושרים לצד הימני של הקונטיינר.</li><li><code>center</code>: פריטים מיושרים למרכז של הקונטיינר.</li><li><code>space-between</code>: פריטים מוצגים עם מרווחים שווים בינהם.</li><li><code>space-around</code>: פריטים מוצגים עם מרווחים שווים מסביבם.</li></ul><p>לדוגמא, <code>;justify-content: flex-end</code> יזיז את הצפרדע לצד ימין.</p>',
      'ro': '<p>Bine ai venit la Flexbox Froggy, un joc unde îl ajuți pe Froggy și prietenii lui scriind cod CSS! Ghidează această broască pe nufărul din partea dreapta utilizând proprietatea <code>justify-content</code>, care aliniază elementele orizontal și acceptă următoarele valori:</p><ul><li><code>flex-start</code>: Elementele se aliniază pe partea stangă a containerului.</li><li><code>flex-end</code>: Elementele se aliniază pe partea dreaptă a containerului.</li><li><code>center</code>: Elementele se aliniază pe centrul containerului.</li><li><code>space-between</code>: Elementele se afișează cu spațiu egal între ele.</li><li><code>space-around</code>: Elementele se afișează cu spațiu egal în jurul lor.</li></ul><p>De exemplu, <code>justify-content: flex-end;</code> va muta broasca la dreapta.</p>',
      'bg': '<p>Добре дошли във Flexbox Froggy, игра, в която вие помагате на жабета и приятели, пишейки CSS код! Насочете това жабче към листото в дясно използвайки свойството <code>justify-content</code>, което подрежда елементи по хоризонталата и приема следните стойности:</p><ul><li><code>flex-start</code>: Елементите се подреждат в лявата страна на контейнера.</li><li><code>flex-end</code>: Елементите се подреждат в дясната страна на контрейнера.</li><li><code>center</code>: Елементите се подреждат в средата на контейнера.</li><li><code>space-between</code>: Елементите се подреждат с равно разстояние помежду им.</li><li><code>space-around</code>: Елементите се подреждат с равно разстояние около тях.</li></ul><p>Например, <code>justify-content: flex-end;</code> ще премести жабчето в дясно.</p>',
      'de': '<p>Willkommen bei Flexbox Froggy, einem Spiel, in dem du Froggy und seinen Freunden hilfst, indem du CSS-Code schreibst! Führe diesen Frosch zum Seerosenblatt auf der rechten Seite, indem du die <code>justify-content</code>-Eigenschaft verwendest, die Elemente horizontal ausrichtet und die folgenden Werte akzeptiert:</p><ul><li><code>flex-start</code>: Elemente an der linken Seite des Containers ausrichten.</li><li><code>flex-end</code>: Elemente an der rechten Seite des Containers ausrichten.</li><li><code>center</code>: Elemente an der Mitte des Containers ausrichten.</li><li><code>space-between</code>: Elemente mit gleichem Innenabstand ausrichten.</li><li><code>space-around</code>: Elemente mit gleichem Außenabstand ausrichten.</li></ul><p>Mit <code>justify-content: flex-end;</code> bewegst du den Frosch beispielsweise nach rechts.</p>',
      'es': '<p>Bienvenido a Flexbox Froggy, un juego donde ayudarás a Froggy y a sus amigos escribiendo código CSS. Guía a esta rana hacia la hoja de lirio en la derecha, usando la propiedad <code>justify-content</code>, la cual alinea elementos horizontalmente y acepta los siguientes valores:</p><ul><li><code>flex-start</code>: Alinea elementos al lado izquierdo del contenedor.</li><li><code>flex-end</code>: Alinea elementos al lado derecho del contenedor.</li><li><code>center</code>: Alinea elementos en el centro del contenedor.</li><li><code>space-between</code>: Muestra elementos con la misma distancia entre ellos.</li><li><code>space-around</code>: Muestra elementos con la misma separación alrededor de ellos.</li></ul><p>Por ejemplo, <code>justify-content: flex-end;</code> moverá la rana a la derecha.</p>',
      'pt-br': '<p>Bem-vindo ao Flexbox Froggy, um jogo onde você pode ajudar Froggy e seus amigos ao escrever código CSS! Guie o sapo à vitória-régia na direita usando a propriedade <code>justify-content</code>, que alinha itens horizontalmente e aceita os seguintes valores:</p><ul><li><code>flex-start</code>: Itens se alinham à esquerda do container.</li><li><code>flex-end</code>: Itens se alinham à direita do container.</li><li><code>center</code>: Itens se alinham no centro do container.</li><li><code>space-between</code>: Itens se alinham com distância igual entre eles.</li><li><code>space-around</code>: Itens se alinham com distância igual em torno deles.</li></ul><p>Por exemplo, <code>justify-content: flex-end;</code> moverá o sapo para a direita.</p>',
      'fr': '<p>Bienvenue à Flexbox Froggy, un jeu où vous aidez Froggy la grenouille et ses amis en écrivant du code CSS! Guidez cette grenouille au nénuphar à la droite de l\'étang en utilisant la propriété <code>justify-content</code>, qui aligne les éléments horizontalement et accepte les valeurs suivantes&nbsp;:</p><ul><li><code>flex-start</code>&nbsp;: Les éléments s\'alignent au côté gauche du conteneur.</li><li><code>flex-end</code> : Les éléments s\'alignent au côté droit du conteneur.</li><li><code>center</code>&nbsp;: Les éléments s\'alignent au centre du conteneur.</li><li><code>space-between</code>&nbsp;: Les éléments s\'affichent avec un espace égal entre eux.</li><li><code>space-around</code>&nbsp;: Les éléments s\'affichent avec un espacement égal à l\'entour d\'eux.</li></ul><p>Par exemple,  <code>justify-content: flex-end;</code> bougera la grenouille vers la droite.</p>',
      'ru': '<p>Добро пожаловать в Flexbox Froggy. Игра, в которой тебе нужно помочь лягушонку Фроги и его друзьям, написав CSS код! Направь этого лягушонка на лилию справа, используя свойство <code>justify-content</code>, которое выравнивает элементы горизонтально и принимает следующие значения:</p><ul><li><code>flex-start</code>: элементы выравниваются по левой стороне контейнера.</li><li><code>flex-end</code>: элементы выравниваются по правой стороне контейнера.</li><li><code>center</code>: элементы выравниваются по центру контейнера.</li><li><code>space-between</code>: элементы отображаются с одинаковыми отступами между ними.</li><li><code>space-around</code>: элементы отображаются с одинаковыми отступами вокруг них.</li></ul><p>Например, <code>justify-content: flex-end;</code> сдвинет лягушонка вправо.</p>',
      'fa': '<p>به آموزش فلکس باکس  خوش آمدید, این قورباغه به شما کمک میکنه که بهتر فلکس باکس رو درک کنید! با استفاده از خصوصیت <code>justify-content</code> می‌تونید نحوه چیدمان آیتم‌ها بر روی محور اصلی را تعیین کنید, این خصوصیت مقادیر زیر را می پذیرد:</p><ul><li><code>flex-start</code>: آیتم‌ها از ابتدای <span class="en-font"><span class="en-font">flex-line</span></span> ها چیده می‌شوند.</li><li><code>flex-end</code>:  آیتم‌ها از انتهای <span class="en-font">flex-line</span> ها چیده می‌شوند.</li><li><code>center</code>: آیتم‌ها از وسط <span class="en-font">flex-line</span> ها چیده می‌شوند.</li><li><code>space-between</code>: آیتم اول در ابتدا و آیتم آخر در انتهای <span class="en-font">flex-line</span> قرار می گیرند و بقیه آیتم ها در بین آنها با یک فاصله ی برابر قرار می‌گیرند.</li><li><code>space-around</code>: آیتم ها با فضای برابر در کنار یکدیگر قرار می‌گیرند.</li></ul><p> برای مثال , <bdi><code style="direction:ltr;">justify-content: flex-end;</code></bdi> قورباغه رو به سمت راست جا به جا میکنه',
      'zh-cn': '<p>欢迎来到Flexbox Froggy。在游戏中你会靠写CSS代码来帮助青蛙和他的朋友们！请用<code>justify-content</code>属性指引青蛙到右边的荷叶上。这个属性可以水平对齐元素，并且接受以下几个参数：</p><ul><li><code>flex-start</code>: 元素和容器的左端对齐。</li><li><code>flex-end</code>: 元素和容器的右端对齐。</li><li><code>center</code>: 元素在容器里居中。</li><li><code>space-between</code>:元素之间保持相等的距离。</li><li><code>space-around</code>:元素周围保持相等的距离。</li></ul><p>举个例子，<code>justify-content: flex-end;</code>会将青蛙移到右边。</p>',
      'zh-tw': '<p>歡迎來到Flexbox Froggy。在遊戲中你會靠寫CSS代碼來幫助青蛙和他的朋友們！請用<code>justify-content</code>屬性指引青蛙到右邊的荷葉上。這個屬性可以水平對齊元素，並且接受一下幾個參數: </p><ul><li><code>flex-start</code>: 元素和容器的左端對齊。</li><li><code>flex-end</code>: 元素和容器的右端對齊。</li><li><code>center</code>: 元素在容器裏居中。</li><li><code>space-between</code>: 元素之間保持相等的距離。</li><li><code>space-around</code>: 元素周圍保持相等的距離。</li></ul></p>舉個例子，<code>justify-content: flex-end;</code>會將青蛙移到右邊。</p>',
      'tr': '<p>Flexbox Froggy\'ye, Froggy ve arkadaşlarına CSS kodu yazarak yardım edeceğiniz oyunumuza hoşgeldiniz! <code>justify-content</code> kuralını kullanarak bu kurbağayı sağ taraftaki nilüfer yaprağının üzerine zıplatın. Bu özellik öğeleri yatay olarak hizalar ve şu değerleri alır:</p><ul><li><code>flex-start</code>: Öğeleri flexbox container\'ın sol tarafına hizalar.</li><li><code>flex-end</code>: Öğeleri flexbox container\'ın sağ tarafına hizalar.</li><li><code>center</code>: Öğeleri flexbox container\'ın ortasına hizalar.</li><li><code>space-between</code>: Öğeler eşit aralıklarla yatay şekilde yayılır</li><li><code>space-around</code>: Öğeler etraflarında eşit aralıklar olacak şekilde yatay şekilde yayılır</li></ul><p>Örneğin, <code>justify-content: flex-end;</code> kurbağayı sağa taşır.</p>',
      'az': '<p>Flexbox Froggy\'yə, Froggy və dostlarına CSS kodu yazaraq kömək edəcəyiniz oyunumuza xoşgəldiniz! <code>justify-content</code> qaydasını istifadə edərək qurbağanı sağ tərəfdəki zanbaq yarpağının üstünə aparın. Bu özəllik elementləri üfüqi şəkildə nizamlayar və bu dəyərləri qəbul edər:</p><ul><li><code>flex-start</code>: Elementləri flexbox container\'inin sol tərəfinə nizamlayar.</li><li><code>flex-end</code>: Elementləri flexbox container\'inin sağ tərəfinə nizamlayar.</li><li><code>center</code>: Elementləri flexbox container\'inin ortasına nizamlayar.</li><li><code>space-between</code>: Elementlər bərabər aralıqlarda üfüqi şəkildə yayılar</li><li><code>space-around</code>: Elementlər ətraflarında bərabər aralıqlar şəklində üfüqi şəkildə yayılar</li></ul><p>Məsələn, <code>justify-content: flex-end;</code> qurbağanı sağa aparar.</p>',
      'it': '<p>Benvenuto su Flexbox Froggy, un gioco in cui devi aiutare Froggy e i suoi amici scrivendo codice CSS! Guida la rana verso la foglia di ninfea sulla destra usando la proprietà <code>justify-content</code>, la quale allinea gli elementi orizzontalmente e accetta i seguenti valori:</p><ul><li><code>flex-start</code>: Allinea gli elementi alla sinistra del contenitore.</li><li><code>flex-end</code>: Allinea gli elementi alla destra del contenitore.</li><li><code>center</code>: Allinea gli elementi al centro del contenitore.</li><li><code>space-between</code>: Separa gli elementi con uguale spazio tra di loro.</li><li><code>space-around</code>: Separa gli elementi con uguale spazio attorno ad essi.</li></ul><p>Per esempio, <code>justify-content: flex-end;</code> muoverà la rana sulla destra.</p>',
      'ko': '<p>Flexbox Froggy에 오신 것을 환영합니다! Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임입니다. 오른쪽의 <code>justify-content</code> 속성을 이용하여 개구리가 수련잎으로 이동할 수 있도록 도와주세요. 이 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬합니다:</p><ul><li><code>flex-start</code>: 요소들을 컨테이너의 왼쪽으로 정렬합니다.</li><li><code>flex-end</code>: 요소들을 컨테이너의 오른쪽으로 정렬합니다.</li><li><code>center</code>: 요소들을 컨테이너의 가운데로 정렬합니다.</li><li><code>space-between</code>: 요소들 사이에 동일한 간격을 둡니다.</li><li><code>space-around</code>: 요소들 주위에 동일한 간격을 둡니다.</li></ul><p>예를 들어, <code>justify-content: flex-end;</code>는 개구리를 오른쪽으로 이동시킵니다.</p>',
      'lt': '<p>Sveiki atvykę į "Flexbox Froggy" - žaidimą, kuriame rašydami CSS kodą pagelbėsite varlytei ir jos draugams! Padėkite šiai varlytei nusigauti ant lelijos lapo dešinėje, naudodami komandą <code>justify-content</code>, kuri lygiuoja elementus horizontaliai ir reaguoja šias vertes:</p><ul><li><code>flex-start</code>: Elementai lygiuojami supančio elemento kairėje.</li><li><code>flex-end</code>: Elementai lygiuojami supančio elemento dešinėje.</li><li><code>center</code>: Elementai lygiuojami supančio elemento viduryje.</li><li><code>space-between</code>: Elementai atvaizduojami taip, kad tarpai tarp jų būtų vienodi.</li><li><code>space-around</code>: Elementai atvaizduojami su vienodais tarpais aplink juos.</li></ul><p>Pavyzdžiui, <code>justify-content: flex-end;</code> perstums varlytę į dešinę pusę.</p>',
      'vi': '<p>Chào mừng bạn đến Flexbox Froggy, một trò chơi để bạn giúp đỡ Froggy và bạn bè bằng cách viết mã CSS! Hướng dẫn chú ếch này đến lá bông súng bên phải bằng cách sử dụng từ <code>justify-content</code> để sắp xếp các hạng mục theo chiều ngang và chấp nhận các giá trị sau:</p><ul><li><code>flex-start</code>: Các hạng mục sẽ được sắp xếp về phía bên trái của hộp chứa.</li><li><code>flex-end</code>: Các hạng mục sẽ được sắp xếp về phía bên phải của hộp chứa.</li><li><code>center</code>: Các hạng mục sẽ được sắp xếp ở giữa chính của hộp chứa.</li><li><code>space-between</code>: Các hạng mục sẽ được trình bày với khoảng cách bằng nhau giữa chúng.</li><li><code>space-around</code>: Các hạng mục sẽ được trình bày với khoảng cách bằng nhau xung quanh chúng.</li></ul><p>Ví dụ như, <code>justify-content: flex-end;</code> sẽ di chuyển chú ếch qua bên phải.</p>',
      'pl': '<p>Witaj w grze Flexbox Froggy. Grze, w której pomagasz żabce Froggy i jej przyjaciołom pisząc kod CSS! Doprowadź żabki do odpowiednich listków przy pomocy <code>justify-content</code>, właściwości która wyrównuje elementy w poziomie i przyjmuje wartości:</p><ul><li><code>flex-start</code>: Elementy wyrównują się do lewej strony kontenera.</li><li><code>flex-end</code>: Elementy wyrównują się do prawej strony kontenera.</li><li><code>center</code>: Elementy wyrównują się do środka kontenera.</li><li><code>space-between</code>: Elementy wyświetlają się na całej szerokości kontenera z równymi odstępami.</li><li><code>space-around</code>: Każdy z elementów wyświetla się z taką samą ilością przestrzeni wokół.</li></ul><p>Na przykład: <code>justify-content: flex-end;</code> przesunie żabę do prawej strony.</p>',
      'cs': '<p>Vítejte ve hře Flexbox Froggy, kde pomáháte žabce a jejím kamarádům psaním CSS stylů! Pomozte žabce dostat se na leknín vpravo vlastností <code>justify-content</code>, která zarovnává prvky vodorovně a nabývá následujících hodnot:</p><ul><li><code>flex-start</code>: Zarovnat prvky vlevo.</li><li><code>flex-end</code>: Zarovnat prvky vpravo.</li><li><code>center</code>: Zarovnat prvky na střed.</li><li><code>space-between</code>: Rozmístit rovnoměrné mezery mezi prvky.</li><li><code>space-around</code>: Rozmístit rovnoměrné mezery kolem prvků.</li></ul><p>Například styl <code>justify-content: flex-end;</code> posune žabku doprava.</p>',
      'ja': '<p>Flexbox Froggyへようこそ！　これはカエルたちを、CSSコードを書いて助けてあげるゲームです。<code>justify-content</code>を使って、このカエルを右の蓮の葉まで連れていってあげましょう。このプロパティはアイテムを水平方向に並べるものです。以下の値を取ります。</p><ul><li><code>flex-start</code>: アイテムはコンテナーの左側に並びます。</li><li><code>flex-end</code>: アイテムはコンテナーの右側に並びます。</li><li><code>center</code>: アイテムはコンテナーの中央に並びます。</li><li><code>space-between</code>: アイテムはその間に等しい間隔を空けて表示されます。</li><li><code>space-around</code>: アイテムはその周囲に等しい間隔を空けて表示されます。</li></ul><p>例えば、<code>justify-content: flex-end;</code>はカエルを右側へ動かします。</p>',
      'hu': '<p>Üdvözlünk a Flexbox Froggy játékban, ahol segíthetsz Froggy-nak és barátainak egy kis CSS kód írásával! Vezesd ezt a békát a jobb oldali tündérrózsára a <code>justify-content</code> tulajdonság használatával, amely az elemek vízszintes igazítását teszi lehetővé a következő értékek segítségével:</p><ul><li><code>flex-start</code>: Az elemek a konténer bal oldalára igazodnak.</li><li><code>flex-end</code>: Az elemek a konténer jobb oldalára igazodnak.</li><li><code>center</code>: Az elemek a konténer közepére igazodnak.</li><li><code>space-between</code>: Az elemek úgy igazodnak, hogy köztük a hely egyenlő mértékben oszlik meg.</li><li><code>space-around</code>: Az elemek úgy igazodnak, hogy a körülöttük lévő hely egyenlő maradjon.</li></ul><p>Például a <code>justify-content: flex-end;</code> a békát a jobb oldalra mozgatja.</p>',
      'eo': '<p>Bonvenon al Flexbox Froggy, ludo en kiu necesas helpi Froggy-on kaj liajn amikojn skribante CSS-an kodon! Gvidu tiun ranon al la dekstra nimfeofolio uzante la <code>justify-content</code> trajton, kiu liniigas elementojn horizontale kaj akceptas la sekvajn valorojn:</p><ul><li><code>flex-start</code>: Elementoj linias maldekstraflanken de la ujo.</li><li><code>flex-end</code>: Elementoj linias dekstraflanken de la ujo.</li><li><code>center</code>: Elementoj linias je la centro de la ujo.</li><li><code>space-between</code>: Elementoj afiŝas kun samaj spacoj inter ili.</li><li><code>space-around</code>: Elementoj afiŝas kun samaj spacoj ĉirkaŭ ili.</li></ul><p>Ekzemple, <code>justify-content: flex-end;</code> movos ranon dekstren.</p>',
      'sv': '<p>Välkommen till  Flexbox Froggy, ett spel där du hjälper Froggy och vänner genom att skriva CSS-kod! Guida grodan till blombladen till höger genom att använda <code>justify-content</code> attributen, vilket justerar objekten horisontellt och accepterar följande värden:</p><ul><li><code>flex-start</code>: Objekt justeras till vänster i containern.</li><li><code>flex-end</code>: Objekt justeras till höger i containern.</li><li><code>center</code>: Objekt justeras i mitten av containern.</li><li><code>space-between</code>: Objekt justeras med lika utrymme mellan varandra.</li><li><code>space-around</code>: Objekt justeras med lika utrymme runt omkring varandra.</li></ul><p>Till exempel, <code>justify-content: flex-end;</code> flyttar grodan till höger.</p>',
      'uk': '<p>Вітаємо у Flexbox Froggy - гра, де ви маєте допомогати жабеняті Фрогі та його друзям написанням CSS коду! Всади жабеня на лист латаття праворуч, за допомогою властивості <code>justify-content</code>, яка вирівнює елементи по горизонталі й набуває таких значень:</p><ul><li><code>flex-start</code>: Елементи вирівнюються по лівій стороні контейнера.</li><li><code>flex-end</code>: Елементи вирівнюються по правій стороні контейнера.</li><li><code>center</code>: Елементи вирівнюються по центру контейнера.</li><li><code>space-between</code>: Елементи буде зображено з рівними відступами поміж них.</li><li><code>space-around</code>: Елементи буде зображено з рівними відступами навколо них.</li></ul><p>Наприклад, <code>justify-content: flex-end;</code> пересуне жабеня праворуч.</p>',
      'hi': '<p>आपका Flexbox Froggy में स्वागत है। इस खेल में आप CSS Code लिख कर Froggy और उसके दोस्तों की मदद करते हैं। <code>justify-content</code> प्रॉपर्टी की सहायता से मेंढकों को लिली के पत्तों तक पहुंचाइये। यह प्रॉपर्टी वस्तुओं को छैतिज रूप से संरेखित (पंक्तिबद्ध ) करती है एवं निम्न मान स्वीकार करती है। :</p><ul><li><code>flex-start</code>: यह वस्तु को कंटेनर की बाईं तरफ सरेंखित करता है।</li><li><code>flex-end</code>: यह वस्तु को कंटेनर की दाईं तरफ सरेंखित करता है। </li><li><code>center</code>: यह वस्तु को कंटेनर के मध्य में संरेखित करता है। </li><li><code>space-between</code>: यह वस्तुओं को बराबर अंतर के साथ प्रदर्शित करता है। </li><li><code>space-around</code>: यह वस्तुओं के चारों ओर के अंतर को प्रदर्शित करता है।</li></ul><p>उदाहरण के लिये, <code>justify-content: flex-end;</code> मेंढकों को दायीं तरफ पंहुचा देगा।</p>',
      'gj': '<p>તમારું  Flexbox Froggyમાં સ્વાગત છે. તમે આ રમતમાં CSS Code લખીને Froggy અને  તેના મિત્રોની મદદ કરી શકો છો. <code>justify-content</code> પ્રોપેરટીનો ઉપયોગ કરીને દેડકાઓને લીલા પાંદડાઓ સુધી લઇ જાઓ. આ પ્રોપર્ટી itemsને ક્ષિતિજમાં હાર બદ્ધ ગોઠવે છે તેમજ નીચેની value ને સ્વીકારે છે. :</p><ul><li><code>flex-start</code>: આ itemને કન્ટેનરની ડાબી બાજુએ ખસેડે છે. </li><li><code>flex-end</code>: આ itemને કન્ટેનરની જમણી  બાજુએ ખસેડે છે. </li><li><code>center</code>: આ itemને કન્ટેનરની મધ્યમાં  બાજુએ ખસેડે છે. </li><li><code>space-between</code>: itemsને  એક બીજા થી સમાન અંતરે હોય એમ દર્શાવે છે .</li><li><code>space-around</code>: itemsને પોતાની ચારેતરફ થી સમાન અંતરે દર્શાવે છે., </li></ul><p>ઉદાહરણ તરીકે ,<code>justify-content: flex-end;</code> દેડકાઓને ડાબી તરફ પહોંચાડી દેવામાં આવશે,</p>',
      'sr': '<p>Добродошли у Флексбокс Жабца, игру у којој помажете Жабцу и пријатељима пишући CSS код! Смести жабицу на локвањ који је десно користећи <code>justify-content</code> својство (property), које поравњава елементе хоризонтално и прихвата следеће вредности:</p><ul><li><code>flex-start</code>: Елементе поравњава на леву страну контејнера.</li><li><code>flex-end</code>: Елементе поравњава на десну страну контејнера.</li><li><code>center</code>: Елементе поставља у центар контејнера.</li><li><code>space-between</code>: Елементе приказује са једнаким растојањем између елемената.</li><li><code>space-around</code>: Елементе приказује са једнаким растојањем око елемената.</li></ul><p>На пример <code>justify-content: flex-end;</code> ће померити жабицу у десно.</p>',
      'bs': '<p>Dobrodošli u Fleksboks Žabca, igru u kojoj pomažete Žabcu i prijateljima pišući CSS kod! Smjesti žabicu na list koji je desno koristeći <code>justify-content</code> svojstvo (property), koje poravnjava elemente horizontalno i prihvata sljedeće vrijednosti:</p><ul><li><code>flex-start</code>: Elemente poravnava na lijevu stranu kontejnera.</li><li><code>flex-end</code>: Elemente poravnava na desnu stranu kontejnera.</li><li><code>center</code>: Elemente postavlja u centar kontejnera.</li><li><code>space-between</code>: Elemente prikazuje sa jednakim rastojanjem između elemenata.</li><li><code>space-around</code>: Elemente prikazuje sa jednakim rastojanjem oko elemenata.</li></ul><p>Na primjer <code>justify-content: flex-end;</code> će pomeriti žabicu u desno.</p>',
      'hr': '<p>Dobrodošli u Fleksboks Žapca, igru u kojoj pomažete Žapcu i prijateljima pišući CSS kod! Smjestite žabicu na list koji je desno koristeći <code>justify-content</code> svojstvo (property), koje poravnava elemente horizontalno i prihvaća sljedeće vrijednosti:</p><ul><li><code>flex-start</code>: Elemente poravnava na lijevu stranu kontejnera.</li><li><code>flex-end</code>: Elemente poravnava na desnu stranu kontejnera.</li><li><code>center</code>: Elemente postavlja u centar kontejnera.</li><li><code>space-between</code>: Elemente prikazuje sa jednakim rastojanjem između elemenata.</li><li><code>space-around</code>: Elemente prikazuje sa jednakim rastojanjem oko elemenata.</li></ul><p>Na primjer <code>justify-content: flex-end;</code> će pomaknuti žabicu u desno.</p>',
      'nl': '<p>Welkom bij Flexbox Froggy, een spel waar je Froggy en zijn vrienden helpt door CSS-code te schrijven! Leid deze kikker naar het lelieblaadje aan de rechterkant door gebruik te maken van de <code>justify-content</code> eigenschap. Deze lijnt elementen horizontaal uit, en aanvaardt de volgende waarden:</p><ul><li><code>flex-start</code>: Elementen aan de linkerkant van de container uitlijnen.</li><li><code>flex-end</code>: Elementen aan de rechterkant van de container uitlijnen.</li><li><code>center</code>: Elementen in het midden van de container uitlijnen.</li><li><code>space-between</code>: Elementen opstellen gelijkmatig verdeeld over de as.</li><li><code>space-around</code>: Elementen opstellen met gelijke ruimte aan de buitenkanten op de as.</li></ul><p>Bijvoorbeeld, <code>justify-content: flex-end;</code> zal de kikker naar rechts bewegen</p>',
      'ta': '<p>Flexbox Froggy-கு வரவேற்கிறோம், இந்த விளையாட்டில் நீங்கள் CSS குறியீடு எழுதி தவளை மற்றும் அதன் நண்பர்களுக்கு உதவலாம்.! பின்வரும் குறியீடு பயன்படுத்தி இந்த தவளை வலதுபுறம் உள்ள இலையின் மீது அமர வழிகாட்டுங்கள். <code>justify-content</code> -என்கிற property கிடைமட்டமாக பொருட்களை சீரமைக்கும் மற்றும் பின்வரும் மதிப்புகளை ஏற்றுக்கொள்ளும்:</p><ul><li><code>flex-start</code>: Items வலது பக்கமாக ஒதுக்கப்படும். </li><li><code>flex-end</code>: Items இடது  பக்கமாக ஒதுக்கப்படும்.</li><li><code>center</code>: Items மையப்பகுதியில்  பக்கமாக ஒதுக்கப்படும்.</li><li><code>space-between</code>: Items இடைவெளியில் சமமான இடைவெளி விடப்படும்.</li><li><code>space-around</code>: Items சுற்றி சமமான இடைவெளி விடப்படும்.</li></ul><p>உதாரணமாக, <code>justify-content: flex-end;</code> தவளையை இடது பக்கமாக நகர்த்தி வைக்கும்.</p>',
      'te': '<p>CSS కోడ్ రాయడం ద్వారా మీరు ఫ్రాగ్గీ మరియు స్నేహితులకు సహాయపడే ఆట ఫ్లెక్స్‌బాక్స్ ఫ్రాగ్గీకి స్వాగతం! <code>justify-content</code> దీన్ని ఉపయోగించి ఈ కప్పను కుడి వైపున ఉన్న లిలిప్యాడ్‌కు మార్గనిర్దేశం చేయండి, ఇది వస్తువులను అడ్డంగా సమలేఖనం చేస్తుంది మరియు క్రింది విలువలను అంగీకరిస్తుంది: </p><ul><li><code>flex-start</code>: వస్తువులను కంటైనర్ యొక్క ఎడమ వైపుకు సమలేఖనం చేయబడతాయి. </li><li><code>flex-end</code>: వస్తువులను కంటైనర్ యొక్క కుడి వైపుకు సమలేఖనం చేయబడతాయి. </li><li><code>center</code>: వస్తువులను కంటైనర్ మధ్యలో సమలేఖనం చేయబడతాయి.</li><li></li><li><code>space-between</code>: వస్తువులను వాటి మధ్య సమాన అంతరంతో ప్రదర్శించబడతాయి. </li><li><code>space-around</code>: వస్తువులను వాటి చుట్టూ సమాన అంతరాలతో ప్రదర్శించబడతాయి. </li></ul><p> ఉదాహరణకు, <code>justify-content: flex-end;</code> కప్పను కుడి వైపుకు కదిలిస్తుంది.</p>',
      'ml': '<p>Flexbox Froggy- ലേക്ക് സ്വാഗതം, നിങ്ങൾ Froggy ഉം സുഹൃത്തുക്കളും CSS കോഡ് എഴുതുക വഴി സഹായിക്കുന്ന ഒരു ഗെയിം! <code>justify-content</code> എന്ന പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഫ്രോഗി യെ വലതു വശത്തുള്ള താമരപ്പൂവിന്റെ ഇലയിലേക്കു എത്തിക്കുക</p><ul><li><code>flex-start</code>: Items align to the left side of the container.</li><li><code>flex-end</code>: ഇനങ്ങൾ കണ്ടെയ്നറിൽ ഇടത്തേക്ക് അലൈൻ ചെയ്യുക</li><li><code>center</code>: വസ്തുക്കൾ അലൈക്റ്ററിന്റെ മധ്യഭാഗത്തേക്ക് അലൈൻ ചെയ്യുക</li><li><code>space-between</code>: ഇനങ്ങൾ തമ്മിൽ തുല്യ ഇടവേളയിൽ പ്രദർശിപ്പിക്കും.</li><li><code>space-around</code>: ഇനങ്ങൾ അവയ്ക്ക് തുല്യമായ സ്പെയ്സിംഗ് ഉപയോഗിച്ച് കാണാം.</li></ul><p>ഉദാഹരണത്തിന്, <code>justify-content: flex-end;</code> വലതുവശത്തേക്ക് തവളയെ മറ്റും.</p>',
      'el': '<p>Καλωσήλθατε στο Flexbox Froggy, ένα παιχνίδι όπου βοηθάτε τον Froggy και τους φίλους του γράφοντας κώδικα CSS! Οδηγήστε αυτόν τον βάτραχο στο νούφαρο στα δεξιά χρησιμοποιώντας την ιδιότητα <code>justify-content</code>, που ευθυγραμμίζει αντικείμενα στον οριζόντιο άξονα και αποδέχεται τις εξής αξίες:</p><ul><li><code>flex-start</code>: Τα αντικείμενα ευθυγραμμίζονται στην αριστερή πλευρά του container.</li><li><code>flex-end</code>: Τα αντικείμενα ευθυγραμμίζονται στην δεξιά πλευρά του container.</li><li><code>center</code>: Τα αντικείμενα ευθυγραμμίζονται στο κέντρο του container.</li><li><code>space-between</code>: Τα αντικείμενα εμφανίζονται με ίσο διάστημα ανάμεσά τους.</li><li><code>space-around</code>: Τα αντικείμενα εμφανίζονται με ίσο διάστημα γύρω τους.</li></ul><p>Λόγου χάρη, το <code>justify-content: flex-end;</code> θα μετακινήσει τον βάτραχο στα δεξιά.</p>',
      'mk': '<p>Добродојдовте во Flex Froggy, игра каде што му помагате на Froggy и на неговите пријатели со пишување на CSS код! Водете го ова жабче до листот на десно со користење на <code>justify-content</code> својството, кое подредува елементи хоризонтално и ги прима следниве вредности:</p><ul><li><code>flex-start</code>: Елементите се подредуваат по левата страна на контејнерот.</li><li><code>flex-end</code>: Елементите се подредуваат по десната страна на контејнерот.</li><li><code>center</code>: Елементите се подредуваат во средината на контејнерот.</li><li><code>space-between</code>: Елементите се подредуваат со еднакво растојание помеѓу нив.</li><li><code>space-around</code>: Елементите се подредуваат со еднакво растојание околу нив.</li></ul><p>На пример, <code>justify-content: flex-end;</code> ќе ја помести жабата кон десно.</p>',
      'lv': '<p>Laipni lūgts Flexbox Froggy spēlē! Šajā spēlē, rakstot CSS kodu, Tu palīdzēsi vardulēnam un viņa draugiem. Lieto <code>justify-content</code> metodi un nogādā vardulēnu līdz ūdensrozei pa labi. Ar šo metodi iespējams modificēt elementu horizontālo novietojumu un tā pieņem šādas vērtības:</p><ul><li><code>flex-start</code>: Novieto elementu kreisajā konteinera pusē.</li><li><code>flex-end</code>: Novieto elementu labajā konteinera pusē.</li><li><code>center</code>: Novieto elementu konteinera vidū. </li><li><code>space-between</code>: Elementi tiek novietoti ar vienādu atstarpi starp tiem.</li><li><code>space-around</code>: Elementi tiek novietot ar vienādu apkārtesošo laukumu.</li></ul><p>Piemēram, <code>justify-content: flex-end;</code> pārvietos vardulēnu pa labi.</p>',
      'id': '<p> Selamat datang di Flexbox Froggy, tempat permainan dimana kamu membantu Froggy dan teman-teman dengan menulis kode CSS! Arahkan katak ini ke lilypad di sebelah kanan dengan menggunakan properti <code> justify-content </code>, yang menyelaraskan objek secara:</p><ul><li><code>flex-start</code>: Objek selaras dengan wadah sebelah kiri.</li><li><code>flex-end</code>:Objek selaras dengan wadah sebelah kanan. </li><li><code>center</code>: Objek selaras di tengah wadah</li><li><code>space-between</code>: Objek ditampilkan dengan jarak yang sama dengan disekelilingnya.</li> </ul> <p> Misalnya, <code> justify-content: flex-end; </code> akan pindahkan katak ke kanan.</p> ',
      'ar': '<p>اهلا بك في فروغي فلكسبكس, ساعد فروغي عن طريق كتابة كود CSS! انقل الضفدع الى ورقة الزنبق التي على اليمين باستخدام خاصية <code>justify-content</code> والتي تحاذي العناصر افقيا وتقبل القيم التالية:</p><ul><li><code>flex-start</code>: محاذاة العناصر الى الجانب الأيسر من الحاوية.</li><li><code>flex-end</code>: محاذاة العناصر الى الجانب الايمن من الحاوية.</li><li><code>center</code>: محاذاة العناصر الى وسط الحاوية.</li><li><code>space-between</code>: عرض العناصر بتباعد متساوٍ بينهم.</li><li><code>space-around</code>: عرض العناصر بتباعد متساو حولهم.</li></ul><p>على سبيل المثال, <code>justify-content: flex-end;</code> ستنقل الضفدع الى اليمين.</p>',
      'ca': '<p>Benvingut a Flexbox Froggy, un joc on ajudaràs a Froggy i els seus amics escrivint codi CSS. Guia aquesta granota al nenúfar de la dreta, utilitzant la propietat <code>justify-content</code>, que alinea els elements horizontalment i accepta els següents valors:</p><ul><li><code>flex-start</code>: Alinea elements al costat esquerra del contenidor.</li><li><code>flex-end</code>: Alinea elements al costat dret del contenidor.</li><li><code>center</code>: Alinea elements al centre del contenidor.</li><li><code>space-between</code>: Mostra elements amb la mateixa distància entre ells.</li><li><code>space-around</code>: Mostra elements amb la mateixa separació al voltant d\'ells.</li></ul><p>Per exemple, <code>justify-content: flex-end;</code> mourà la granota a la dreta.</p>',
      'da': '<p>Velkommen til Flexbox Froggy, et spil hvor du hjælper Froggy og venner ved at kode i CSS! Hjælp denne frø hen til åkanden til højre ved at bruge egenskaben <code>justify-content</code>, som justerer elementer vandret og kan tage følgende værdier:</p><ul><li><code>flex-start</code>: Elementer justeres til venstre side af beholderen.</li><li><code>flex-end</code>: Elementer justeres til højre side af beholderen.</li><li><code>center</code>: Elementer justeres til midten af beholderen.</li><li><code>space-between</code>: Elementer vises med fast afstand imellem sig.</li><li><code>space-around</code>: Elementer vises med fast afstand omkring sig.</li></ul><p>For eksempel vil <code>justify-content: flex-end;</code> flytte frøen til højre.</p>',
      'et': '<p>Teretulemast Flexbox Froggy\'sse, see on mäng kus sina aitad Froggy\'t ja tema sõpru kirjutades CSS koodi! Aita see konn parempoolse lege peale kasutades <code>justify-content</code> omadust, mis joondab elemendid horisontaalselt. Sellele saab anda järgmisi väärtusi:</p><ul><li><code>flex-start</code>: Elemendid joonduvad konteineri vasakule poole.</li><li><code>flex-end</code>: Elemendid joonduvad konteineri paremale poole.</li><li><code>center</code>: Elemendid joonduvad konteineri keskele.</li><li><code>space-between</code>: Elementide vahele tekib iga kord sama suur vahe.</li><li><code>space-around</code>: Elementide ümber tekib iga kord sama suur vahe</li></ul><p>Näiteks, <code>justify-content: flex-end;</code> Liigutab konna paremale poole.</p>',
      'fi': '<p>Tämä on Flexbox Froggy – peli, jossa kirjoitat CSS-koodia auttaaksesi Froggy-sammakkoa ja sen kavereita! Opasta tämä sammakko oikealla puolella olevalle lumpeenlehdelle määrittämällä ominaisuus <code>justify-content</code>, joka kohdistaa elementit vaakasuunnassa. Voit antaa ominaisuudelle jonkin seuraavista arvoista:</p><ul><li><code>flex-start</code>: Elementit kohdistetaan säilön vasempaan reunaan.</li><li><code>flex-end</code>: Elementit kohdistetaan säilön oikeaan reunaan.</li><li><code>center</code>: Elementit kohdistetaan vaakasuunnassa säilön keskelle.</li><li><code>space-between</code>: Elementtien välissä on yhtä paljon tilaa.</li><li><code>space-around</code>: Elementtien ympärillä on yhtä paljon tilaa.</li></ul><p>Esimerkiksi <code>justify-content: flex-end;</code> siirtää sammakon oikealle.</p>',
      'gl': '<p>Benvido a Flexbox Froggy, un xogo no que axudarás a Froggy e aos seus amigos escribindo código CSS! Guía a esta rá ao nenúfar da dereita empregando a propiedade <code>justify-content</code>, que aliña os elementos horizontalmente e acepta os seguintes valores:</p><ul><li><code>flex-start</code>: Os elementos alíñanse no lado esquerdo do contedor.</li><li><code>flex-end</code>: Os elementos alíñanse no lado dereito do contedor.</li><li><code>center</code>: Os elementos alíñanse no centro do contedor.</li><li><code>space-between</code>: Os elementos distribúense co mesmo espazo entre eles.</li><li><code>space-around</code>: Os elementos distribúense co mesmo espazo darredor deles. </li></ul><p>Por exemplo, <code>justify-content: flex-end;</code> moverá a rá á dereita.</p>',
      'th': '<p>ยินดีต้อนรับสู่ Flexbox Froggy, เกมที่คุณช่วย Froggy และเพื่อนๆ โดยการเขียนคำสั่ง CSS! นำทางเจ้ากบตัวนี้ไปสู่ใบบัวทางด้านขวาโดยใช้คุณสมบัติ <code>justify-content</code>, ซึ่งจัดเรียง items ตามแนวนอน และรับค่าเหล่านี้ได้:</p><ul><li><code>flex-start</code>: เรียง items ไปทางซ้ายของ container</li><li><code>flex-end</code>: เรียง items ไปทางขวาของ container</li><li><code>center</code>: เรียง items ไปตรงกลางของ container</li><li><code>space-between</code>: แสดง items ให้มีพื้นที่คั่นระหว่างกันเท่ากัน</li><li><code>space-around</code>: แสดง items ให้มีพื้นที่รอบๆเท่ากัน</li></ul><p>ยกตัวอย่างเช่น, <code>justify-content: flex-end;</code> จะย้ายกบไปทางขวา</p>',
      'mn': '<p>Бяцхан мэлхий болон түүний найзуудад CSS код бичиж тусалдаг Flexbox Froggy тоглоомонд та тавтай морил! <code>justify-content</code> гэх items-г хэвтээ тэнхлэгийн дагуу байрлуулах пропертийг ашиглан энэ мэлхийг баруун талд байгаа сараана цэцэг рүү хөтөлнө үү, дараах утгуудыг хүлээн авна:</p><ul><li><code>flex-start</code>: items-г контейнерын зүүн талд байрлуулна.</li><li><code>flex-end</code>: items-г контейнерын баруун талд байрлуулна.</li><li><code>center</code>: items-г контейнерын төвд байрлуулна.</li><li><code>space-between</code>: items-г хоорондоо нь ижил зайтай байхаар байрлуулна.</li><li><code>space-around</code>: items-г эргэн тойрон нь ижил зайтай байхаар байрлуулна.</li></ul><p>Жишээлбэл, <code>justify-content: flex-end;</code> нь мэлхийг баруун тийш шилжүүлэх болно.</p>',
      'sk': '<p>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 <code>justify-content</code>, ktorá zarovnáva položky horizontálne a akceptuje nasledujúce hodnoty:</p><ul><li><code>flex-start</code>: Položky sa zarovnajú na ľavú stranu kontajnera.</li><li><code>flex-end</code>: Položky sa zarovnajú na pravú stranu kontajnera.</li><li><code>center</code>: Položky sa zarovnajú na stred kontajnera.</li><li><code>space-between</code>: Položky sa zobrazujú s rovnakým odstupom.</li><li><code>space-around</code>: Položky sa zobrazujú s rovnakým odstupom okolo nich.</li></ul><p>Napríklad <code>justify-content: flex-end;</code> posunie žabku doprava.</p>',
      'si': '<p>Flexbox මැඬියා වෙත සාදරයෙන් පිළිගනිමු, මෙය ඔබ CSS code ලිවීමෙන්, මැඩියා සහ මිතුරන්ට උදව් කරන ක්‍රීඩාවක්! මෙම මැඩියා දකුණු පස ඇති නෙළුම් කොළය වෙත යොමු කිරීමට <code>justify-content</code> ගුණාංගය භාවිතා කරන්න, එය අයිතම තිරස් අතට පෙළගස්වන අතර පහත අගයන් පිළිගනී:</p><ul><li><code>flex-start</code>: අයිතම කන්ටේනරයේ වම් පැත්තට පෙළගස්වයි.</li><li><code>flex-end</code>: අයිතම කන්ටේනරයේ දකුණු පැත්තට පෙළගස්වයි.</li><li><code>center</code>: අයිතම කන්ටේනරයේ මැදට පෙළගස්වයි.</li><li><code>space-between</code>: අයිතම ඒවා අතර සමාන පරතරයක් සහිතව පෙළගස්වයි.</li><li><code>space-around</code>: අයිතම ඒවා වටා සමාන පරතරයක් සහිතව පෙළගස්වයි.</li></ul><p>උදාහරණ වශයෙන්, <code>justify-content: flex-end;</code> මැඩියා දකුණු පැත්තට ගෙන යනු ඇත.</p>',
      'np': '<p>हजुरहरुलाई Flexbox Froggy मा स्वागत छ, जहाँ तपाई Froggy र उसका साथीहरूलाई CSS कोड लेखेर मद्दत गर्न सक्नुहुन्छ! यस भ्यागुतोलाई दायाँतिर रहेको लिलीप्याडमा पुर्‍याउन <code>justify-content</code> प्रोपर्टी प्रयोग गर्नुहोस्, जसले वस्तुहरूलाई तेर्सो रूपमा राख्ने गर्दछ र तल उल्लेखित मानहरू स्वीकार गर्दछ:</p> <ul> <li><code>flex-start</code>: वस्तुहरू कन्टेनरको बायाँतर्फ राख्न।</li> <li><code>flex-end</code>: वस्तुहरू कन्टेनरको दायाँतर्फ राख्न।</li> <li><code>center</code>: वस्तुहरू कन्टेनरको बीचमा राख्न।</li> <li><code>space-between</code>: वस्तुहरू बीचमा समान दूरी राख्न।</li> <li><code>space-around</code>: वस्तुहरूको चारैतिर समान दूरी राख्न।</li> </ul> <p>उदाहरणका लागि, <code>justify-content: flex-end;</code> ले भ्यागुतोलाई दायाँतिर सार्छ।</p>',
      'my': '<p>Flexbox Froggy သို့ ကြိုဆိုပါသည်။ သင်သည် Froggy နှင့် သူ၏ မိတ်ဆွေများကို CSS ကုဒ်ရေးခြင်းဖြင့် ကူညီနိုင်သော ဂိမ်းဖြစ်သည်။ <code>justify-content</code> ပရော်ပတ်တီကို အသုံးပြု၍ ဤကွင်းကန့်ကို ညာဘက်ရှိ လိပ်ပြာပေါက်သို့ ဦးတည်ပါ။ ဤပရော်ပတ်တီသည် အရာဝတ္ထုများကို အနံ့အတိုင်း စီမံခန့်ခွဲပြီး အောက်ပါ တန်ဖိုးများကို လက်ခံပါသည်။</p><ul><li><code>flex-start</code>: အရာဝတ္ထုများကို ကွန်တိန်နာ၏ ဘယ်ဘက်တွင် စီမံခန့်ခွဲသည်။</li><li><code>flex-end</code>: အရာဝတ္ထုများကို ကွန်တိန်နာ၏ ညာဘက်တွင် စီမံခန့်ခွဲသည်။</li><li><code>center</code>: အရာဝတ္ထုများကို ကွန်တိန်နာ၏ အလယ်တွင် စီမံခန့်ခွဲသည်။</li><li><code>space-between</code>: အရာဝတ္ထုများကို တစ်ခုနှင့် တစ်ခုအကြား တူညီသော အကွာအဝေးဖြင့် ပြသသည်။</li><li><code>space-around</code>: အရာဝတ္ထုများကို ၎င်းတို့၏ လှည့်ပတ်နေသော နေရာတွင် တူညီသော အကွာအဝေးဖြင့် ပြသသည်။</li></ul><p>ဥပမာအားဖြင့် <code>justify-content: flex-end;</code> သည် ကွင်းကန့်ကို ညာဘက်သို့ ရွှေ့လျားပါလိမ့်မည်။</p>',
      'yo': '<p>Ẹ káàbọ̀ sí Flexbox Froggy, eré kan níbi tí o ṣe iranlọwọ Ọ̀pọ̀lọ àti àwọn ọ̀rẹ́ rẹ̀ nípasẹ̀ kọ́òdù CSS! Darí ọ̀pọ̀lọ yìí sí ewé ọdàn tó wà ní ọ̀tún nípasẹ̀ lílo ìní <code>justify-content</code>, èyí tí ń ṣètò àwọn nǹkan ní ìhà gígùn ó sì ń gba àwọn iye wọ̀nyí:</p><ul><li><code>flex-start</code>: Àwọn nǹkan máa ṣètò sí òsì àgọ́lò.</li><li><code>flex-end</code>: Àwọn nǹkan máa ṣètò sí ọ̀tún àgọ́lò.</li><li><code>center</code>: Àwọn nǹkan máa ṣètò ní àárín àgọ́lò.</li><li><code>space-between</code>: Àwọn nǹkan máa hàn pẹ̀lú àyè tó dọ́gba láàárín wọn.</li><li><code>space-around</code>: Àwọn nǹkan máa hàn pẹ̀lú àyè tó dọ́gba yí ká wọn.</li></ul><p>Fún àpẹẹrẹ,<code>justify-content: flex-end;</code> máa gbé ọ̀pọ̀lọ lọ sí ọ̀tún.</p>',
      'no': '<p>Velkommen til Flexbox Froggy, et spill hvor du hjelper Froggy og vennene hans ved å skrive CSS-kode! Led denne frosken til vannliljebladet til høyre ved å bruke <code>justify-content</code>-egenskapen, som justerer elementer horisontalt og godtar følgende verdier:</p><ul><li><code>flex-start</code>: Elementer justeres til venstre side av beholderen.</li><li><code>flex-end</code>: Elementer justeres til høyre side av beholderen.</li><li><code>center</code>: Elementer justeres i midten av beholderen.</li><li><code>space-between</code>: Elementer vises med lik avstand mellom seg.</li><li><code>space-around</code>: Elementer vises med lik avstand rundt seg.</li></ul><p>For eksempel vil <code>justify-content: flex-end;</code> flytte frosken til høyre.</p>',
    },
    board: 'g',
    style: { 'justify-content': 'flex-end' },
    before: "#pond {\n  display: flex;\n",
    after: "}"
  },
  {
    name: 'justify-content 2',
    instructions: {
      'en': '<p>Use <code>justify-content</code> again to help these frogs get to their lilypads. Remember that this CSS property aligns items horizontally and accepts the following values:</p><ul><li><code>flex-start</code>: Items align to the left side of the container.</li><li><code>flex-end</code>: Items align to the right side of the container.</li><li><code>center</code>: Items align at the center of the container.</li><li><code>space-between</code>: Items display with equal spacing between them.</li><li><code>space-around</code>: Items display with equal spacing around them.</li></ul>',
      'bn': '<p>আবার <code>justify-content</code> ব্যবহার করে ব্যাঙগুলোকে তাদের পদ্ম-পাতায় ফিরে যেতে সাহায্য করুন। মনে রাখুন যে এই CSS property item গুলোকে horizontally ভাবে সারিবদ্ধ (align) করে এবং নিচের মানগুলো সাদরে গ্রহণ করেঃ</p><ul><li><code>flex-start</code>: Container এর বাম দিকে সারিবদ্ধ (align) করা item গুলো।</li><li><code>flex-end</code>: Container এর ডান দিকে সারিবদ্ধ (align) করা item গুলো।</li><li><code>center</code>: Container এর মাঝে সারিবদ্ধ (align) করা item গুলো।</li><li><code>space-between</code>: Item গুলোর মাঝে সমান যায়গা বিদ্যমান।</li><li><code>space-around</code>: Item গুলোর পাশে সমান যায়গা বিদ্যমান।</li></ul>',
      'af': '<p>Gebruik <code>justify-content</code> weer om die paddas te help kry by hulle waterlelies. Onthou dat hierdie CSS eienskap items horisontaal rig en die volgende waardes aanvaar:</p><ul><li><code>flex-start</code>: Rig items op die linkerkant van die houer.</li><li><code>flex-end</code>: Rig items op die regterkant van die houer.</li><li><code>center</code>: Rig items op die middel.</li><li><code>space-between</code>: Vertoon items met eweredige spasie tussen-in.</li><li><code>space-around</code>: Vertoon items met eweredige spasie om hulle.</li></ul>',
      'he': '<p>השתמשו ב-<code>justify-content</code> שוב כדי לעזור לצפרדעים להגיע לעלים שלהן. זיכרו שתכונת ה-CSS הזו מיישרת את הפריטים בציר האופקי ומקבלת את הערכים הבאים:</p><ul><li><code>flex-start</code>: פריטים מיושרים לצד השמאלי של הקונטיינר.</li><li><code>flex-end</code>: פריטים מיושרים לצד הימני של הקונטיינר.</li><li><code>center</code>: פריטים מיושרים למרכז של הקונטיינר.</li><li><code>space-between</code>: פריטים מוצגים עם מרווחים שווים בינהם.</li><li><code>space-around</code>: פריטים מוצגים עם מרווחים שווים מסביבם.</li></ul>',
      'ro': '<p>Folosește <code>justify-content</code> din nou ca sa ajuți aceste broaște să ajungă pe nuferii lor. Ține minte că această proprietate CSS aliniază elementele orizontal și acceptă următoarele valori:</p><ul><li><code>flex-start</code>: Elementele se aliniază pe partea stangă a containerului.</li><li><code>flex-end</code>: Elementele se aliniază pe partea dreaptă a containerului.</li><li><code>center</code>: Elementele se aliniază pe centrul containerului.</li><li><code>space-between</code>: Elementele se afișează cu spațiu egal între ele.</li><li><code>space-around</code>: Elementele se afișează cu spațiu egal în jurul lor.</li></ul>',
      'bg': '<p>Използвай <code>justify-content</code> отново, за да помогнеш на тези жабчета да достигнат до своите листа. Помни, че това CSS свойство подрежда елементите хоризонтално и приема следните стойности:</p><ul><li><code>flex-start</code>: Елементите се подреждат в лявата страна на контейнера.</li><li><code>flex-end</code>: Елементите се подреждат в дясната страна на контейнера.</li><li><code>center</code>: Елементите се подреждат в средата на контейнера.</li><li><code>space-between</code>: Елементите се подреждат с равно разстояние помежду им.</li><li><code>space-around</code>: Елементите се подреждат с равно разстояние около тях.</li></ul>',
      'de': '<p>Benutze erneut <code>justify-content</code>, um diese Frösche zu ihren Seerosenblättern zu führen. Wie du weißt, richtet diese Eigenschaft die Elemente horizontal aus und akzeptiert die folgenden Werte:</p><ul><li><code>flex-start</code>: Elemente an der linken Seite des Containers ausrichten.</li><li><code>flex-end</code>: Elemente an der rechten Seite des Containers ausrichten.</li><li><code>center</code>: Elemente an der Mitte des Containers ausrichten.</li><li><code>space-between</code>: Elemente mit gleichem Innenabstand ausrichten.</li><li><code>space-around</code>: Elemente mit gleichem Außenabstand ausrichten.</li></ul>',
      'pt-br': '<p>Use <code>justify-content</code> de novo para levar os sapos às suas vitórias-régias. Lembre-se que essa propriedade CSS alinha os itens horizontalmente e  aceita os seguintes valores:</p><ul><li><code>flex-start</code>: Itens se alinham à esquerda do container.</li><li><code>flex-end</code>: Itens se alinham à direita do container.</li><li><code>center</code>: Itens se alinham no centro do container.</li><li><code>space-between</code>: Itens se alinham com distância igual entre eles.</li><li><code>space-around</code>: Itens se alinham com distância igual em torno deles.</li></ul>',
      'es': '<p>Nuevamente, utiliza <code>justify-content</code> para ayudar a esas ranas a llegar a sus hojas de lirio. Recuerda que esta propiedad CSS alinea elementos horizontalmente y acepta los siguientes valores:<ul><li><code>flex-start</code>: Alinea elementos al lado izquierdo del contenedor.</li><li><code>flex-end</code>: Alinea elementos al lado derecho del contenedor.</li><li><code>center</code>: Alinea elementos en el centro del contenedor.</li><li><code>space-between</code>: Muestra elementos con la misma distancia entre ellos.</li><li><code>space-around</code>: Muestra elementos con la misma separación alrededor de ellos.</li></ul>',
      'fr': '<p>Utilisez encore <code>justify-content</code> pour aider ces grenouilles à se rendre à leurs nénuphars. Souvenez-vous que cette propriété CSS aligne les éléments horizontalement et accepte les valeurs suivantes&nbsp;: </p><ul><li><code>flex-start</code>&nbsp;: Les éléments s\'alignent au côté gauche du conteneur.</li><li><code>flex-end</code> : Les éléments s\'alignent au côté droit du conteneur.</li><li><code>center</code>&nbsp;: Les éléments s\'alignent au centre du conteneur.</li><li><code>space-between</code>&nbsp;: Les éléments s\'affichent avec un espace égal entre eux.</li><li><code>space-around</code>&nbsp;: Les éléments s\'affichent avec un espacement égal à l\'entour d\'eux.</li></ul>',
      'ru': '<p>Используй <code>justify-content</code> ещё раз, чтобы помочь этим лягушатам попасть на их лилии. Помни, что это свойство CSS выравнивает элементы горизонтально и принимает следующие значения:</p><ul><li><code>flex-start</code>: элементы выравниваются по левой стороне контейнера.</li><li><code>flex-end</code>: элементы выравниваются по правой стороне контейнера.</li><li><code>center</code>: элементы выравниваются по центру контейнера.</li><li><code>space-between</code>: элементы отображаются с одинаковыми отступами между ними.</li><li><code>space-around</code>: элементы отображаются с одинаковыми отступами вокруг них.</li></ul>',
      'fa': '<p>با استفاده از خصوصیت <code>justify-content</code> به این قورباغه ها کمک کنید تا روی نیلوفرهای آبی قرار بگیرند. فراموش نکنید که این خاصیت در محور افقی کار میکند.</p><ul><li><code>flex-start</code>:  آیتم‌ها از ابتدای <span class="en-font">flex-line</span> ها چیده می‌شوند.</li><li><code>flex-end</code>: آیتم‌ها از انتهای <span class="en-font">flex-line</span> ها چیده می‌شوند.</li><li><code>center</code>: آیتم‌ها از وسط <span class="en-font">flex-line</span> ها چیده می‌شوند.</li><li><code>space-between</code>: آیتم اول در ابتدا و آیتم آخر در انتهای <span class="en-font">flex line</span> قرار می گیرند و بقیه آیتم ها در بین آنها با یک فاصله ی برابر قرار می‌گیرند. </li><li><code>space-around</code>: آیتم ها با فضای برابر در کنار یکدیگر قرار می‌گیرند.</li></ul>',
      'zh-cn': '<p>再用<code>justify-content</code>一次来帮助这些青蛙到他们的荷叶上。记住这个CSS属性能水平对齐元素，并接受这些参数：</p><ul><li><code>flex-start</code>: 元素和容器的左端对齐。</li><li><code>flex-end</code>: 元素和容器的右端对齐。</li><li><code>center</code>: 元素在容器里居中。</li><li><code>space-between</code>:元素之间保持相等的距离。</li><li><code>space-around</code>:元素周围保持相等的距离。</li>',
      'zh-tw': '<p>再用<code>justify-content</code>一次來幫助這些青蛙到他們的荷葉上。記住這個CSS屬性能水平對齊元素，並接受這些參數: </p><ul><li><code>flex-start</code>: 元素和容器的左端對齊。</li><li><code>flex-end</code>: 元素和容器的右端對齊。</li><li><code>center</code>: 元素在容器裏居中。</li><li><code>space-between</code>: 元素之間保持相等的距離。</li><li><code>space-around</code>: 元素周圍保持相等的距離。</li>',
      'tr': '<p>Tekrar <code>justify-content</code> kullanarak bu kurbağaları nilüfer yapraklarının üzerine çıkartın. Bu CSS kuralının öğeleri yatay olarak hizaladığını ve şu değerleri aldığını unutmayın:</p><ul><li><code>flex-start</code>: Öğeleri flexbox container\'ın sol tarafına hizalar.</li><li><code>flex-end</code>: Öğeleri flexbox container\'ın sağ tarafına hizalar.</li><li><code>center</code>: Öğeleri flexbox container\'ın ortasına hizalar.</li><li><code>space-between</code>: Öğeler eşit aralıklarla yatay şekilde yayılır</li><li><code>space-around</code>: Öğeler etraflarında eşit aralıklar olacak şekilde yatay şekilde yayılır.</li></ul>',
      'az': '<p>Təkrar <code>justify-content</code> istifadə edərək bu qurbağaları zanbaq yarpaqlarının üzərinə aparın. Bu CSS qaydasının elementləri üfüqi olaraq nizamlandığı və bu dəyərləri aldığını unutmayın:</p><ul><li><code>flex-start</code>: Elementləri flexbox container\'inin sol tərəfinə nizamlayar.</li><li><code>flex-end</code>: Elementləri flexbox container\'inin sağ tərəfinə nizamlayar.</li><li><code>center</code>: Elementləri flexbox container\'inin ortasına nizamlayar.</li><li><code>space-between</code>: Elementlər bərabər aralıqlarda üfüqi şəkildə yayılar</li><li><code>space-around</code>: Elementlər ətraflarında bərabər aralıqlarla üfüqi şəkildə yayılar.</li></ul>',
      'it': '<p>Usa ancora <code>justify-content</code> per aiutare le rane a raggiungere le ninfee. Ricorda che questa regola CSS allinea gli elementi orizzontalmente e accetta i seguenti valori:</p><ul><li><code>flex-start</code>: Allinea gli elementi alla sinistra del loro contenitore.</li><li><code>flex-end</code>: Allinea gli elementi alla destra del loro contenitore.</li><li><code>center</code>: Allinea gli elementi al centro del loro contenitore.</li><li><code>space-between</code>: Separa gli elementi con uguale spazio tra di loro.</li><li><code>space-around</code>: Separa gli elementi con uguale spazio attorno a loro.</li></ul>',
      'ko': '<p><code>justify-content</code>를 한 번 더 사용하여 개구리들이 수련잎으로 이동하는 것을 도와주세요. 이 CSS 속성은 요소들을 가로선 상에서 정렬하며 다음의 값들을 인자로 받는다는 것을 기억하세요:</p><ul><li><code>flex-start</code>: 요소들을 컨테이너의 왼쪽으로 정렬합니다.</li><li><code>flex-end</code>: 요소들을 컨테이너의 오른쪽으로 정렬합니다.</li><li><code>center</code>: 요소들을 컨테이너의 가운데로 정렬합니다.</li><li><code>space-between</code>: 요소들 사이에 동일한 간격을 둡니다.</li><li><code>space-around</code>: 요소들 주위에 동일한 간격을 둡니다.</li></ul>',
      'lt': '<p>Panaudokite <code>justify-content</code> dar kartą, kad padėtumėte varlytėms nusigauti ant lelijos lapų. Nepamirškite, kad ši CSS komanda lygiuoja elementus horizontaliai ir reaguoja į šias vertes:</p><ul><li><code>flex-start</code>: Elementai lygiuojami supančio elemento kairėje.</li><li><code>flex-end</code>: Elementai lygiuojami supančio elemento dešinėje.</li><li><code>center</code>: Elementai lygiuojami supančio elemento viduryje.</li><li><code>space-between</code>: Elementai atvaizduojami taip, kad tarpai tarp jų būtų vienodi.</li><li><code>space-around</code>: Elementai atvaizduojami su vienodais tarpais aplink juos.</li></ul>',
      'vi': '<p>Sử dụng <code>justify-content</code> một lần nữa để giúp đỡ những chú ếch này đến các lá bông súng. Hãy nhớ rằng thuộc tính CSS này dùng để sắp xếp các hạng mục theo chiều ngang và chấp nhận các giá trị sau:</p><ul><li><code>flex-start</code>: Các hạng mục sẽ được sắp xếp về phía bên trái của hộp chứa.</li><li><code>flex-end</code>: Các hạng mục sẽ được sắp xếp về phía bên phải của hộp chứa.</li><li><code>center</code>: Các hạng mục sẽ được sắp xếp ở giữa chính của hộp chứa.</li><li><code>space-between</code>: Các hạng mục sẽ được trình bày với khoảng cách bằng nhau giữa chúng.</li><li><code>space-around</code>: Các hạng mục sẽ được trình bày với khoảng cách bằng nhau xung quanh chúng.</li></ul>',
      'pl': '<p>Użyj <code>justify-content</code> ponownie, aby pomóc żabkom dotrzeć do swoich listków. Pamiętaj, że ta właściwość języka CSS wyrównuje elementy w poziomie i przyjmuje wartości:</p><ul><li><code>flex-start</code>: Elementy wyrównują się do lewej strony kontenera.</li><li><code>flex-end</code>: Elementy wyrównują się do prawej strony kontenera.</li><li><code>center</code>: Elementy wyrównują się do środka kontenera.</li><li><code>space-between</code>: Elementy wyświetlają się na całej szerokości kontenera z równymi odstępami.</li><li><code>space-around</code>: Każdy z elementów wyświetla się z taką samą ilością przestrzeni wokół.</li></ul>',
      'cs': '<p>Použijte teď <code>justify-content</code> tak, aby se žabky dostaly na své lekníny. Připomeňte si, že tato CSS vlastnost zarovnává prvky vodorovně a akceptuje následující hodnoty:</p><ul><li><code>flex-start</code>: Zarovnat prvky vlevo.</li><li><code>flex-end</code>: Zarovnat prvky vpravo.</li><li><code>center</code>: Zarovnat prvky na střed.</li><li><code>space-between</code>: Rozmístit rovnoměrné mezery mezi prvky.</li><li><code>space-around</code>: Rozmístit rovnoměrné mezery kolem prvků.</li></ul>',
      'ja': '<p>もう一度<code>justify-content</code>を使って、カエルたちを蓮の葉まで連れていきましょう。覚えていますか、このCSSプロパティはアイテムを水平に並べるもので、次の値を取ります。</p><ul><li><code>flex-start</code>: アイテムはコンテナーの左側に並びます。</li><li><code>flex-end</code>: アイテムはコンテナーの右側に並びます。</li><li><code>center</code>: アイテムはコンテナーの中央に並びます。</li><li><code>space-between</code>: アイテムはその間に等しい間隔を空けて表示されます。</li><li><code>space-around</code>: アイテムはその周囲に等しい間隔を空けて表示されます。</li></ul>',
      'hu': '<p>Használd ismét a <code>justify-content</code> tulajdonságot, hogy a békákat a tündérrózsáikhoz segíthesd. Ne feledd, hogy ez a CSS tulajdonság az elemeket vízszintesen igazítja és a következő értékeket kaphatja: </p><ul><li><code>flex-start</code>: Az elemek a konténer bal oldalára igazodnak .</li><li><code>flex-end</code>: Az elemek a konténer jobb oldalára igazodnak.</li><li><code>center</code>: Az elemek a konténer közepére igazodnak.</li><li><code>space-between</code>: Az elemek úgy igazodnak, hogy köztük a hely egyenlő mértékben oszlik meg.</li><li><code>space-around</code>: Az elemek úgy igazodnak, hogy a körülöttük lévő hely egyenlő maradjon.</li></ul>',
      'eo': '<p>Uzu <code>justify-content</code> de nove por helpi ĉiujn ranojn atingi iliajn akvolilifoliojn. Memoru ke ĉi tiu CSS-an trajton liniigas horizontale elementojn kaj akceptas la sekvajn valorojn:</p><ul><li><code>flex-start</code>: Elementoj linias maldekstraflanken de la ujo.</li><li><code>flex-end</code>: Elementoj linias dekstraflanken de la ujo.</li><li><code>center</code>: Elementoj linias je la centro de la ujo.</li><li><code>space-between</code>: Elementoj afiŝas kun samaj spacoj inter ili.</li><li><code>space-around</code>: Elementoj afiŝas kun samaj spacoj ĉirkaŭ ili.</li></ul>',
      'sv': '<p>Använd <code>justify-content</code> igen för att hjälpa grodorna till sina blomblad. Kom ihåg att denna CSS-attribut justerar objekten horisontellt och accepterar följande värden:</p><ul><li><code>flex-start</code>: Objekt justeras till vänster i containern.</li><li><code>flex-end</code>: Objekt justeras till höger i containern.</li><li><code>center</code>: Objekt justeras i mitten av containern.</li><li><code>space-between</code>: Objekt justeras med lika utrymme mellan varandra.</li><li><code>space-around</code>: Objekt justeras med lika utrymme runt omkring varandra.</li></ul><p>Till exempel, <code>justify-content: flex-end;</code> flyttar grodan till höger.</p>',
      'uk': '<p>Скористайся <code>justify-content</code> ще раз, та допоможи жабенятам потрапити на свої листи латаття. Памʼятай, що ця CSS-властивість набуває таких значень:</p><ul><li><code>flex-start</code>: Елементи вирівнюються по лівій стороні контейнера.</li><li><code>flex-end</code>: Елементи вирівнюються по правій стороні контейнера.</li><li><code>center</code>: Елементи вирівнюються по центру контейнера.</li><li><code>space-between</code>: Елементи буде зображено з рівними відступами поміж них.</li><li><code>space-around</code>: Елементи буде зображено з рівними відступами навколо них.</li></ul>',
      'hi': '<p><code>justify-content</code> की सहायता से मेंढकों को पुनः उनके लिली के पत्तों तक पहुंचाइए. याद रखिये की यह CSS प्रॉपर्टी वस्तुओं को छैतिज रूप से संरेखित करती है:</p><ul><li><code>flex-start</code>: यह वस्तु को कंटेनर की बाईं तरफ सरेंखित करता है।</li><li><code>flex-end</code>: यह वस्तु को कंटेनर की दाईं तरफ सरेंखित करता है। </li><li><code>center</code>: यह वस्तु को कंटेनर के मध्य में संरेखित करता है। </li><li><code>space-between</code>: यह वस्तुओं को बराबर अंतर के साथ प्रदर्शित करता है। </li><li><code>space-around</code>: यह वस्तुओं के चारों ओर के अंतर को प्रदर्शित करता है।</li></ul>',
      'gj': '<p><code>justify-content</code>ની મદદથી દેડકાઓને ફરીથી તેમના લીલા પાંદડાઓ સુધી પહોંચાડો. યાદ રાખો કે આ CSS પ્રોપર્ટી items ને ક્ષિતિજ રેખામાં ગોઠવવા માટે વપરાય છે:</p><ul><li><code>flex-start</code>: આ itemને કન્ટેનરની ડાબી બાજુએ ખસેડે છે. </li><li><code>flex-end</code>: આ itemને કન્ટેનરની જમણી  બાજુએ ખસેડે છે. </li><li><code>center</code>: આ itemને કન્ટેનરની મધ્યમાં  બાજુએ ખસેડે છે. </li><li><code>space-between</code>: itemsને  એક બીજા થી સમાન અંતરે હોય એમ દર્શાવે છે .</li><li><code>space-around</code>: itemsને પોતાની ચારેતરફ થી સમાન અંતરે દર્શાવે છે., </li></ul>',
      'sr': '<p>Користи опет <code>justify-content</code> да би помогао/ла жабицама да стигну до својих локвања. Присети се да ово CSS својство поравњава елементе хоризонтално и прихвата следеће вредности:</p><ul><li><code>flex-start</code>: Елементе поравњава на леву страну контејнера.</li><li><code>flex-end</code>: Елементе поравњава на десну страну контејнера.</li><li><code>center</code>: Елементе поставља у центар контејнера.</li><li><code>space-between</code>: Елементе приказује са једнаким растојањем између елемената.</li><li><code>space-around</code>: Елементе приказује са једнаким растојањем око елемената.</li></ul>',
      'bs': '<p>Koristi opet <code>justify-content</code> da bi pomogao/la žabicama da stignu do svojih listova. Prisjeti se da ovo CSS svojstvo poravnava elemente horizontalno i prihvata sljedeće vrijednosti:</p><ul><li><code>flex-start</code>: Elemente poravnava na lijevu stranu kontejnera.</li><li><code>flex-end</code>: Elemente poravnava na desnu stranu kontejnera.</li><li><code>center</code>: Elemente postavlja u centar kontejnera.</li><li><code>space-between</code>: Elemente prikazuje sa jednakim rastojanjem između elemenata.</li><li><code>space-around</code>: Elemente prikazuje sa jednakim rastojanjem oko elemenata.</li></ul>',
      'hr': '<p>Opet koristi <code>justify-content</code> da bi pomogao/la žabicama da stignu do svojih listova. Prisjeti se da ovo CSS svojstvo poravnava elemente horizontalno i prihvaća sljedeće vrijednosti:</p><ul><li><code>flex-start</code>: Elemente poravnava na lijevu stranu kontejnera.</li><li><code>flex-end</code>: Elemente poravnava na desnu stranu kontejnera.</li><li><code>center</code>: Elemente postavlja u centar kontejnera.</li><li><code>space-between</code>: Elemente prikazuje sa jednakim razmakom između elemenata.</li><li><code>space-around</code>: Elemente prikazuje sa jednakim razmakom oko elemenata.</li></ul>',
      'nl': '<p>Maak nogmaals gebruik van <code>justify-content</code> om de kikkers naar hun lelieblaadjes te helpen. Vergeet niet dat deze CSS eigenschap elementen horizontaal uitlijnt en de volgende waarden kan ontvangen:</p><ul><li><code>flex-start</code>: Elementen aan de linkerkant van de container uitlijnen.</li><li><code>flex-end</code>: Elementen aan de rechterkant van de container uitlijnen.</li><li><code>center</code>: Elementen in het midden van de container uitlijnen.</li><li><code>space-between</code>: Elementen worden gedistribueerd over de volledige dimensie en krijgen een gelijke spatiëring tussen hun.</li><li><code>space-around</code>: Elementen worden gedistribueerd over de volledige dimensie en krijgen een gelijke spatiëring rondom hun.</li></ul>',
      'ta': '<p>மீண்டும் <code>justify-content</code> பயன்படுத்தி, தவளை அதற்கான இலையினை அடைய உதவவும். இந்த CSS property கிடைமட்டமாக பொருட்களை சீரமைக்கும் மற்றும் பின்வரும் மதிப்புகளை ஏற்றுக்கொள்ளும் என்பதை நினைவில் கொள்ளவும்.</p><ul><li><code>flex-start</code>: Items வலது பக்கமாக ஒதுக்கப்படும். </li><li><code>flex-end</code>: Items இடது  பக்கமாக ஒதுக்கப்படும்.</li><li><code>center</code>: Items மையப்பகுதியில்  பக்கமாக ஒதுக்கப்படும்.</li><li><code>space-between</code>: Items இடைவெளியில் சமமான இடைவெளி விடப்படும்.</li><li><code>space-around</code>: Items சுற்றி சமமான இடைவெளி விடப்படும்.</li></ul>',
      'te': '<p>ఈ కప్పలు వారి లిల్లీప్యాడ్‌లను పొందడానికి సహాయపడటానికి <code>justify-content</code>ను మళ్ళీ ఉపయోగించండి. ఈ CSS వస్తువుల అంశాలను అడ్డంగా సమలేఖనం చేస్తుందని మరియు ఈ క్రింది విలువలను అంగీకరిస్తుందని గుర్తుంచుకోండి:</p><ul><li><code>flex-start</code>: వస్తువులు కంటైనర్ యొక్క ఎడమ వైపుకు సమలేఖనం చేయబడతాయి. </li><li><code>flex-end</code>: వస్తువులు కంటైనర్ యొక్క కుడి వైపున సమలేఖనం చేయబడతాయి. </li><li><code>center</code>: వస్తువులు కంటైనర్ మధ్యలో సమలేఖనం చేయబడతాయి. </li><li><code>space-between</code>: వస్తువులు వాటి మధ్య సమాన అంతరాలతో ప్రదర్శించబడతాయి. </li></ul> ',
      'ml': '<p><code>justify-content</code> ഉപയോഗിച്ച് തവളകളെ തിരിച്ചു താമര ഇലകളിലേക്കു എത്തിക്കുക. തിരശ്ചീനമായി ആണ് ഈ പ്രോപ്പർട്ടി വിന്യസിക്കുന്നത് എന്ന് ഓർക്കുക </p><ul><li><code>flex-start</code>: ഇനങ്ങൾ കണ്ടെയ്നറിന്റെ ഇടതുവശത്തേക്ക് വിന്യസിക്കുക.</li><li><code>flex-end</code>: ഇനങ്ങൾ കണ്ടെയ്നറിന്റെ വലതുവശത്തേക്ക് വിന്യസിക്കുക.</li><li><code>center</code>: ഇനങ്ങളുടെ മധ്യഭാഗത്ത് ഇനങ്ങൾ വിന്യസിക്കുക.</li><li><code>space-between</code>: ഇനങ്ങൾ തമ്മിൽ തുല്യ ഇടവേളയിൽ പ്രദർശിപ്പിക്കും.</li><li><code>space-around</code>: ഇനങ്ങൾ അവയ്ക്ക് തുല്യമായ സ്പെയ്സിംഗ് ഉപയോഗിച്ച് കാണാം.</li></ul>',
      'el': '<p>Χρησιμοποιήστε ξανά το <code>justify-content</code> για να βοηθήσετε αυτούς τους βατράχους να φτάσουν στα νούφαρά τους. Θυμηθείτε ότι η ιδιότητα CSS ευθυγραμμίζει αντικείμενα στον οριζόντιο άξονα και αποδέχεται τις εξής αξίες:</p><ul><li><code>flex-start</code>: Τα αντικείμενα ευθυγραμμίζονται στην αριστερή πλευρά του container.</li><li><code>flex-end</code>: Τα αντικείμενα ευθυγραμμίζονται στην δεξιά πλευρά του container.</li><li><code>center</code>: Τα αντικείμενα ευθυγραμμίζονται στο κέντρο του container.</li><li><code>space-between</code>: Τα αντικείμενα εμφανίζονται με ίσο διάστημα ανάμεσά τους.</li><li><code>space-around</code>: Τα αντικείμενα εμφανίζονται με ίσο διάστημα γύρω τους.</li></ul>',
      'mk': '<p>Користете <code>justify-content</code> повторно за да им помогнете на овие жаби да стигнат до своите листови. Запомнете дека ова CSS својство подредува елементи хоризонтално и ги прима следните вредности:</p><ul><li><code>flex-start</code>: Елементите се подредуваат по левата страна на контејнерот.</li><li><code>flex-end</code>: Елементите се подредуваат по десната страна на контејнерот.</li><li><code>center</code>: Елементите се подредуваат во средината на контејнерот.</li><li><code>space-between</code>: Елементите се подредуваат со еднакво растојание помеѓу нив.</li><li><code>space-around</code>: Елементите се подредуваат со еднакво растојание околу нив.</li></ul>',
      'lv': '<p>Vēlreiz lieto <code>justify-content</code> un palīdzi vardulēniem nokļūt līdz ūdensrozēm. Atceries, ka šī CSS metode elementus novieto horizontāli un pieņem sekojošas vērtības:</p><ul><li><code>flex-start</code>: Novieto elementu kreisajā konteinera pusē.</li><li><code>flex-end</code>: Novieto elementu labajā konteinera pusē.</li><li><code>center</code>: Novieto elementu konteinera vidū.</li><li><code>space-between</code>: Elementi tiek novietoti ar vienādu atstarpi starp tiem.</li><li><code>space-around</code>: Elementi tiek novietoti ar vienādu apkārtesošo laukumu.</li></ul>',
      'id': '<p>Gunakan <code>justify-content</code> lagi untuk membantu katak ini ke lilypad. Ingat bahwa properti CSS ini menyejajarkan item secara horizontal dan menerima nilai-nilai berikut: </p><ul><li><code>flex-start</code>: Objek sejajar dengan sisi kiri wadah.</li><li><code>flex-end</code>: Objek sejajar dengan sisi kanan wadah. </li><li><code>center</code>: Objek sejajar di tengah wadah. </li><li><code>space-between</code>: Objek ditampilkan dengan jarak yang sama di antara mereka. </li><li><code>space-around</code>: Objek ditampilkan dengan jarak yang sama di sekitarnya.</li></ul>',
      'ar': '<p>استخدم <code>justify-content</code> لمساعدة الضفادع للعودة الى اوراق الزنبق الخاصة بها. تذكر ان خاصية الـCSS هذه تحاذي العناصر افقيا و تقبل هذه القيم:</p><ul><li><code>flex-start</code>: محاذاة العناصر الى الجانب الأيسر من الحاوية.</li><li><code>flex-end</code>: محاذاة العناصر الى الجانب الايمن من الحاوية.</li><li><code>center</code>: محاذاة العناصر الى وسط الحاوية.</li><li><code>space-between</code>: عرض العناصر بتباعد متساوٍ بينهم.</li><li><code>space-around</code>: عرض العناصر بتباعد متساوٍ بينهم.</li></ul>',
      'ca': '<p>Novament, utilitza <code>justify-content</code> per ajudar a les granotes a arribar als seus nenúfars. Recorda que aquesta propietat CSS alinea elements horitzontalment i accepta els següents valors:<ul><li><code>flex-start</code>: Alinea elements al costat esquerra del contenidor.</li><li><code>flex-end</code>: Alinea elements al costat dret del contenidor.</li><li><code>center</code>: Alinea elements al centre del contenidor.</li><li><code>space-between</code>: Mostra elements amb la mateixa distància entre ells.</li><li><code>space-around</code>: Mostra elements amb la mateixa separació al seu voltant.</li></ul>',
      'da': '<p>Brug <code>justify-content</code> igen for at hjælpe disse frøer hen til deres åkander. Husk at denne CSS-egenskab justerer elementer vandret og kan tage følgende værdier:</p><ul><li><code>flex-start</code>: Elementer justeres til venstre side af beholderen.</li><li><code>flex-end</code>: Elementer justeres til højre side af beholderen.</li><li><code>center</code>: Elementer justeres til midten af beholderen.</li><li><code>space-between</code>: Elementer vises med fast afstand imellem sig.</li><li><code>space-around</code>: Elementer vises med fast afstand omkring sig.</li></ul>',
      'et': '<p>Kasuta taaskord <code>justify-content</code>, et aidata konnad oma lehtedele. Pea silmas, et see CSS omadus joondab elemendid horisontaalselt ja kasutab järgmisi väärtusi:</p><ul><li><code>flex-start</code>: Elemendid joonduvad kontineri vasakule poole.</li><li><code>flex-end</code>: Elemendid joonduvad kontineri paremale poole.</li><li><code>center</code>: Elemendid joonduvad konteineri keskele.</li><li><code>space-between</code>: Elementide vahele tekib iga kord sama suur vahe.</li><li><code>space-around</code>: Elementide ümber tekib iga kord sama suur vahe.</li></ul>',
      'fi': '<p>Käytä taas ominaisuutta <code>justify-content</code>, jotta nämä sammakot pääsevät omien lumpeenlehtiensä luo. Muista, että tämä CSS-ominaisuus kohdistaa elementit vaakasuunnassa ja sille voi antaa jonkin seuraavista arvoista:</p><ul><li><code>flex-start</code>: Elementit kohdistetaan säilön vasempaan reunaan.</li><li><code>flex-end</code>: Elementit kohdistetaan säilön oikeaan reunaan.</li><li><code>center</code>: Elementit kohdistetaan vaakasuunnassa säilön keskelle.</li><li><code>space-between</code>: Elementtien välissä on yhtä paljon tilaa.</li><li><code>space-around</code>: Elementtien ympärillä on yhtä paljon tilaa.</li></ul>',
      'gl': '<p>Volve usar <code>justify-content</code> para axudar ás rás a chegar a cadanseu nenúfar. Recorda que esta propiedade CSS aliña os elementos horizontalmente e acepta os seguintes valores:</p><ul><li><code>flex-start</code>: Os elementos alíñanse no lado esquerdo do contedor.</li><li><code>flex-end</code>: Os elementos alíñanse no lado dereito do contedor.</li><li><code>center</code>: Os elementos alíñanse no centro do contedor.</li><li><code>space-between</code>: Os elementos distribúense co mesmo espazo entre eles.</li><li><code>space-around</code>: Os elementos distribúense co mesmo espazo darredor deles. </li></ul>',
      'th': '<p>ใช้ <code>justify-content</code> อีกครั้งเพื่อช่วยเจ้ากบเหล่านี้ให้ไปที่ใบบัว จำไว้ว่าคุณสมบัติ CSS นี้จัดเรียง items ตามแนวนอน และรับค่าเหล่านี้ได้:</p><ul><li><code>flex-start</code>: เรียง items ไปทางซ้ายของ container</li><li><code>flex-end</code>: เรียง items ไปทางขวาของ container.</li><li><code>center</code>: เรียง items ไปตรงกลางของ container</li><li><code>space-between</code>: แสดง items ให้มีพื้นที่คั่นระหว่างกันเท่ากัน</li><li><code>space-around</code>: แสดง items ให้มีพื้นที่รอบๆเท่ากัน</li></ul>',
      'mn': '<p>Эдгээр мэлхийнүүдийг сараана цэцэг рүүгээ очиход нь туслахын тулд <code>justify-content</code>-г дахин ашиглаарай. Энэ CSS проперти нь items-г хэвтээ тэнхлэгийн дагуу байрлуулах ба дараах утгуудыг хүлээн зөвшөөрдөг гэдгийг санаарай:</p></p><ul><li><code>flex-start</code>: items-г контейнерын зүүн талд байрлуулна.</li><li><code>flex-end</code>: items-г контейнерын баруун талд байрлуулна.</li><li><code>center</code>: items-г контейнерын төвд байрлуулна.</li><li><code>space-between</code>: items-г хоорондоо нь ижил зайтай байхаар байрлуулна.</li><li><code>space-around</code>: items-г эргэн тойрон нь ижил зайтай байхаар байрлуулна.</li></ul>',
      'sk': '<p>Znovu použite <code>justify-content</code>, 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:</p><ul><li><code>flex-start</code>: