Uitlyning van Fleksblokke op die Kruis-as in CSS

Laat ons nou blokke sowel op die kruis-as uitlyn. Uitlyning op hierdie as word bepaal deur die eienskap align-items. Die waarde flex-start druk die elemente teen die begin van die as, en die waarde flex-end - teen die einde daarvan.

Kom ons probeer met voorbeelde.

Voorbeeld

Laat ons die hoof-as van links na regs rig. In hierdie geval sal die kruis-as van bo na onder wys. Kom ons pas die plasing van ons blokke sowel op die hoof-as as op die kruis-as aan.

Op die hoof-as druk ons die blokke teen sy begin, dit wil sê, teen die linkerkant. Vir hierdie doel stel ons justify-content in op die waarde flex-start. Op die kruis-as druk ons die blokke ook teen sy begin, dit wil sê, teen die boonste kant. Vir hierdie doel stel ons align-items ook in op die waarde flex-start.

Kom ons kyk wat ons kry:

css.parent {
  display: flex;
  flex-direction:  row;        /* hoof-as na regs, kruis-as af */
  justify-content: flex-start; /* blokke na die begin van die hoof-as */
  align-items:     flex-start; /* blokke na die begin van die kruis-as */
}

Resultaat van die kode-uitvoering:

Voorbeeld

Laat ons nou die blokke teen die einde van die kruis-as druk, dit wil sê, teen die onderkant. Vir hierdie doel stel ons align-items in op die waarde flex-end:

css.parent {
  display: flex;
  flex-direction:  row;        /* hoof-as na regs, kruis-as af */
  justify-content: flex-start; /* blokke na die begin van die hoof-as */
  align-items:     flex-end;   /* blokke na die einde van die kruis-as */
}

Resultaat van die kode-uitvoering:

Voorbeeld

Laat ons nou die hoof-as van bo na onder rig. Aangesien die hoof-as vertikaal is, sal die kruis-as van regs na links wys. Kom ons druk die blokke op albei asse teen hul begin:

css.parent {
  display: flex;
  flex-direction:  column;     /* hoof-as af, kruis-as regs */
  justify-content: flex-start; /* blokke na die begin van die hoof-as */
  align-items:     flex-start; /* blokke na die begin van die kruis-as */
}

Resultaat van die kode-uitvoering:

Voorbeeld

En nou op die kruis-as druk ons die blokke teen sy einde:

css.parent {
  display: flex;
  flex-direction:  column;     /* hoof-as af, kruis-as regs */
  justify-content: flex-start; /* blokke na die begin van die hoof-as */
  align-items:     flex-end;   /* blokke na die einde van die kruis-as */
}

Resultaat van die kode-uitvoering:

Voorbeeld

Kom ons druk die blokke teen die einde van albei asse:

css.parent {
  display: flex;
  flex-direction:  column;   /* hoof-as af, kruis-as regs */
  justify-content: flex-end; /* blokke na die einde van die hoof-as */
  align-items:     flex-end; /* blokke na die einde van die kruis-as */
}

Resultaat van die kode-uitvoering:

Voorbeeld

Laat ons die rigting van die hoof-as verander - laat ons dit van onder na bo wys. In hierdie geval sal die kruis-as nie sy rigting verander nie, aangesien die hoof-as steeds vertikaal is.

Kom ons druk die blokke teen die begin van albei asse:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* hoof-as op, kruis-as regs */
  justify-content: flex-start;     /* blokke na die begin van die hoof-as */
  align-items:     flex-start;     /* blokke na die begin van die kruis-as */
}

Resultaat van die kode-uitvoering: