CSS-ում ֆլեքս բլոկների դասավորվածությունը լայնակի առանցքի երկայնքով

Եկեք այժմ դասավորենք բլոկները նաև լայնակի առանցքի երկայնքով: Դասավորվածությունը այս առանցքի երկայնքով սահմանվում է align-items հատկությամբ: flex-start արժեքը տարրերը սեղմում է առանցքի սկզբին, իսկ flex-end արժեքը` վերջին:

Եկեք փորձենք օրինակներով:

Օրինակ

Եկեք հիմնական առանցքն ուղղենք ձախից աջ: Այս դեպքում լայնակի առանցքը կուղղվի վերևից ներքև: Եկեք կարգավորենք մեր բլոկների գտնվելու վայրը և՛ հիմնական առանցքի, և՛ լայնակի առանցքի երկայնքով:

Հիմնական առանցքի երկայնքով բլոկները սեղմենք դրա սկզբին, այսինքն՝ ձախ եզրին: Դրա համար justify-content սահմանենք flex-start արժեքով: Լայնակի առանցքի երկայնքով նաև բլոկները սեղմենք դրա սկզբին, այսինքն՝ վերևի եզրին: Դրա համար align-items նաև սահմանենք flex-start արժեքով:

Տեսնենք, թե ինչ է ստացվում.

css.parent {
  display: flex;
  flex-direction:  row;        /* հիմնական առանցքը աջ, լայնակին՝ ներքև */
  justify-content: flex-start; /* բլոկները հիմնական առանցքի սկզբին */
  align-items:     flex-start; /* բլոկները լայնակի առանցքի սկզբին */
}

Կոդի կատարման արդյունք.

Օրինակ

Եկեք այժմ բլոկները սեղմենք լայնակի առանցքի վերջին, այսինքն՝ ներքևի եզրին: Դրա համար align-items սահմանենք flex-end արժեքով.

css.parent {
  display: flex;
  flex-direction:  row;        /* հիմնական առանցքը աջ, լայնակին՝ ներքև */
  justify-content: flex-start; /* բլոկները հիմնական առանցքի սկզբին */
  align-items:     flex-end;   /* բլոկները լայնակի առանցքի վերջին */
}

Կոդի կատարման արդյունք.

Օրինակ

Եկեք այժմ հիմնական առանցքն ուղղենք վերևից ներքև: Քանի որ հիմնական առանցքը ուղղահայաց է, ապա լայնակին կուղղվի աջից ձախ: Եկեք բլոկները սեղմենք երկու առանցքների երկայնքով դրանց սկզբին.

css.parent {
  display: flex;
  flex-direction:  column;     /* հիմնական առանցքը ներքև, լայնակին՝ աջ */
  justify-content: flex-start; /* բլոկները հիմնական առանցքի սկզբին */
  align-items:     flex-start; /* բլոկները լայնակի առանցքի սկզբին */
}

Կոդի կատարման արդյունք.

Օրինակ

Իսկ այժմ լայնակի առանցքի երկայնքով բլոկները սեղմենք դրա վերջին.

css.parent {
  display: flex;
  flex-direction:  column;     /* հիմնական առանցքը ներքև, լայնակին՝ աջ */
  justify-content: flex-start; /* բլոկները հիմնական առանցքի սկզբին */
  align-items:     flex-end;   /* բլոկները լայնակի առանցքի վերջին */
}

Կոդի կատարման արդյունք.

Օրինակ

Բլոկները սեղմենք երկու առանցքների վերջին.

css.parent {
  display: flex;
  flex-direction:  column;   /* հիմնական առանցքը ներքև, լայնակին՝ աջ */
  justify-content: flex-end; /* բլոկները հիմնական առանցքի վերջին */
  align-items:     flex-end; /* բլոկները լայնակի առանցքի վերջին */
}

Կոդի կատարման արդյունք.

Օրինակ

Եկեք փոխենք հիմնական առանցքի ուղղությունը - ուղղենք այն ներքևից վերև: Այդ դեպքում լայնակի առանցքը չի փոխի իր ուղղությունը, քանի որ հիմնական առանցքը դեռևս ուղղահայաց է:

Բլոկները սեղմենք երկու առանցքների սկզբին.

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* հիմնական առանցքը վերև, լայնակին՝ աջ */
  justify-content: flex-start;     /* բլոկները հիմնական առանցքի սկզբին */
  align-items:     flex-start;     /* բլոկները լայնակի առանցքի սկզբին */
}

Կոդի կատարման արդյունք.

Գործնական առաջադրանքներ