Flexbox justify-content
CSS justify-content xossasi
justify-content xossasi flex elementlarni asosiy o‘q bo‘ylab (gorizontal) tekislaydi.
Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:
centerflex-start(standart)flex-endspace-aroundspace-betweenspace-evenly
Misol
center qiymati flex elementlarni konteyner markazida tekislaydi:
.flex-container {
display: flex;
justify-content: center;
}
Natija:
1
2
3
Misol
flex-start qiymati flex elementlarni konteyner boshida tekislaydi (bu standart):
.flex-container {
display: flex;
justify-content: flex-start;
}
Natija:
1
2
3
Misol
flex-end qiymati flex elementlarni konteyner oxirida tekislaydi:
.flex-container {
display: flex;
justify-content: flex-end;
}
Natija:
1
2
3
Misol
space-around qiymati flex elementlarni qatorlardan oldin, oralig‘ida va keyin bo‘shliq bilan ko‘rsatadi:
.flex-container {
display: flex;
justify-content: space-around;
}
Natija:
1
2
3
Misol
space-between qiymati flex elementlarni qatorlar orasida bo‘shliq bilan ko‘rsatadi:
.flex-container {
display: flex;
justify-content: space-between;
}
Natija:
1
2
3
Misol
space-evenly qiymati flex elementlarni atrofida teng bo‘shliq bilan ko‘rsatadi:
.flex-container {
display: flex;
justify-content: space-evenly;
}
Natija:
1
2
3
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!