The display property determines how an element generates boxes and participates in layout. Modern syntax: outer + inner (e.g. 'block flex'); legacy syntax: single value (block, inline-block, flex...). One of the most important CSS properties..box {
display: flex;
}.box {
display: inline flow-root;
}blockBlock-level outer box.inlineInline-level outer box (default).run-inRun-in outer box.flowInner: normal flow.flow-rootInner: new BFC (used for containment).tableInner: table layout.flexInner: flexbox.gridInner: CSS Grid.rubyInner: ruby layout (CJK).list-itemGenerates a list-item box (with marker).noneElement and descendants removed from layout entirely.contentsBox removed but descendants kept — useful in complex layouts.inline-blockLegacy: inline flow-root.inline-tableLegacy: inline table.inline-flexLegacy: inline flex.inline-gridLegacy: inline grid.table-rowInternal: table row.table-cellInternal: table cell.table-row-groupInternal: tbody.table-header-groupInternal: thead.table-footer-groupInternal: tfoot.table-columnInternal: col.table-column-groupInternal: colgroup.table-captionInternal: caption.ruby-baseInternal: ruby base text.ruby-textInternal: ruby annotation text.ruby-base-containerInternal: container for ruby bases in a line.ruby-text-containerInternal: container for ruby annotations in a line.inline-list-itemLegacy: inline-level list-item.CSS Display Module Level 4Editor's DraftW3CMDN demo view elements Show all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
