Autor publikacji: Virtual Patriot - Administrator

place-content

Data publikacji: Wrzesień 01 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - place-content property (LV3)

Przeznaczenie 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

Informacje techniczne o właściwości `place-content`

przeznaczenie

element HTML typu flex (dla składnika align element HTML typu flex posiadający właściwość flex-wrap wraz z wartością różną od wartości nowrap)
element HTML typu inline-flex (dla składnika align element HTML typu inline-flex posiadający właściwość flex-wrap wraz z wartością różną od wartości nowrap)

dowolna

nie

normal

brak

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`

tak

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

tak

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

tak

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

nie

tak

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

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

grupa wartości

Wyjaśnienie

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`

            align justify

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>