Vlastnost flex-wrap

Vlastnost flex-wrap nastavuje víceřádkové uspořádání bloků podél hlavní osy. Aplikuje se na nadřazený prvek flex bloků. Je součástí zkrácené vlastnosti flex-flow.

Syntaxe

cssselektor {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Hodnoty

Výchozí hodnota: nowrap.

Příklad . Hodnota wrap

Nyní se bloky nevejdou do svého kontejneru a seřadí se do několika řádků:

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

css#parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Příklad . Hodnota wrap-reverse

A nyní se pořadí změní na opačné (sledujte čísla uvnitř bloků):

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

css#parent {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Příklad . Hodnota nowrap

Nyní se budou bloky uspořádávat v jednořádkovém režimu (tak je to ve výchozím nastavení). Přitom hodnota šířky width pro bloky bude ignorována, pokud brání blokům vejít se do nadřazeného prvku. Všimněte si, že bloky se do nadřazeného prvku vešly, ale jejich skutečná šířka není 100px, jak je zadáno, ale méně:

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

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Příklad . Hodnota nowrap

Avšak, pokud se bloky vejdou při zadané šířce - vlastnost width nebude ignorována. Snížíme počet bloků tak, aby se všechny vešly:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Viz také