Ostatnio edytowany:

place-content

Autor: Virtual Patriot

Opis właściwości place-content

Za pomocą właściwości place-content możemy określić kilka różnych cech dotyczących wyrównywania, posiadanych przez interesujący nas element HTML tworzący układ elastyczny.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje o właściwości place-content

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości place-content

Interpretacja właściwości align-self

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości space-evenly składnika align oraz wartości left, right, space-evenly składnika justify.

Safari

tak

Nie interpretuje wartości space-evenly składnika align oraz wartości left, right, space-evenly składnika justify.

Opera

tak

Nie interpretuje wartości space-evenly składnika align oraz wartości left, right, space-evenly składnika justify.

Internet Explorer

nie

Edge

tak

Nie interpretuje wartości space-evenly składnika align oraz wartości left, right, space-evenly składnika justify.

Opis wartości właściwości place-content

grupa wartości

Opis

Za pomocą właściwości place-content oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech dotyczących wyrównywania, posiadanych przez interesujący nas element HTML tworzący układ elastyczny.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  place-content:center flex-end;
}

/* REGUŁA - 2 */
div {
  align-content:center;
  justify-content:flex-end;
}

Składniki grupy wartości właściwości place-content

Ważne

podana przez nas grupa wartości właściwości place-content nie może zawierać wartości globalnych

Przykładowe zapisy

center

normal space-between

flex-end normal

center space-between

align

Składnik align nie jest wymaganym składnikiem grupy wartości właściwości place-content. Składnik align określa wartość właściwości align-content, czyli sposób wyrównania anonimowych bloków interesującego nas elementu HTML tworzącego układ elastyczny.

Wartość domyślna

normal

justify

Składnik justify nie jest wymaganym składnikiem grupy wartości właściwości place-content. Składnik justify określa wartość właściwości justify-content, czyli sposób wyrównania znajdujących się w anonimowych blokach elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.

Wartość domyślna

wartość składnika align lub wartość normal, gdy wartością składnika align jest wartość stretch

Przykład

  place-content:center space-between;
div - 1
div - 2
div - 3
div - 4
div - 5
div - 6
div - 7
div - 8
div - 9

Anonimowe bloki przykładowego elementu "div#flexbox" zostały wyśrodkowane względem początku oraz końca osi poprzecznej przykładowego elementu "div#flexbox", ponadto znajdujące się w poszczególnym anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały rozłożone w obszarze poszczególnego anonimowego bloku wzdłuż osi głównej przykładowego elementu "div#flexbox", pomiędzy początkiem oraz końcem osi głównej przykładowego elementu "div#flexbox", w stylu "space-between", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "place-content" wraz z następującą grupą wartości: "center space-between".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        place-content:center space-between;
        height:400px;;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:20%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:20%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:20%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:40%;
        background-color:pink;
      }

      #flexbox > :nth-child(5) {
        flex-basis:40%;
        background-color:gold;
      }

      #flexbox > :nth-child(6) {
        flex-basis:15%;
        background-color:lime;
      }

      #flexbox > :nth-child(7) {
        flex-basis:15%;
        background-color:fuchsia;
      }

      #flexbox > :nth-child(8) {
        flex-basis:15%;
        background-color:gray;
      }

      #flexbox > :nth-child(9) {
        flex-basis:15%;
        background-color:silver;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
      <div>div - 5</div>
      <div>div - 6</div>
      <div>div - 7</div>
      <div>div - 8</div>
      <div>div - 9</div>
    </div>

  </body>
</html>