Flex blokų lygiavimas skersine ašimi CSS

Dabar išlyginkime blokus ir skersine ašimi. Lygiavimas išilgai šios ašies nustatomas savybe align-items. Reikšmė flex-start priglunda elementus prie ašies pradžios, o reikšmė flex-end - prie pabaigos.

Išbandykime pavyzdžiais.

Pavyzdys

Nukreipkime pagrindinę ašį iš kairės į dešinę. Šiuo atveju skersinė ašis bus nukreipta iš viršaus į apačią. Sureguliuokime mūsų blokų išdėstymą ir pagrindine ašimi, ir skersine ašimi.

Pagrindine ašimi prigluskime blokus prie jos pradžios, tai yra, prie kairiojo krašto. Tam justify-content nustatykime į reikšmę flex-start. Pagal skersinę ašį taip pat prigluskime blokus prie jos pradžios, tai yra, prie viršutinio krašto. Tam align-items taip pat nustatykime į reikšmę flex-start.

Pažiūrėkime, ką mes gauname:

css.parent {
  display: flex;
  flex-direction:  row;        /* pagrindinė ašis į dešinę, skersinė žemyn */
  justify-content: flex-start; /* blokai į pagrindinės ašies pradžią */
  align-items:     flex-start; /* blokai į skersinės ašies pradžią */
}

Kodo vykdymo rezultatas:

Pavyzdys

Dabar prigluskime blokus prie skersinės ašies pabaigos, tai yra, prie apačios. Tam align-items nustatykime į reikšmę flex-end:

css.parent {
  display: flex;
  flex-direction:  row;        /* pagrindinė ašis į dešinę, skersinė žemyn */
  justify-content: flex-start; /* blokai į pagrindinės ašies pradžią */
  align-items:     flex-end;   /* blokai į skersinės ašies pabaigą */
}

Kodo vykdymo rezultatas:

Pavyzdys

Dabar nukreipkime pagrindinę ašį iš viršaus į apačią. Kadangi pagrindinė ašis vertikali, tai skersinė bus nukreipta iš dešinės į kairę. Prigluskime blokus abiem ašimis prie jų pradžios:

css.parent {
  display: flex;
  flex-direction:  column;     /* pagrindinė ašis žemyn, skersinė į dešinę */
  justify-content: flex-start; /* blokai į pagrindinės ašies pradžią */
  align-items:     flex-start; /* blokai į skersinės ašies pradžią */
}

Kodo vykdymo rezultatas:

Pavyzdys

O dabar pagal skersinę ašį prigluskime blokus prie jos pabaigos:

css.parent {
  display: flex;
  flex-direction:  column;     /* pagrindinė ašis žemyn, skersinė į dešinę */
  justify-content: flex-start; /* blokai į pagrindinės ašies pradžią */
  align-items:     flex-end;   /* blokai į skersinės ašies pabaigą */
}

Kodo vykdymo rezultatas:

Pavyzdys

Prigluskime blokus prie abiejų ašių pabaigos:

css.parent {
  display: flex;
  flex-direction:  column;   /* pagrindinė ašis žemyn, skersinė į dešinę */
  justify-content: flex-end; /* blokai į pagrindinės ašies pabaigą */
  align-items:     flex-end; /* blokai į skersinės ašies pabaigą */
}

Kodo vykdymo rezultatas:

Pavyzdys

Pakeiskime pagrindinės ašies kryptį - nukreipkime ją iš apačios į viršų. Tuo tarpu skersinė ašis nepakeis savo krypties, nes pagrindinė ašis vis tiek vertikali.

Prigluskime blokus prie abiejų ašių pradžios:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* pagrindinė ašis aukštyn, skersinė į dešinę */
  justify-content: flex-start;     /* blokai į pagrindinės ašies pradžią */
  align-items:     flex-start;     /* blokai į skersinės ašies pradžią */
}

Kodo vykdymo rezultatas: