Ի՞նչ է CSS-ում display հատկության հիմնական նշանակությունը և ինչպես է այն աշխատում։

display հատկությունը որոշում է, թե ինչպես է տարրը ցուցադրվում փաստաթղթում և ինչպես է փոխազդում մյուս տարրերի հետ՝ մասնակցելով ձևավորման հոսքին (layout flow): Այն սահմանում է տարրի ձևավորման բլոկի տեսակ:

Հիմնական արժեքները՝

• block: Տարրը ձևավորվում է որպես բլոկ: Կազմում է ամբողջ հասանելի լայնությունը, սկսվում է նոր տողից, կարող է ունենալ սահմանված չափսեր (width, height):
• inline: Տարրը ձևավորվում է որպես տողային: Չսկսում է նոր տողից, միայն անհրաժեշտ լայնությունը է վերցնում, չի կարող ունենալ սահմանված չափսեր (width, height), ուղղահայաց մարգարիտներ (margin-top, margin-bottom) և ներքին մարգարիտներ (padding-top, padding-bottom) չեն ազդում հարակից տարրերի վրա:
• inline-block: Տարրը ձևավորվում է որպես տողային, բայց որպես բլոկ է պահում տողի ներսում: Չսկսում է նոր տողից, կարող է ունենալ սահմանված չափսեր (width, height), ինչպես նաև ուղղահայաց մարգարիտներ և ներքին մարգարիտներ, որոնք ազդում են հարակից տարրերի վրա:
• none: Տարրը և նրա պարունակությունը չեն ցուցադրվում: Տարրը ամբողջությամբ հեռացվում է փաստաթղթի հոսքից, զբաղեցրած տեղ չկա:
• flex: Տարրը դառնում է Flex կոնտեյներ, իսկ նրա ուղիղ զավակները՝ Flex տարրեր: Օգտագործվում է ճկուն մոդելներ ստեղծելու համար:
• grid: Տարրը դառնում է Grid կոնտեյներ: Օգտագործվում է ցանցային մոդելներ ստեղծելու համար:

Ինչպես է աշխատում:

Բրաուզերը օգտագործում է display արժեքը՝ որոշելու համար, թե ինչ տեսակի ձևավորման կոնտեքստում է գտնվում տարրը: Դա ազդում է՝

• Փաստաթղթի հոսք: Ինչպես է տարրը տեղադրված իր հարևանների նկատմամբ:
• Տարրի չափսեր: Հնարավորություն սահմանել լայնություն և բարձրություն, պարունակության ազդեցությունը չափսերի վրա:
• Հարևան տարրերի վրա ազդեցություն: Ինչպես մարգարիտներն ու չափսերը ազդում են մյուս տարրերի տեղաշարժի վրա:

Օրինակ՝

/* `display: block` պարունակող տարր */
div {
  display: block;
  width: 100%; /* Լրացուցիչ լայնություն է զբաղեցնում */
  margin-bottom: 10px; /* Ստեղծում է ուղղահայաց հեռավորություն */
}

/* `display: inline` պարունակող տարր */
span {
  display: inline;
  /* width և height անտեսվում են */
  /* margin-top և margin-bottom անտեսվում են */
}

/* `display: inline-block` պարունակող տարր */
img {
  display: inline-block;
  width: 100px; /* Միջին լայնություն սահմանել */
  height: 100px; /* Միջին բարձրություն սահմանել */
  margin: 5px; /* Ստեղծում է հեռավորություններ բոլոր կողմերից */
}

/* թաքնված տարր */
.hidden {
  display: none;
}