Flex elementų lygiavimas pagrindinėje ašyje CSS

Savybė justify-content leidžia išlyginti elementus pagrindinėje ašyje. Anksčiau jūs jau susipažinote su reikšmėmis center, space-between, space-around, space-evenly. Dabar išnagrinėkime dar keletą reikšmių.

Reikšmė flex-start priglunda elementus prie pagrindinės ašies pradžios, o reikšmė flex-end - prie pabaigos. Pažiūrėkime į pavyzdžius.

Pavyzdys

Nukreipkime pagrindinę ašį iš kairės į dešinę, nustatydami savybės flex-direction reikšmę row. Prigluskime blokus prie ašies pradžios. Tam justify-content nustatykime reikšmę flex-start:

css.parent {
  display: flex;
  flex-direction: row; /* pagrindinė ašis iš kairės į dešinę */
  justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}

Kodo vykdymo rezultatas:

Pavyzdys

Dabar prigluskime blokus prie ašies pabaigos. Tam justify-content nustatykime reikšmę flex-end:

css.parent {
  display: flex;
  flex-direction: row; /* pagrindinė ašis iš kairės į dešinę */
  justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}

Kodo vykdymo rezultatas:

Pavyzdys

Dabar nukreipkime pagrindinę ašį iš dešinės į kairę, nustatydami savybės flex-direction reikšmę row-reverse. Prigluskime blokus prie ašies pradžios, tai yra prie dešiniojo krašto. Tam justify-content nustatykime reikšmę flex-start:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* pagrindinė ašis iš dešinės į kairę */
  justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}

Kodo vykdymo rezultatas:

Pavyzdys

O dabar prigluskime blokus prie pagrindinės ašies pabaigos, tai yra prie kairiojo krašto. Tam justify-content nustatykime reikšmę flex-end:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* pagrindinė ašis iš dešinės į kairę */
  justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}

Kodo vykdymo rezultatas:

Pavyzdys

Ankstesniuose pavyzdžiuose pagrindinė ašis buvo nukreipta horizontaliai. Dabar apverskime ją ir nukreipkime vertikaliai.

Nukreipkime pagrindinę ašį žemyn, nustatydami savybės flex-direction reikšmę column.

Prigluskime blokus prie pagrindinės ašies pradžios, tai yra prie viršutinio krašto. Tam justify-content nustatykime reikšmę flex-start:

css.parent {
  display: flex;
  flex-direction: column; /* pagrindinė ašis iš viršaus į apačią */
  justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}

Kodo vykdymo rezultatas:

Pavyzdys

Dabar prigluskime blokus prie pagrindinės ašies pabaigos, tai yra prie apatinio krašto. Tam justify-content nustatykime reikšmę flex-end:

css.parent {
  display: flex;
  flex-direction: column; /* pagrindinė ašis iš viršaus į apačią */
  justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}

Kodo vykdymo rezultatas:

Pavyzdys

Apverskime pagrindinę ašį, nukreipdami ją iš apačios į viršų. Tam savybės flex-direction nustatykime reikšmę column-reverse. Šiuo atveju blokai pakeis savo tvarką - ašies pradžioje bus paskutinis HTML kode esantis blokas.

Prigluskime blokus prie pagrindinės ašies pradžios, tai yra prie apatinio krašto. Tam justify-content nustatykime reikšmę flex-start:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* pagrindinė ašis iš apačios į viršų */
  justify-content: flex-start; /* blokai prie pagrindinės ašies pradžios */
}

Kodo vykdymo rezultatas:

Pavyzdys

Prigluskime blokus prie pagrindinės ašies pabaigos, tai yra prie viršutinio krašto. Tam justify-content nustatykime reikšmę flex-end:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* pagrindinė ašis iš apačios į viršų */
  justify-content: flex-end; /* blokai prie pagrindinės ašies pabaigos */
}

Kodo vykdymo rezultatas: