CSS Lastnost: place-content

Lastnost place-content se uporablja v flexbox in mrežnih postavitvah in je skrajšana lastnost za align-content in justify-content lastnosti.

Če ima lastnost dve vrednosti: place-content: start center;

center	Vrednost lastnosti justify-content je CENTER.
start	Vrednost lastnosti align-content je START.

Če ima lastnost eno vrednost: place-content: end;

end	Vrednosti align-content in justify-content sta END.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>place-content</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        .container1, .container2 {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            color: #333333;
            margin-bottom: 20px;
            border: 2px solid black;
        }
        .container1 {
            place-content: center;
        }
        .container2 {
            place-content: stretch;
        }
        .container1 > div, .container2 > div {
            width: 60px;
            height: 60px;
            margin: 5px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .container1 > div {
            background: #ffeb3b;
        }
        .container2 > div {
            background: #ffa726;
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
<h3>place-content: center;</h3>
<div class="container1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<h3>place-content: stretch;</h3>
<div class="container2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
</body>
</html>

REZULTAT

baseline	Poravnava prvega in zadnjega elementa.	Glej primer
center	Poravna elemente na sredini zabojnika.	Glej primer
end	Poravna elemente na koncu zabojnika.	Glej primer
flex-end	Poravna elemente na koncu zabojnika in velja samo za flexbox elemente.	Glej primer
flex-start	Poravna elemente na začetku zabojnika in velja samo za flexbox elemente.	Glej primer
normal	Odvisno od konteksta postavitve.	Glej primer
space-around	Enako porazdeli razpoložljivi prostor okoli vsakega elementa znotraj zabojnika.	Glej primer
space-between	Razpoložljivi dodatni prostor enakomerno porazdeli med elemente znotraj zabojnika.	Glej primer
space-evenly	Elemente znotraj zabojnika enakomerno porazdeli na obe osi.	Glej primer
start	Poravna elemente na začetku zabojnika.	Glej primer
stretch	Raztegne elementa mreže, da zapolni zabojnik, če velikost ni nastavljena.	Glej primer