CSS'теги флекс элементтерди негизги огу боюнча ровдолонуусу

justify-content касиети элементтерди негизги огу боюнча ровдолоого мүмкүндүк берет. Мурда сиз center, space-between, space-around, space-evenly маанилерин өткөнсүз. Келгиле азыр дагы бир нече маанини үйрөнөлү.

flex-start мааниси элементтерди негизги огунун башталышына жакындатат, ал эми flex-end мааниси - аягына. Келгиле мисалдарды карайлы.

Мисал

Негизги осту солдон оңго багыттайлы, аны үчүн flex-direction касиетине row маанисин берели. Блокторду остун башталышына жакындатайлы. Бул үчүн justify-content flex-start маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: row; /* негизги осту солдон оңго */
  justify-content: flex-start; /* блокторду негизги остун башталышына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Келгиле азыр блокторду остун аягына жакындатайлы. Бул үчүн justify-content flex-end маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: row; /* негизги осту солдон оңго */
  justify-content: flex-end; /* блокторду негизги остун аягына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Азыр негизги осту оңдон солго багыттайлы, flex-direction касиетине row-reverse маанисин берели. Блокторду остун башталышына, б.а. оң четинде жакындатайлы. Бул үчүн justify-content flex-start маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* негизги осту оңдон солго */
  justify-content: flex-start; /* блокторду негизги остун башталышына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Эми блокторду негизги остун аягына, б.а. сол четинде жакындатайлы. Бул үчүн justify-content flex-end маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* негизги осту оңдон солго */
  justify-content: flex-end; /* блокторду негизги остун аягына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Мурунку мисалдарда негизги ок горизонталдык багытталган. Келгиле азыр аны которуп, вертикалдык багыттайлы.

Негизги осту төмөн багыттайлы, аны үчүн flex-direction касиетине column маанисин берели.

Блокторду негизги остун башталышына, б.а. жогорку четинде жакындатайлы. Бул үчүн justify-content flex-start маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: column; /* негизги осту жогорудан төмөн */
  justify-content: flex-start; /* блокторду негизги остун башталышына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Келгиле азыр блокторду негизги остун аягына, б.а. төмөнкү четинде жакындатайлы. Бул үчүн justify-content flex-end маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: column; /* негизги осту жогорудан төмөн */
  justify-content: flex-end; /* блокторду негизги остун аягына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Негизги осту которуп, аны төмөндөн жогору багыттайлы. Бул үчүн flex-direction касиетине column-reverse маанисин берели. Бул учурда блоктор өзүнүн тартибин өзгөртөт - остун башталышында HTML коддогу акыркы блок турат.

Келгиле блокторду негизги остун башталышына, б.а. төмөнкү четинде жакындатайлы. Бул үчүн justify-content flex-start маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* негизги осту төмөндөн жогору */
  justify-content: flex-start; /* блокторду негизги остун башталышына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Келгиле блокторду негизги остун аягына, б.а. жогорку четинде жакындатайлы. Бул үчүн justify-content flex-end маанисине коёлу:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* негизги осту төмөндөн жогору */
  justify-content: flex-end; /* блокторду негизги остун аягына */
}

Кодду иштетүүнүн натыйжасы: