Ինչպես սահմանել flexbox հատկությունները?

Контейнер үчүн (элементке, ага display: flex же display: inline-flex колдонулат) жана анын түздөн-түз мураскорлору (контейнер ичиндеги элементтер) үчүн мүнөздөмөлөр белгиленет.

Контейнер үчүн мүнөздөмөлөр:

• display: Элементтин flex-контейнер экенин аныктайт. Мүмкүн маанилер: flex (блоктук) жана inline-flex (жазуу).
• flex-direction: Негизги остьүн багытын аныктайт, анын бойдон flex-элементтер жайгаштырылат. Мүмкүн маанилер: row (өзгөртпөстөн, солдон оңго), row-reverse (оңдон солго), column (жогорудан төмөн), column-reverse (төмөндөн жогору).
• flex-wrap: Flex-элементтердин жаңы сапка өтүшүн башкарат, эгер алар контейнердин чегинен чыгышса. Мүмкүн маанилер: nowrap (өзгөртпөстөн, өтпөйт), wrap (жаңы сапка өтөт), wrap-reverse (керсинче өтөт).
• justify-content: Flex-элементтерди негизги ость боюнча тууралайт. Мүмкүн маанилер: flex-start (контейнердин башы), flex-end (аягы), center, space-between (элементтердин ортосунда бирдей аралык), space-around (ар бир элементтин тегерегинде бирдей аралык).
• align-items: Flex-элементтерди түз ость боюнча тууралайт. Мүмкүн маанилер: stretch (өзгөртпөстөн, элементтердин бийиктигин контейнерге ылайыкташтырат), flex-start (башы), flex-end (аягы), center, baseline (тексттин негизги сызыгына ылайыкташтырат).
• align-content: Flex саптарын түз ость боюнча тууралайт (эгер flex-wrap колдонулса). Бир сап гана болсо, таасир этпейт. Мүмкүн маанилер: stretch, flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: Flex элементтердин ортосундагы аралыкты аныктайт.

Элементтер үчүн (түздөн-түз мураскорлору):

• order: Элементтин контейнердеги жайгашуу тартибин аныктайт. Даярда, бардык элементтер order: 0. Кичирээк order мааниси менен элементтер эрте орун алат.
• flex-grow: Элементтин башка элементтерге салыштырмалуу канчалык көбөйө алат, эгер бош орун болсо. Даярда, 0 (кебетпейт).
• flex-shrink: Элементтин канчалык кыскара алат, эгер орун жетишсиз болсо. Даярда, 1 (кыскарат).
• flex-basis: Бош орун бөлүштүрүүдөн мурун элементтин баштапкы өлчөмү. Пикселдерде, пайыздарда же auto болушу мүмкүн. Даярда, auto.
• flex: flex-grow, flex-shrink жана flex-basis үчүн кыскача. Мисалы, flex: 1 1 auto;.
• align-self: Бул элемент үчүн align-items маанисин кайра аныктайт. Мүмкүн маанилер: auto, stretch, flex-start, flex-end, center, baseline.

Мисал:

.flex-container {
  display: flex; /* Элементти flex-контейнер кылат */
  flex-direction: row; /* Элементтерди сапта жайгаштырат */
  justify-content: center; /* Элементтерди негизги ость боюнча борборлоштурат */
  align-items: center; /* Элементтерди түз ость боюнча борборлоштурат */
  gap: 10px; /* Элементтердин ортосунда аралык коюу */
}

.flex-item {
  flex-grow: 1; /* Элемент көбөйө алат */
  flex-basis: 100px; /* Баштапкы өлчөм */
}

.special-item {
  order: -1; /* Бул элемент биринчи болот */
  align-self: flex-end; /* Бул элемент үчүн тууралоо өзгөртүлөт */
}