CSS'теги флекс элементтерди негизги огу боюнча ровдолонуусу
justify-content касиети
элементтерди негизги огу боюнча ровдолоого мүмкүндүк берет. Мурда сиз
center, space-between, space-around,
space-evenly маанилерин өткөнсүз. Келгиле азыр дагы бир нече маанини үйрөнөлү.
flex-start мааниси элементтерди негизги огунун башталышына жакындатат,
ал эми flex-end мааниси - аягына.
Келгиле мисалдарды карайлы.
Мисал
Негизги осту солдон оңго багыттайлы, аны үчүн
flex-direction касиетине row маанисин берели.
Блокторду остун башталышына жакындатайлы. Бул үчүн justify-content
flex-start маанисине коёлу:
.parent {
display: flex;
flex-direction: row; /* негизги осту солдон оңго */
justify-content: flex-start; /* блокторду негизги остун башталышына */
}
Кодду иштетүүнүн натыйжасы:
Мисал
Келгиле азыр блокторду остун аягына жакындатайлы.
Бул үчүн justify-content
flex-end маанисине коёлу:
.parent {
display: flex;
flex-direction: row; /* негизги осту солдон оңго */
justify-content: flex-end; /* блокторду негизги остун аягына */
}
Кодду иштетүүнүн натыйжасы:
Мисал
Азыр негизги осту оңдон солго багыттайлы,
flex-direction касиетине
row-reverse маанисин берели. Блокторду остун
башталышына, б.а. оң четинде жакындатайлы. Бул үчүн justify-content
flex-start маанисине коёлу:
.parent {
display: flex;
flex-direction: row-reverse; /* негизги осту оңдон солго */
justify-content: flex-start; /* блокторду негизги остун башталышына */
}
Кодду иштетүүнүн натыйжасы:
Мисал
Эми блокторду негизги остун аягына,
б.а. сол четинде жакындатайлы. Бул үчүн justify-content
flex-end маанисине коёлу:
.parent {
display: flex;
flex-direction: row-reverse; /* негизги осту оңдон солго */
justify-content: flex-end; /* блокторду негизги остун аягына */
}
Кодду иштетүүнүн натыйжасы:
Мисал
Мурунку мисалдарда негизги ок горизонталдык багытталган. Келгиле азыр аны которуп, вертикалдык багыттайлы.
Негизги осту төмөн багыттайлы, аны үчүн
flex-direction касиетине
column маанисин берели.
Блокторду негизги остун башталышына, б.а.
жогорку четинде жакындатайлы. Бул үчүн justify-content
flex-start маанисине коёлу:
.parent {
display: flex;
flex-direction: column; /* негизги осту жогорудан төмөн */
justify-content: flex-start; /* блокторду негизги остун башталышына */
}
Кодду иштетүүнүн натыйжасы:
Мисал
Келгиле азыр блокторду негизги остун аягына,
б.а. төмөнкү четинде жакындатайлы. Бул үчүн justify-content
flex-end маанисине коёлу:
.parent {
display: flex;
flex-direction: column; /* негизги осту жогорудан төмөн */
justify-content: flex-end; /* блокторду негизги остун аягына */
}
Кодду иштетүүнүн натыйжасы:
Мисал
Негизги осту которуп, аны төмөндөн
жогору багыттайлы. Бул үчүн flex-direction
касиетине column-reverse маанисин берели. Бул
учурда блоктор өзүнүн тартибин өзгөртөт -
остун башталышында HTML
коддогу акыркы блок турат.
Келгиле блокторду негизги остун башталышына,
б.а. төмөнкү четинде жакындатайлы. Бул үчүн justify-content
flex-start маанисине коёлу:
.parent {
display: flex;
flex-direction: column-reverse; /* негизги осту төмөндөн жогору */
justify-content: flex-start; /* блокторду негизги остун башталышына */
}
Кодду иштетүүнүн натыйжасы:
Мисал
Келгиле блокторду негизги остун аягына,
б.а. жогорку четинде жакындатайлы. Бул үчүн justify-content
flex-end маанисине коёлу:
.parent {
display: flex;
flex-direction: column-reverse; /* негизги осту төмөндөн жогору */
justify-content: flex-end; /* блокторду негизги остун аягына */
}
Кодду иштетүүнүн натыйжасы:
