display CSS თვისებების ერთ-ერთი ყველაზე ფундამენტური თვისებაა — ის აკონტროლებს თუ როგორ აქმნის ელემენტი ყუთს და როგორ განლაგება მისი შვილ-ელემენტებს.
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display სინამდვილეში ორ რამეს აყენებს: როგორ იქცევა ყუთი გარეთ (block/inline) და როგორ განლაგება ის თავის შვილ-ელემენტებს შიგნით (flow/flex/grid). display: flex ნიშნავს "ეს ყუთი block-level რიგითაა და მისი შვილ-ელემენტები flex items-ებია".
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
მნიშვნელოვანი განსხვავება: display: none ჩამოყრის განლაგებას (და ფარავს screen readers-დან); visibility: hidden ტოვებს უფსკრელს იმ ადგილას, სადაც ელემენტი იყო. გამოიყენე display: none სრულად ამოსაშორებლად, visibility: hidden განლაგების შენარჩუნების დროს დასაფარად.
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
მოდერნული განლაგება აგებულია თითქმის მთლიანად flex-ზე (1D — მწკრივი ან სვეტი) და grid-ზე (2D — მწკრივი და სვეტი ერთად).
display განსაზღვრავს ელემენტის მთელ განლაგების ქცევას.
block-ის, inline-ის და inline-block-ის გაგება ხსნის ნაგულისხმელ ნაკადს; flex/grid მოდერნული განლაგების ბირთვია; და none-სა და visibility-ს შორის განსხვავება ხშირად გამოწერილი, პრაქტიკულად მნიშვნელოვანი დეტალია.