Prikaz elementov s CSS

Z oblikovno lastnostjo display določimo vrsto elementa. Pri tem lahko izbiramo med naslednjimi elementi:

Vrednost	Pomen
none	prazen element, ni viden in ne zasede prostora
block	bločni element (kot <p>)
inline	vrstični element (kot <span>, <img>)
inline-block	blok v vrstici
list-item	točka seznama (kot <li>)
run-in	element, ki bo prikazan znotraj naslednjega elementa
table	tabela (kot <table>)
inline-table	vrstična tabela
table-caption	opis tabele (kot <caption>)
table-row-group	skupina vrstic v tabeli (kot <tbody>)
table-column-group	skupina stolpcev v tabeli (kot <colgroup>)
table-header-group	glava tabele (kot <thead>)
table-footer-group	noga tabele (kot <tfoot>)
table-row	vrstica tabele (kot <tr>)
table-column	stolpec tabele (kot <col>)
table-cell	celica v tabeli (kot <td>)
flex	prilagodljivo območje
inline-flex	prilagodljivo območje v vrstici
initial	ta vrednost naj bo privzeta
inherit	vrednost podeduje od nadrejenega elementa

Primer uporabe oblikovne lastnosti display:

<p> Uporaba lastnosti display omogoči, da bosta odstavka (p) postala vrstična 
elementa, odstvaek (div) bo neviden, element (span) pa bo postal bločni element. </p>
<p> Ta odstavek se nadaljuje v isti vrstici. </p>
<div> Odstavek div ni viden. </div>
<span> Element <span> je postal bločni element. </span>

p {display: inline}
div {display: none}
span {display:block}

display: flex

Primer prilagodljivega menija z uporabo lastnosti flex:

<ul class="meni">
    <li><a href="#">Domov</a></li>
    <li><a href="#">O nas</a></li>
    <li><a href="#">Izdelki</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

.meni {
    list-style: none;
    margin: 0;
    background: deepskyblue;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: flex-end;  
}

.meni a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
}    

.meni a:hover {
    background: #00b7f5;  
}    

@media all and (max-width: 800px) {    
    .meni {      
        justify-content: space-around;    
    }  
}    
@media all and (max-width: 600px) {
    .meni {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        padding: 0;
    }
    .meni a {
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255,255,255,0.3);
        border-bottom: 1px solid rgba(0,0,0,0.1);
    } 
    .meni li:last-of-type a {
        border-bottom: none;
    }  
}

Prikaz primera v brskalniku v novem oknu. Za prikaz vseh lastnosti menija spremeni širino okna!