Flexbox

flexbox - float yoki position xossasisiz elementlarni joylashtirish

asosiy 2ta elementi mavjud

1.flex-container

2.flex-items

flex-container

display:flex; berilgan tag. yani ota-ona teg tashqi orab turgan qism flex-container qism db ataladi

flex-items

container ichida joylashgan elementlar ular inline element kabi faqat ozining cantenti uchun joy oladi va ular ketma-ket joylashadi faqat farqi flex ning imkoniyatlari ko`proq

flex-container xossalari

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
  

Flex items xossalari

• order - qaysi orinda joylashuvi
• flex-grow - osish
• flex-shrink - qisqarish
• flex-basis - dastlabki qiymat
• flex - (flex-grow,flex-shrink,flex-basis)
• align-self - aynan shu itemni joylashuvi

flex: 1;
        flex-grow: 1;        flex-shrink: 1;        flex-basis: 0;

flex-grow: 1;
        flex-grow: 1;        flex-shrink: 1;        flex-basis: auto;

barcha xossalarni keyingi bolimda korib chiqamiz

flex-basis and width There is no difference between how flex-basis: will function on your element and how width: will function on your element.