Code 101

Display

Properties2
descriptionblock, inline, flex, grid — how elements take up space and arrange themselves
tagscheatsheet, débutant, css

5 min de lecture

Display is one of the most fundamental property in order to show, hide, and layout content is specific ways, by changing their natural arrangement on the page. By default, HTML elements generally stack either vertically taking full width of their container, or they flow inline, horizontally while ignoring width and height. We can do more than that by using specific display values such as grid and flex.

Block, Inline, Inline-block

block fills the full width and stacks vertically. inline flows with text, ignores width/height. inline-block flows with text but respects width and height settings.

<div class="demo">
    <div>
    <div class="label">block — fills width, stacks vertically</div>
    <div class="block-el">Block A</div>
    <div class="block-el">Block B</div>
    <div class="block-el">Block C</div>
    </div>
    <div>
    <div class="label">inline — flows with text</div>
    <span class="inline-el">Inline A</span>
    <span class="inline-el">Inline B</span>
    <span class="inline-el">Inline C — flows like text in a sentence</span>
    </div>
    <div>
    <div class="label">inline-block — inline flow + box model</div>
    <span class="dib-el">A</span>
    <span class="dib-el">B</span>
    <span class="dib-el dib-tall">C<br>tall</span>
    </div>
</div>
.demo { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
}
.label { 
    font-size: .75rem; 
    font-weight: 600; 
    color: #666; 
    text-transform: uppercase; 
    letter-spacing: .05em; 
    margin-bottom: .5rem; 
}
.block-el { 
    display: block;        
    background: #dbeafe; 
    border: 1px solid #93c5fd; 
    padding: .5rem 1rem; 
    margin: .25rem 0; 
    border-radius: 4px; 
}
.inline-el { 
    display: inline;       
    background: #fef9c3; 
    border: 1px solid #fde047; 
    padding: .2rem .5rem; 
    border-radius: 4px; 
}
.dib-el    { 
    display: inline-block; 
    background: #dcfce7; 
    border: 1px solid #86efac; 
    padding: .5rem 1rem; 
    border-radius: 4px; 
}
.dib-tall  { 
    height: 3rem; 
}
/* block — full width, stacks vertically, accepts width/height */
div, p, h1, section { display: block; }
 
/* inline — flows with text, width/height ignored */
span, a, strong { display: inline; }
 
/* inline-block — flows inline but respects box model */
.badge { display: inline-block; width: 80px; padding: 4px; }
 
/* display: none — removes completely, no space reserved */
.hidden { display: none; }
 
/* visibility: hidden — invisible but space is kept */
.invisible { visibility: hidden; }

02. Flexbox — Container

Setting display: flex on a container makes its direct children flex items. Control direction, wrapping, and gaps on the container.

<div class="flex-container">
    <div class="flex-item">A</div>
    <div class="flex-item">B</div>
    <div class="flex-item">C</div>
    <div class="flex-item">D</div>
</div>
.flex-container {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f1f5f9;
    border-radius: 8px;
    flex-wrap: wrap;
}
.flex-item {
    background: #6366f1;
    color: white;
    padding: .75rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
}
.container {
    display: flex;
    flex-direction: row;   /* row | column | row-reverse | column-reverse */
    flex-wrap:      wrap;  /* nowrap (default) | wrap | wrap-reverse */
    gap:            16px;  /* space between items */
}
 
/* flex-flow is shorthand for direction + wrap */
flex-flow: row wrap;

03. Flexbox — Alignment

justify-content aligns items along the main axis. align-items aligns them along the cross axis.

<div class="al-controls">
    <div class="ctrl-group">
        <span class="ctrl-label">justify-content</span>
        <label><input type="radio" name="jc2" value="flex-start" checked> flex-start</label>
        <label><input type="radio" name="jc2" value="center"> center</label>
        <label><input type="radio" name="jc2" value="flex-end"> flex-end</label>
        <label><input type="radio" name="jc2" value="space-between"> space-between</label>
        <label><input type="radio" name="jc2" value="space-around"> space-around</label>
    </div>
    <div class="ctrl-group">
        <span class="ctrl-label">align-items</span>
        <label><input type="radio" name="ai2" value="flex-start"> flex-start</label>
        <label><input type="radio" name="ai2" value="center" checked> center</label>
        <label><input type="radio" name="ai2" value="flex-end"> flex-end</label>
        <label><input type="radio" name="ai2" value="stretch"> stretch</label>
    </div>
</div>
<div class="al-preview" id="al-preview">
    <div class="al-item">A</div>
    <div class="al-item">B<br>tall</div>
    <div class="al-item">C</div>
</div>
.al-controls { 
    display: flex; 
    gap: 1.5rem; 
    flex-wrap: wrap; 
    margin-bottom: .75rem; 
}
.ctrl-group { 
    display: flex; 
    flex-direction: column; 
    gap: .25rem;
}
.ctrl-label { 
    font-size: .7rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: .05em; 
    color: #94a3b8; 
    margin-bottom: .1rem; 
}
label { 
    font-size: .8rem; 
    display: flex; 
    align-items: center; 
    gap: .3rem; 
    cursor: pointer; 
}
.al-preview {
    display: flex;
    background: #f1f5f9; 
    border-radius: 8px;
    height: 120px; 
    padding: .5rem;
}
.al-item { 
    background: #6366f1; 
    color: white; 
    border-radius: 6px; 
    padding: .5rem .75rem; 
    font-size: .8rem; 
    font-weight: 600; 
}
.al-item:nth-child(2) { 
    height: 3.5rem; 
    align-self: auto; 
}
document.querySelectorAll('input[name=jc2]').forEach(r => {
    r.addEventListener('change', () => {
        document.getElementById('al-preview').style.justifyContent = r.value
    })
});
document.querySelectorAll('input[name=ai2]').forEach(r => {
    r.addEventListener('change', () => {
        document.getElementById('al-preview').style.alignItems = r.value
    })
});
.container {
    display: flex;
    justify-content: center;  /* flex-start | center | flex-end | space-between | space-around | space-evenly */
    align-items:     center;  /* flex-start | center | flex-end | stretch | baseline */
}
 
/* override alignment for a single item */
.special { align-self: flex-start; }
 
/* center anything in one line */
.center-everything { display: flex; justify-content: center; align-items: center; }

04. Grid — Basics

CSS Grid is two-dimensional: rows and columns at once. The fr unit distributes leftover space proportionally. repeat() avoids repetition.

<div class="grid-container">
    <div class="grid-item">Header (spans all columns)</div>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.grid-item {
    background: #a855f7;
    color: white;
    padding: 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
}
.grid-item:nth-child(1) { 
    grid-column: 1 / -1; 
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;          /* 3 equal columns */
    grid-template-columns: repeat(3, 1fr);        /* same thing */
    grid-template-columns: 200px 1fr;             /* fixed + fluid */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* responsive */
    gap: 16px;
}

05. Grid — Placement & Areas

Items can span multiple cells with grid-column and grid-row. Named grid-template-areas create a visual ASCII-art map of your layout.

<div class="ga-grid">
    <div class="ga-area ga-header">header</div>
    <div class="ga-area ga-sidebar">sidebar</div>
    <div class="ga-area ga-main">main</div>
    <div class="ga-area ga-footer">footer</div>
</div>
.ga-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: 48px 1fr 40px;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    gap: 6px; height: 200px;
}
.ga-area { border-radius: 6px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: .75rem; 
    font-weight: 600; 
    color: white; 
    font-family: monospace; 
}
.ga-header  { 
    grid-area: header; 
    background: #6366f1; 
}
.ga-sidebar { 
    grid-area: sidebar; 
    background: #818cf8; 
}
.ga-main    { 
    grid-area: main; 
    background: #a5b4fc; 
    color: #1e1b4b; 
}
.ga-footer  { 
    grid-area: footer; 
    background: #c7d2fe; 
    color: #1e1b4b; 
}
.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows:    60px 1fr 60px;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    gap: 8px;
}
 
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
 
/* manual placement */
.hero { grid-column: 1 / 3; }     /* spans columns 1 and 2 */
.wide { grid-column: 1 / -1; }    /* spans all columns */
.tall { grid-row: 1 / span 2; }   /* spans 2 rows */

Vue Graphique