Autor publikacji
Virtual Patriot - Administrator

place-content

Data publikacji
Ostatnio edytowano

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 left, right składnika justify.

Safari

tak

Nie interpretuje wartości left, right składnika justify.

Opera

tak

Nie interpretuje wartości left, right składnika justify.

Internet Explorer

nie

Edge

tak

Nie interpretuje wartości left, right 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

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.

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.

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:#7DCDE8;
      }

      #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>